javascript - 获取 HTML canvas 上两个不同位置的坐标

Question

我的代码的目标:

1. 每当用户点击 Canvas 时，在 HTML Canvas 上绘制一个小矩形。矩形应该有一个小数字，代表用户制作的矩形的数量。

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

方法和我的尝试

正如您在此 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连接两个制作的矩形

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

Answer 1

这个怎么样: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();

}