调整和移动在画布上绘制的矩形
Resize and move rectangles drawn on canvas
我允许用户在图像上绘制矩形。同时,用户应该能够在任何时间点调整或移动任何矩形的大小。在一些帮助下,我已经能够绘制矩形,但我无法调整大小和移动它的一部分。正在绘制的矩形不会相互重叠,并且在调整大小和移动时也必须进行验证。我正在使用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);
});
因为我时间不够了,我不知道该怎么做。
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/
这两个教程解释了你想要的:
- 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();
}
在其他处理程序中,您可以检测是否在矩形中单击鼠标何时移动
如果你想移动对象,你不能只是在画布上画对象。您需要创建形状对象的实例并管理它们(根据需要进行命中测试和呈现)。它不是很复杂,但需要比目前更多的代码。
试试这个教程:http://simonsarris.com/blog/510-making-html5-canvas-useful
相关文章:
- 在 d3.js 中绘制滚动/移动平均线
- 如何摆脱角色移动时绘制的图像痕迹
- 在HTML5画布上绘制/移动/删除笔划
- 在HTML5画布中绘制鼠标移动的半透明线条
- 在画布上绘制移动
- 在鼠标移动时绘制一个矩形,并使用 kineticjs 在鼠标向上选择该矩形内的所有形状
- 如何重新绘制背景,使其看起来像我的“播放器”在html5-canvas中移动
- 使用拉斐尔用滚动条绘制不移动的东西
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- 传单.js绘制控件不能在整个地图窗口区域上移动
- 高库存:移动渲染器元素和导航器/绘制趋势线
- Javascript画布绘制-大量移动时像素化
- 使用阶梯将绘制的形状移动到新的Y
- 可以'不要在移动浏览器上用手指绘制画布
- 在鼠标移动时绘制圆形后,保存并恢复画布矩形
- 如何移动绘制在圆周长上的X、Y坐标的起点
- 在画布上使用JavaScript绘制鼠标移动的透明图像
- 使用sketch.js为移动网页绘制画布会重置到这样
- 按下键时画布绘制移动
- 绘制移动线的最佳方法JavaScript