Question

我的代码目标：

每当用户点击画布时，在HTML画布上绘制一个小矩形。矩形应该有一个小数字，表示用户制作的矩形数。
用户应该能够使用直线连接任意两个矩形。（最好只需按下鼠标左键，然后将鼠标从第一个矩形移动到第二个矩形）

接近和我的尝试

正如您在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＆amp; RECT_Y定义矩形的边。如果坐标确实存在于某个矩形内，那么这将返回rects数组中该矩形的索引。

然后是检查矩形内是否发生了mousedown的情况，注意如果mousedown事件在矩形内，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：

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

}

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

1 个答案: