Question

如果我有这样的行（将来的xy情节）

`Canvas {
    id:canvas
    onPaint:{
       var ctx = canvas.getContext('2d');
       ctx.moveTo(0,0);
       ctx.lineTo(50,20);
       ctx.lineTo(50,70);
       // etc...
    }
 }`

那么，有没有一种方法可以检查此行上的鼠标按键事件？即如果我有一个情节，并想在右边的图线上显示上下文菜单

Answer 1

不幸的是，AFAIK，你应该跟踪你画的内容。 Canvas不会将绘制的东西存储为矢量图形（同样，AFAIK），但是在光栅上，所以没有办法让它告诉你线条/点的位置。

您可以将传递给ctx.moveTo和ctx.lineTo的每个点推送到列表或其他结构。然后，在单击时，迭代所有线段（由您存储的点对指定）并检查点击点到线段的距离是否在您想要的某个选择容差范围内。

要检查距离，您可以使用： Shortest distance between a point and a line segment

我不知道这是否是最简单的方法，但它确实有用。

在Context2d中在线检查鼠标事件

1 个答案: