Question

我们说我在画布上渲染了四种不同的形状。

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
}

现在我们在画布上有三个形状。

我想知道是否有一个内置方法可以在点击时以某种方式识别画布上的形状。因此，如果我点击三角形，我会返回'A cool Triangle'。

代替p5的原生功能，我已经做了一些事情：

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

它只是给我鼠标点击的x和y坐标，然后我运行一个自定义函数来寻找坐在点击坐标上的形状。问题是，这并不总是防弹 - 例如，在三角形的情况下，鼠标点击它的边界不会总是返回三角形......我需要以某种方式计算形状的面积（好像我需要一个自定义函数），这看起来有点疯狂。

是否有任何本机功能可以让我识别画布上的元素？

Answer 1

它只是给我鼠标点击的x和y坐标，然后我运行一个自定义函数来寻找坐在点击坐标上的形状

这正是你需要做的。更准确地说，您可能会迭代形状并检查点击的点是否在其中任何一个内部。

是否有任何本机函数可以让我识别画布上的元素？

没有。并且要小心你的术语：这些不是你在DOM中找到的元素。

问题是，这并不总是防弹 - 例如，在三角形的情况下，鼠标点击它的边界不会总是返回三角形。

您需要检查点是否在每个三角形内，而不是其边界框。做谷歌搜索＆＃34;点三角碰撞检测＆＃34;或者＆＃34;点三角交叉点＆＃34;对于一堆结果。这是一个数学问题，而不是编程问题。

您可以使用collide2D库，但老实说，您应该自己做一些像这样简单的检测。

在画布中定位和识别形状

1 个答案: