Question

假设我在HTML5 Canvas中绘制了一条线：

...
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.closePath();
...

我想知道鼠标停止事件是否发生在这一行，我有这样的代码：

var handleMouseDown = function(e) {
  var coords = translateCoords(e.x,e.y);
  ...
  if (ctx.isPointInPath(coords.x, coords.y) {
    ...

现在，这个代码在circle＆amp; amp;矩形，但不是线条。我有两个问题：

我的想法是，或许在一行上调用closePath（）是不正确的。问题 - 如何检查此行是否发生了鼠标按下事件？
如何对此进行扩展，以确定鼠标停止事件是否发生在线附近？

Answer 1

第一步是找到点到线上的正常投影。这实际上非常简单：从第1点到目标的距离，从第2点到目标，分别称它们为D1和D2。然后计算D1+(D2-D1)/2。这是从点1到线上投影点的距离。

您现在可以找到该点，并获得从该点到目标的距离。如果距离为零，则目标正好在线上。如果距离小于5，那么目标距离小于5px，依此类推。

编辑：一张图片胜过千言万语。这是一个图表：

Diagram http://adamhaskell.net/img/schematic.png

（事后看来，可能应该让这些圈子变成不同的颜色......另外，紫色线应该与AB线垂直。用蓝线怪我可怕的目标！）

Answer 2

以下是维基百科文章Distance from a point to a line (Line defined by two points)

采用的方法

        var Dx = x2 - x1;
        var Dy = y2 - y1;
        var d = Math.abs(Dy*x0 - Dx*y0 - x1*y2+x2*y1)/Math.sqrt(Math.pow(Dx, 2) + Math.pow(Dy, 2));

其中（x0，y0）是你的点坐标，你的线是（（x1，y1），（x2，y2））但是，这不会检查行的边界，所以我不得不为它添加另一个检查。

    function inBox(x0, y0, rect) {
        var x1 = Math.min(rect.startX, rect.startX + rect.w);
        var x2 = Math.max(rect.startX, rect.startX + rect.w);
        var y1 = Math.min(rect.startY, rect.startY + rect.h);
        var y2 = Math.max(rect.startY, rect.startY + rect.h);
        return (x1 <= x0 && x0 <= x2 && y1 <= y0 && y0 <= y2);
    }

您的线条定义为矩形。希望这会有所帮助。

Answer 3

你有两种选择。您的“简单”选项是使用画布来执行此操作 - 读取鼠标所在的像素数据，如果它与您的线条颜色相同，则用户单击该线条。然而，这会产生许多假设，就像画布上的所有内容都以不同的纯色呈现一样。然而，这是可能的，因为一个常见的技巧是将所有内容呈现为不同纯色的离屏画布。然后，当用户点击某些内容时，您可以通过读取该像素的颜色并将其映射回原始对象来确切知道它是什么。

但这并不是你要求的：）

您不想知道用户是否点击过一行，因为他们几乎从不会。一条线是无限薄的，所以除非它完全水平或完全垂直，否则它们永远不会点击它。你想要的是看看鼠标离线的距离。 Kolink刚回答了这一部分，所以我会在这里停下来:)。

找出一个点是否在一条线上

3 个答案: