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