Question

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

附图片。

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();}});

更新

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

Answer 1

[已修改：符合OP的其他信息]

此代码使用2个Cubic 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>

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

1 个答案: