在 canvas 中定位和识别形状

Targeting and identifying shapes in the canvas

假设我在一个对象的 canvas 上渲染了四种不同的形状。

var shapes = [
  { shape1 : 'A cool Triangle', structure: triangle(40,40,40,40,40,40) },
  { shape2 : 'A cool Rectangle', structure: rect(220,220,220,220) },
  { shape3 : 'Another cool rectangle', structure: rect(140,140,140,140) }
]

然后我们在设置代码中使用一个简单的 for 循环进行渲染(为简洁起见,我不会包括在内)。

for(let shape in shapes){
// Really shouldn't be using for...in on this array for obvious reasons
  shape.structure
}

现在 canvas 上有三个形状。

我想知道是否有一种内置方法可以在单击时以某种方式识别 canvas 上的形状。所以,如果我点击三角形,我 return 'A cool Triangle'.

代替 p5 的原生函数,我做了一些类似的事情:

sketch.mousePressed = function(){
  var mouseXCoord = mouseX;
  var mouseYCoord = mouseY;
  console.log("x:" + mouseXCoord + "y:" + mouseYCoord)  
}

这只会给我鼠标单击的 x 和 y 坐标,然后我会 运行 一个自定义函数来找出位于单击坐标处的形状。问题是,这并不总是防弹的——例如,在三角形的情况下,在它的边界内单击鼠标并不总是 return 三角形……我需要以某种方式计算形状的面积(好像我需要一个自定义函数),这看起来有点疯狂。

是否有任何本机函数可以让我识别 canvas 上的元素?

which will simply give me the x and y coordinates of the mouse click, and then I'd run a custom function to seek out the shape that is sitting at the clicked coordinates

这正是您需要做的。更准确地说,您可能会遍历这些形状并检查单击的点是否在其中任何形状内。

Is there any native function that enable me to identify an element on the canvas?

没有。请注意您的术语:这些不是您在 DOM.

中找到的 元素

Problem is, this isn't always bulletproof – in the case of triangles for example, a mouse click within it's boundary won't always return the triangle.

您需要检查点是否在每个三角形内,而不是在其边界框内。执行 google 搜索 "point triangle collision detection" 或 "point triangle intersection" 以获得一堆结果。这与其说是编程问题,不如说是数学问题。

您可以使用 collide2D 库,但老实说,对于像这样简单的事情,您可能应该自己进行检测。