制作可拖动的HTML5画布曲线区域

如果我有绘制图像的画布。图像在曲线中有四个点。我需要使这个曲线区域可以拖动。但未使用kinetic Js制作可拖动的HTML5画布曲线区域

附加图片。

enter image description here

HTML

<div id='curveAreaDrag' class="ui-widget-content" > 
    <div id="point1" class="ui-widget-content"></div> 
    <div id="point2" class="ui-widget-content"></div> 
    <div id="point3" class="ui-widget-content"></div> 
    <div id="point4" class="ui-widget-content"></div> 
</div>  
    <canvas id="myCanvas" width="400px" height="400px" 
style="border:1px solid #d3d3d3;top:0;left:0"></canvas>

jQuery的

$("#curveAreaDrag").draggable({drag:function(){save();}});

更新时间：

我有四个贝塞尔曲线点。我也缩放每个点，然后光黑区也缩放。我需要拖动浅黑色区域。它不是一个图像。它是由贝塞尔曲线选定的区域。

来源

2013-03-05 Puzzled Boy

[编辑：为了适应OP的附加信息]

该代码使用2条三次Bezier曲线和6个的控制手柄，让你选择你的形象眼球。

红色手柄控制眼睛顶部的曲线。蓝色手柄控制眼睛底部的曲线。白色的手柄可以让你锚定在眼角。橙色显示结果路径（= 2条曲线）。

下面是应用程序的图片，这是它在行动小提琴：http://jsfiddle.net/m1erickson/98G9F/ image of application

这里是代码：

<!doctype html> 
<html> 
    <head> 

    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

    <style> 
     body { font-family: arial; } 
     .anchor { background: #fff; position: absolute; display: block; height: 10px; width: 10px; border: 1px solid #333; border-radius:5px;} 
     .control { background: #fff; position: absolute; display: block; height: 20px; width: 20px; border: 1px solid #333; border-radius:10px;} 
     .p1, .p2 { background: red; z-index: 50; } 
     .p3, .p4 { background: blue; } 
     .pStart { background:white;} 
     .pEnd {background:white;} 
     .pStart { left: 54px; top: 166px; } 
     .pEnd { left: 346px; top: 189px; } 
     .p1 { left: 150px; top: 39px; } 
     .p2 { left: 276px; top: 97px; } 
     .p3 { left: 219px; top: 227px; } 
     .p4 { left: 147px; top: 224px; } 
     canvas { border: 1px solid #333;} 
     #start,#end2{color:green;} 
     #end1{color:purple;} 
     #c1,#c3{color:red;} 
     #c2,#c4{color:blue;} 
    </style> 

    </head> 
    <body> 

     <a href="#" class="anchor pStart"></a> 
     <a href="#" class="control p1"></a> 
     <a href="#" class="control p2"></a> 
     <a href="#" class="anchor pEnd"></a> 
     <a href="#" class="control p3"></a> 
     <a href="#" class="control p4"></a> 

     <canvas height="400" width="400" id="canvas"></canvas> 

     <p>context.moveTo(
      <span id="start"></span>); 
     </p> 
     <p>context.bezierCurveTo(
      <span id="c1"></span>, 
      <span id="c2"></span>, 
      <span id="end1"></span>); 
     </p> 
     <p>context.bezierCurveTo(
      <span id="c3"></span>, 
      <span id="c4"></span>, 
      <span id="end2"></span>); 
     </p> 

    <script> 
     var $p1,$p2,$codeMove,$codeBez1,$codeBez2; 

     $(function() { 
     var canvas=document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     $pStart=$(".pStart"); 
     $pEnd=$(".pEnd"); 
     $p1 = $(".p1"); 
     $p2 = $(".p2"); 
     $p3 = $(".p3"); 
     $p4 = $(".p4"); 
     $codeMove=$("code-move"); 
     $codeBez1=$("code-bez1"); 
     $codeBez2=$("code-bez2"); 

     $(".pStart, .pEnd, .p1, .p2, .p3, .p4").draggable({ 
      containment: 'parent', 
      drag: function(event, ui) { renderWrap(ctx); }, 
      stop: function(){ renderWrap(ctx); } 
     }); 

     var eyeImage=new Image(); 
     eyeImage.onload=function(){ 
      canvas.width=eyeImage.width*1.5; 
      canvas.height=eyeImage.height*1.5; 
      renderWrap(ctx); 
     } 
     eyeImage.src="http://i.stack.imgur.com/SbcL4.png"; 

     function renderWrap(ctx) { 
     var pStart=$pStart.position(); 
     var pEnd=$pEnd.position(); 
     var p1 = $p1.position(); 
     var p2 = $p2.position();    
     var p3 = $p3.position(); 
     var p4 = $p4.position();  
     render({x:pStart.left, y:pStart.top}, {x:pEnd.left, y:pEnd.top}, {x:p1.left, y:p1.top}, {x:p2.left, y:p2.top}, {x:p3.left, y:p3.top}, {x:p4.left, y:p4.top}); 
     }; 

     function render(start, end, p1, p2, p3, p4) { 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(eyeImage,0,0,eyeImage.width,eyeImage.height,0,0,eyeImage.width*1.5,eyeImage.height*1.5); 
     ctx.beginPath(); 
     ctx.lineWidth = 2; 
     ctx.strokeStyle = "orange"; 
     // start-->end 
     ctx.moveTo(start.x,start.y); 
     ctx.bezierCurveTo(p1.x,p1.y,p2.x,p2.y,end.x,end.y); 
     ctx.stroke(); 
     // end-->start 
     ctx.bezierCurveTo(p3.x,p3.y,p4.x,p4.y,start.x,start.y);    
     ctx.stroke(); 
     ctx.closePath(); 
     // connectors 
     ctx.beginPath(); 
     ctx.strokeStyle = "#999"; 
     ctx.lineWidth = 1; 
     connector(start,p1); 
     connector(end,p2); 
     connector(end,p3); 
     connector(start,p4); 
     ctx.closePath(); 
     // display code 
     $("#start").html(start.x+","+start.y); 
     $("#c1").html(p1.x+","+p1.y); 
     $("#c2").html(p2.x+","+p2.y); 
     $("#end1").html(end.x+","+end.y); 
     $("#c3").html(p3.x+","+p3.y); 
     $("#c4").html(p4.x+","+p4.y); 
     $("#end2").html(start.x+","+start.y);  
     } 

     function connector(pt1,pt2){ 
      ctx.moveTo(pt1.x,pt1.y); 
      ctx.lineTo(pt2.x,pt2.y); 
      ctx.stroke(); 
     } 

    }); 
    </script> 

    </body> 
</html>

来源

2013-03-05 08:56:50 markE

我需要它丝毫不差位练习.. Bcoz你给我的图像（剪辑）。但这些都是与鼠标可扩展的点.. 但很好.. – 2013-03-05 09:59:11

你能帮助更多关于这一点。 – 2013-03-05 17:03:20

是的，我可以帮忙。你对贝塞尔曲线的理解有多好（强或“好”还是弱）？知道这将帮助我回答你的知识水平。 – markE 2013-03-05 17:13:27

制作可拖动的HTML5画布曲线区域

回答

相关问题