在html5中，JavaScript有没有办法让一个多边形，我只绘制拖动？或听听鼠标事件？

Question

所以，我得出一个多边形用下面的代码：

var canvas = document.getElementById("polyCanvas"); 
    var c2 = canvas.getContext("2d"); 
    var coords = ''; 

    c2.clearRect(0, 0, 2000, 2000); 
    $("fdel").remove(); 
    $("#eliminar" + todelete).remove(); 
    c2.beginPath(); 

    var first = true; 
    var points = 1; 
    var done = false; 
    $("#vertexcontainer .vertex").each(function() { 
     var position = $(this).position(); 
     var x = 2+position.left; 
     var y = 2+position.top; 
     if (!done){ 
      if (first) { 
       c2.moveTo(x, y); 
       first = false; 
      } else { 
       c2.lineTo(x, y); 
      } 
     } 
     if(points > cpoints){ 
      done = true; 
     } 
     points = points + 1; 
     coords = coords + x + ',' + y + ' '; 
    }); 
    $('#coordinates').val(coords);; 
    c2.closePath(); 
    c2.lineWidth = 2; 
    c2.strokeStyle = '#ff0000'; 
    c2.stroke(); 
    c2.fillStyle = "rgb(0, 100, 200)"; 
    c2.fill(); 

它运行顺利，但我希望能够拖动多边形，或者使用鼠标事件与它。那可能吗？

我的天真尝试做c2.hover（功能......，和c2.addeventlistener ......一直没成功的=（

Answer 1

你不能真正打动你已经在画布上所做的任何图纸。

但是... 您可以创建的东西是移动的错觉。

您可以通过反复擦除画布上，并在新的位置上重新绘制形状创建运动的错觉。

要拖动形状，您需要听4次鼠标事件。

在mousedown：检查鼠标是否在形状上，如果是，请设置一个表示拖动已开始的标志。要检查鼠标是否在形状上，可以使用画布上下文的isPointInPath方法来测试[x，y]点是否位于最近绘制的路径中。

在鼠标移动：如果拖动标志被设置（指示拖动操作处理），由用户拖动的距离改变所选择的文本的位置和重新绘制形状在它的新位置

在mouseup或mouseout中：拖动已结束，以便清除拖动标志。

这里是一个示例代码和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var isDown=false; 
 
var startX,startY; 
 

 
var poly={ 
 
    x:0, 
 
    y:0, 
 
    points:[{x:50,y:50},{x:75,y:25},{x:100,y:50},{x:75,y:125},{x:50,y:50}], 
 
} 
 

 
ctx.fillStyle='skyblue'; 
 
ctx.strokeStyle='gray'; 
 
ctx.lineWidth=3; 
 

 
draw(); 
 

 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
$("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 

 

 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    define(); 
 
    ctx.fill(); 
 
    ctx.stroke() 
 
} 
 

 
function define(){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(poly.points[0].x+poly.x,poly.points[0].y+poly.y); 
 
    for(var i=0;i<poly.points.length;i++){ 
 
    ctx.lineTo(poly.points[i].x+poly.x,poly.points[i].y+poly.y); 
 
    } 
 
    ctx.closePath(); 
 
} 
 

 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    startX=parseInt(e.clientX-offsetX); 
 
    startY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousedown stuff here 
 
    define(); 
 
    if(ctx.isPointInPath(startX,startY)){ 
 
    isDown=true; 
 
    } 
 
} 
 

 
function handleMouseUp(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mouseup stuff here 
 
    isDown=false; 
 
} 
 

 
function handleMouseOut(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mouseOut stuff here 
 
    isDown=false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!isDown){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousemove stuff here 
 
    var dx=mouseX-startX; 
 
    var dy=mouseY-startY; 
 
    startX=mouseX; 
 
    startY=mouseY; 
 

 
    poly.x+=dx; 
 
    poly.y+=dy; 
 
    draw(); 
 

 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag the polygon</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>