在 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(function..., and c2.addeventlistener...没有成功。

Answer 1

您实际上无法移动您在画布上制作的任何绘图。

但是......你可以创造出有东西在移动的错觉。

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

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

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

在 mousemove 中：如果设置了拖动标志（表示正在拖动），则根据用户拖动的距离更改所选文本的位置，并在新位置重新绘制形状

在 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>