Question

html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？

例如，画了一条直线
ctx.moveTo(450, 400);
ctx.lineTo(500,600)或者ctx.lineTo(450,600);
如何确定鼠标经过了这条直线，只要经过这条直线的任一部分就可以触发事件
求详细一点的代码(js/html5 canvas/,net)或思路。最好有点代码哟O(∩_∩)O

Answer 1

这个玩意有点复杂。首先要获取点击发生鼠标所在的坐标。然后判断这个坐标是否在图形的范围内。如果在，刚可以视为点击了该图形。图形本身是不能响应事件的。必须用canvas代理。只是要判断的情况有时候很复杂。如果这个点所在的位置有多个图形。这就需要判断到底是具体的哪个。这就需要重绘图，绘一次判断一次。但这样就可能产生DOM的事件冒泡那样的情况。所以。。。要做好这个东西。面对的情况是相当复杂的。建议还是多找找资料。做做测试。

追问

我做的不需要很复杂，没有其它图形，就是仅仅判断鼠标是否经过这条直线的任意位置就可以触发事件就可以，thanks。给点点代码及思路，O(∩_∩)O

Answer 2

封闭路径的话可以使用context.isPointInPath(x,y)