我允许用户在图像上绘制矩形。同时,用户应该能够在任何时间调整大小或移动任何矩形。 在一些帮助下,我已经能够绘制矩形,但我无法想出调整大小和移动它的一部分。 正在绘制的矩形彼此不重叠,并且在调整大小和移动时也必须验证相同的矩形。 我正在使用javascript和jquery。 这是我到目前为止所做的demo:
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);
});
因为我的时间不够,我无法弄清楚如何做到这一点。
答案 0 :(得分:1)
这两个教程解释了你想要的东西:
简而言之,您应该自己存储矩形的边框,并检测用户在矩形或边框上单击的时间。
首先创建一个数组来存储矩形
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();
}
在您的其他处理程序中,您可以检测是否单击了鼠标移动时的矩形
答案 1 :(得分:1)
AFAK,HTML canvas元素只是一个像素数组。
然后,再次绘制/移动/调整大小矩形以保持重绘画布。
首先,需要存储绘制的对象(可能是数组)。 其次,相应的鼠标事件是必要的。 最后,需要画布重绘。
像:
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 for demo:https://jsfiddle.net/wiany11/p7hxjmsj/14/
答案 2 :(得分:0)
如果你想移动它们,你不能只在画布上绘制对象。您需要创建形状对象的实例并对其进行管理(根据需要进行命中测试和渲染)。它不是很复杂,但需要的代码比目前要多得多。
试用本教程:http://simonsarris.com/blog/510-making-html5-canvas-useful