如何在单击精确坐标时发生某些事情

Question

我只想知道如何在画布上制作一些东西，只需点击画布的特定区域即可。

假设我的画布宽度为400像素，高度为400像素，我画的是一张脸。 如果我点击一下眼睛，我希望它能改变。让我们说眼睛在坐标中（用.arc（）绘制）（135,70,15,0，Math.PI * 2，true）。

我怎样才能做到这一点，当我点击眼睛内的任何地方，而不是其他地方，有什么事情发生？

非常感谢!!

Answer 1

您需要手动计算鼠标是否在眼睛中。最好，最简单，最精确的解决方案是使用ctx.isPointInPath。此API将告诉您某个点是否在您正在绘制的当前形状中。示例：

ctx.arc(135,70,15,0,Math.PI*2,true)

if(ctx.isPointInPath(your_mouse.x, your_mouse.y)) {
    doSomething()
}

否则你可以进行一些命中测试，但这会更复杂，具体取决于对象的形状。矩形示例：

if(
    mouse.x > rect.x && mouse.y > rect.y &&
    mouse.x < (rect.x + rect.width) && mouse.y < (rect.y + rect.height)
) {
    doSomething()
}

Answer 2

您需要实施 hit testing 。

• 在场景图中跟踪您绘制的对象 - 一种包含对象及其位置的DOM。
• 当您点击某处时，您需要将点击的位置与对象的位置进行比较。
• 如果点击point lies within the area of a drawn object，您认为点击。

那个或者就在前面并使用一个为你保留这样一个场景图的画布库，例如Paper.js或Fabric.js - 这两个库也允许hit-testing。