我的代码目标:
方法和我的尝试
如您在jsFiddle中所看到的,我已经很好地实现了上面的第一部分。在 Canvas 上单击时,将制作一个内部带有数字的矩形。但是我对第二部分真的一无所知。
如何使用户连接任何两个已制成的矩形?我希望仅在有矩形的情况下进行连接(因此,我需要存储已制作的每个矩形的坐标,这没关系,因为我可以为此使用数组)。
基本上,我只想检查mousedown是否在一个位置,而mouseup在另一个位置。
如何获得这两个不同的坐标(mousedown的另一个和mouseup的另一个),并在它们之间画一条线?
我已经给了 fiddle ,但仍然是我的jQuery:
$(function () {
var x, y;
var globalCounter = 0;
$('#mycanvas').on("click", function (event) {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
x -= mycanvas.offsetLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
y -= mycanvas.offsetLeft;
// alert("x:"+x+"y: "+y);
drawRectangle(x, y);
});
function drawRectangle(x, y) {
var acanvas = document.getElementById("mycanvas");
var context = acanvas.getContext("2d");
context.strokeRect(x, y, 25, 25);
globalCounter++;
writeNo(x, y, globalCounter);
}
function writeNo(x, y, n) {
var acanvas = document.getElementById("mycanvas");
var context = acanvas.getContext("2d");
context.font = "bold 14px sans-serif";
context.fillText(n, x + 8, y + 12.5);
}
});
因此,主要的问题是:通过mousedrag 连接两个制成的矩形
我该如何实现?
谢谢你。
最佳答案
怎么样:http://jsfiddle.net/4jqptynt/4/
好的,首先我对您的代码做了一些重构,以使事情变得更容易。就像将获取 Canvas 坐标的代码放入其自己的函数中,并在外部函数的作用域中缓存一些变量(例如 Canvas 上下文)之类的东西一样。哦,将矩形尺寸定义为常量,因为我们将在几个不同的地方使用相同的数字。
正如您所说,我们需要做的第一件事是使用rects
数组(在drawRectangle
中很容易做到)来跟踪现有的矩形。然后,我们需要一个函数来检查特定的一对坐标是否在某个矩形内:
function inRectangle(x, y) {
for (var i = 0, l = rects.length; i < l; i++) {
if ((x - rects[i].x) <= RECT_X && (y - rects[i].y) <= RECT_Y &&
(x - rects[i].x) >= 0 && (y - rects[i].y) >= 0) {
return i;
}
}
}
其中
RECT_X
和RECT_Y
定义矩形的边。如果坐标确实存在于某个矩形内,则它将返回rects
数组内该矩形的索引。然后是检查是否在矩形内发生mousedown的情况,并指出
inRectangle
仅在mousedown事件在矩形内时才返回数字:$acanvas.on("mousedown", function (event) {
var coords = getCoords(event),
rect = inRectangle(coords.x, coords.y);
if (typeof rect === "number") {
dragStart = rect + 1;
} else {
drawRectangle(coords.x, coords.y);
}
});
如果是这样,请使用
dragStart
记录哪个矩形,如果不像以前那样绘制一个矩形。然后完成拖动,我们需要在
mouseup
上附加一个处理程序:$acanvas.on("mouseup", function (event) {
if (!dragStart) { return; }
var coords = getCoords(event),
rect = inRectangle(coords.x, coords.y);
if (typeof rect === "number") {
drawConnection(dragStart - 1, rect);
}
dragStart = 0;
});
如果没有开始拖动,则它什么也不做。如果它的坐标不在矩形内,则除了重置
dragStart
外,它什么都不做。但是,如果它在矩形内,则会绘制一条连接线:function drawConnection(rect1, rect2) {
context.strokeStyle = "black";
context.lineWidth = 1;
context.beginPath();
context.moveTo(rects[rect1].x + RECT_X/2, rects[rect1].y + RECT_Y/2);
context.lineTo(rects[rect2].x + RECT_X/2, rects[rect2].y + RECT_Y/2);
context.stroke();
context.closePath();
}
关于javascript - 获取HTML Canvas 上两个不同位置的坐标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26235011/