获取 HTML 画布上两个不同位置的坐标

Question

我的代码目标：

1. 每当用户单击画布时，都会在 HTML 画布上绘制一个小矩形。矩形应该有一个小数字，表示用户制作的矩形数量。

2. 用户应该能够使用直线连接任意两个矩形。 （最好只按鼠标左键，然后将鼠标从第一个矩形移到第二个矩形）

方法和我的尝试

正如您在jsFiddle 中看到的，我已经能够很好地实现上面的第一部分。单击画布时，会生成一个内部带有数字的矩形。但我真的对第二部分一无所知。

如何让用户连接任意两个制作的矩形？我希望仅在存在矩形时才建立连接（因此我需要存储已制作的每个矩形的坐标，这没关系，因为我可以为此使用数组）。 基本上，我只想检查 mousedown 是否在一个地方，而 mouseup 是否在另一个地方。 如何获得这两个不同的坐标（一个 mousedown 和另一个 mouseup ），并在它们之间画一条线？ 我已经给出了上面的小提琴，但仍然是我的 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);
    }
});

因此，主要问题是：通过鼠标拖动将两个矩形连接起来

我如何实现这一目标？ 谢谢。

Answer 1

这个怎么样：http://jsfiddle.net/4jqptynt/4/

好的，首先我对您的代码进行了一些重构，以使事情变得更容易。就像将获取画布坐标的代码放入它自己的函数中，并在外部函数的范围内缓存一些变量（如画布上下文）。哦，将您的矩形尺寸定义为常量，因为我们将在几个不同的地方使用相同的数字。

正如你所说，我们需要做的第一件事是使用数组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 数组中的索引。

然后是检查鼠标按下是否在矩形内发生的情况，注意inRectangle 只会在鼠标按下事件在矩形内时返回一个数字：

$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附加一个handler：

$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();

}