在html5中，Javascript有没有办法让我画的多边形可以拖拽?或者监听鼠标事件

In html5, Javascript is there a way to make a polygon I just draw draggable? or listen to mouse events?

本文关键字：多边形 事件 鼠标 监听 或者 Javascript html5 有没有      更新时间：2023-09-26

我画了一个多边形，代码如下:

    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...没有成功。

你实际上不能移动画布上的任何绘图。

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

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

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

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

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

相关文章：