javascript - Html5 画布仅可在预先存在的行上单击并在单击时添加点

Question

我很难找到一种好的方法来限制我的鼠标只能点击画布中预先存在的线条（笔划宽度为 3）

我需要知道的

1. 如何限制鼠标只能单击预先存在的行，单击时添加一个点

用这个函数画线

function createLine(startX:Float, startY:Float, endX:Float, endY:Float)
{    
    surface.beginPath();
    surface.moveTo(startX, startY);
    surface.lineTo(endX, endY);
    surface.closePath();
    surface.strokeStyle = '#ffffff';
    surface.lineWidth = 2;
    surface.stroke();
}

我在 haxe 工作，但是 JS 中的解决方案很好

提前致谢。

Answer 1

唯一的方法是让您跟踪绘制的内容并自行进行碰撞/鼠标检测。

如果您需要您的画布具有高度交互性，您可能应该查看 SVG。http://raphaeljs.com/是一个很棒的绘图库，它将使用画布或 SVG，无论哪个可用。