调整并移动在画布上绘制的矩形

Question

我正在允许用户在图像上绘制矩形。同时，用户应该能够在任何时候调整或移动任何一个矩形。 在一些帮助下，我已经能够绘制矩形，但是我无法实现其调整和移动部分。 被绘制的矩形不会重叠，而在调整和移动时也必须进行验证。 我正在使用JavaScript和jQuery。 这是我目前所做的演示：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

ctx.strokeStyle = "lightgray";
ctx.lineWidth = 3;


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

// Put your mousedown stuff here
startX = mouseX;
startY = mouseY;
isDown = true;
}

function handleMouseUp(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
$("#uplog").html("Up: " + mouseX + " / " + mouseY);

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

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

// Put your mousemove stuff here
if (!isDown) {
    return;
}

ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawRectangle(mouseX, mouseY);


}

function drawRectangle(mouseX, mouseY) {
var width = mouseX - startX;
var height = mouseY - startY;
ctx.beginPath();
ctx.rect(startX, startY, width, height);
ctx.stroke();
}


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

由于时间紧迫，我现在无法弄清楚如何完成这项任务。

- steffi.m

---

如果你想移动对象，那么你不能仅仅将它们画在画布上。你需要创建你的形状对象实例并管理它们（按需进行命中测试和渲染）。这并不是很复杂，但需要比你目前所拥有的代码更多的编码。 - iCollect.it Ltd

你有什么建议或样例可以分享，让我可以按照那些方向进行工作吗？ - steffi.m

这个怎么样：http://simonsarris.com/blog/510-making-html5-canvas-useful - iCollect.it Ltd

我无法将其与我的代码集成。不确定如何使用它。 - steffi.m

Answer 1

据我所知，HTML画布元素只是像素的数组。

然后绘制/移动/调整大小矩形，只需要不断重新绘制画布即可。

因此，首先需要存储已绘制的对象（可能在数组中）。 其次，需要相应的鼠标事件。 最后，需要重新绘制画布。

例如：

var boxes = [];
var tmpBox = null;    
document.getElementById("canvas").onmousedown = function(e) {...};
document.getElementById("canvas").onmouseup = function(e) {...};
document.getElementById("canvas").onmouseout = function(e) {...};
document.getElementById("canvas").onmousemove = function(e) {...};

这是演示用的JSFiddle：https://jsfiddle.net/wiany11/p7hxjmsj/14/

- ghchoi

---

谢谢提供的好示例，我怎样才能在画布背景中使用图片？ - Shujaath Khan

@ShujaathKhan 你可能正在寻找“drawImage”函数。 - ghchoi

非常感谢。我已经搜索了太多的StackOverflow和文章，但是你的答案是最完整的。再次感谢。 - Kamran Taghaddos

Answer 2

这两篇教程解释了你想要的内容：

• http://simonsarris.com/blog/510-making-html5-canvas-useful
• http://simonsarris.com/blog/225-canvas-selecting-resizing-shape

简而言之，您应该自己存储矩形的边框，并检测用户何时单击矩形或边框。

首先，创建一个数组来存储您的矩形。

var rectangles = [];

然后你可以创建一个方法，每当你想要绘制所有矩形时都可以调用它。

function drawRectangles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for(var i = 0; i < rectangles.length; i++) {
    var rect = rectangles[i];
    ctx.beginPath();
    ctx.rect(rect.startX, rect.startY, rect.endX, rect.endY);
    ctx.stroke();
    ctx.closePath();
  }
}

在你的mouseUp事件中，你需要将创建的矩形推送到数组中。

function handleMouseUp() {
  ...
  // store the rectangle as an object in your array
  var rectangle = {startX: startX, endX: mouseX, startY: startY, endY: mouseY};
  rectangles.push(rectangle);
  drawRectangles();
}

在您的其他处理程序中，您可以检测到是否单击了矩形或者当鼠标移动到矩形中时

- pkempenaers

---

你能分享一个基于我的代码的小代码片段吗，这样我就可以有个想法了吗？ - steffi.m

Answer 3

如果你想移动对象，就不能只是在画布上绘制它们。你需要创建形状对象的实例并管理它们（根据需要进行碰撞检测和渲染）。这并不是非常复杂，但需要比你目前所拥有的代码更多。

尝试一下这个教程：http://simonsarris.com/blog/510-making-html5-canvas-useful。

- iCollect.it Ltd

---

这个教程很有帮助。但我不确定如何在我的代码中实现相同的功能。你能帮我吗？ - steffi.m

通过那个演示和同一网站上的另一个链接http://simonsarris.com/blog/225-canvas-selecting-resizing-shape，更多的是关于*从他们的示例代码开始*，因为你目前的代码很少。 - iCollect.it Ltd