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

Question

我的代码的目标:

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

2. 用户应该能够使用直线连接任意两个矩形.(最好只需按下鼠标左键,将鼠标从第一个矩形移到第二个矩形)

方法和我的尝试

正如你在这个jsFiddle中看到的那样,我已经能够很好地实现上面的第一部分.单击画布时,会在其中生成一个带有数字的矩形.但我对第二部分真的很无能为力.

如何让用户连接任何两个制作的矩形？我想只有在有一个矩形的情况下才能建立连接(所以我需要存储已经制作的每个矩形的坐标,这是可以的,因为我可以使用一个数组).基本上,我只是想检查mousedown是在一个地方而鼠标在另一个地方.我如何获得这两个不同的坐标(mousedown和其他鼠标之一),并在它们之间画一条线？我给了上面的小提琴,但仍然是我的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连接两个制作的矩形

我该如何实现这一目标？谢谢.

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。

然后是检查 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();

}