如何在图像上拖放绘制的多边形答案

【问题标题】：How to drag and drop drawn polygon on image如何在图像上拖放绘制的多边形
【发布时间】：2018-01-02 10:08:38
【问题描述】：

如何在图像上拖放绘制的多边形

目前通过鼠标点击在图像上绘制多边形，我可以对最新绘制的多边形进行撤消操作，但如何对选定的多边形进行拖放操作
1. 并在位置改变时更新坐标
2. 将坐标保存在数组中（目前我正在这样做）

//radius of click around the first point to close the draw
var END_CLICK_RADIUS = 15;
//the max number of points of your polygon
var MAX_POINTS = 4;

var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var polygons = [];

var canvas = null;
var ctx;
var image;

window.onload = function() {
  var background = document.getElementById('justanimage');
  //initializing canvas and draw color
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  image = new Image();
  image.onload = function() {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  };
  image.src = 'https://images.freeimages.com/images/large-previews/2fe/butterfly-1390152.jpg';
  canvas.addEventListener("click", function(e) {
    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;
    if (isStarted) {
      //drawing the next line, and closing the polygon if needed
      if (Math.abs(x - polygons[polygons.length - 1][0].x) < END_CLICK_RADIUS && Math.abs(y - polygons[polygons.length - 1][0].y) < END_CLICK_RADIUS) {
        isStarted = false;
      } else {
        polygons[polygons.length - 1].push(new Point(x, y));
        if (polygons[polygons.length - 1].length >= MAX_POINTS) {
          isStarted = false;
        }
      }
    } else {
      //opening the polygon
      polygons.push([new Point(x, y)]);
      isStarted = true;
    }
  }, false);

  //we just save the location of the mouse
  canvas.addEventListener("mousemove", function(e) {
    mouseX = e.clientX - canvas.offsetLeft;
    mouseY = e.clientY - canvas.offsetTop;
  }, false);

  //refresh time
  setInterval("draw();", 5);
}

//object representing a point
function Point(x, y) {
  this.x = x;
  this.y = y;
}

//resets the application
function reset() {
  isStarted = false;
  points = null;
  document.getElementById("coordinates").innerHTML = " ";
}

//draws the current shape
function draw() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#ff0000';
  polygons.forEach(function(points, i) {
    ctx.beginPath();
    points.forEach(function(p, j) {
      if (j) {
        ctx.lineTo(p.x, p.y);
      } else {
        ctx.moveTo(p.x, p.y);
      }
    });
    if (i + 1 === polygons.length && isStarted) { // just the last one
      ctx.lineTo(mouseX, mouseY);
    } else {
      ctx.lineTo(points[0].x, points[0].y);
    }
    ctx.stroke();
  });

}

function undoLastPoint() {
  // remove the last drawn point from the drawing array
  polygons.pop();
}

<canvas id="canvas" width="500" height="500"></canvas>
<button type="button" onclick="undoLastPoint()">Undo</button>
<img id="justanimage" />

【问题讨论】：

标签： javascript drag-and-drop html5-canvas coordinates polygon

【解决方案1】：

画布元素以“立即模式”呈现，这意味着画布不会跟踪已绘制的形状。它在绘制后立即“忘记”所有已绘制的内容。所以没有内置的方法来选择形状或路径并拖动它，因为画布不再知道形状。您必须自己构建它。

选择路径：在绘图时，您可以使用CanvasRenderingContext2D.isPointInPath()，如果像鼠标单击的坐标这样的坐标在当前路径内，则返回true。 “当前”意味着这个函数需要在路径被绘制之后和从上下文堆栈中删除之前被调用。（见https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath）
拖动：为了能够在使用isPointInPath() 检测到已单击的路径后拖动路径，您需要存储坐标（可能还有颜色）并将旧坐标转换为鼠标的新位置并重新绘制路径. 为了使这个动画化，以便用户可以看到路径是如何用鼠标移动的，您需要尽可能多地重绘整个图像。这可以使用window.requestAnimationFrame() 来完成（见https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations）

【讨论】：