调整大小和移动画布上绘制的矩形

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);
});

因为我的时间不多了，我无法弄清楚如何做到这一点。

Answer 1

AFAK，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/

Answer 2

如果您想移动对象，则不能只是将它们绘制到画布上。您需要创建形状对象的实例并管理它们（根据需要进行命中测试和渲染）。它不是很复杂，但需要比目前为止更多的代码。

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