定位和识别画布中的形状 [英] Targeting and identifying shapes in the canvas

问题描述

比方说，我在一个对象上的画布上绘制了四种不同的形状.

Let's say I have four different shapes rendered on a canvas from an object.

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循环进行渲染(为简便起见，我将不包括在内).

Then we render using a simple for loop in our setup code(which, for brevity's sake, I won't include).

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

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

Now we have three shapes on the canvas.

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

I want to know if there is an inbuilt method that can identify somehow a shape on the canvas on click. So, if I click the triangle, I return 'A cool Triangle'.

代替p5的本机功能，我做了一些调整:

In lieu of a native function to p5, I've done something to the tune of:

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

这将简单地给我鼠标单击的x和y坐标，然后运行自定义函数以找出位于单击坐标处的形状.问题是，这并不总是防弹的-例如，在三角形的情况下，在其边界内单击鼠标不会总是返回三角形...我需要以某种方式计算形状的面积(这似乎是尽管我需要一个自定义函数)，但这似乎有点不合时宜.

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. 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... I'd need to somehow calculate the area of the shape (which seems as though I need a custom function for), and this just seems kinda nuts.

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

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

推荐答案

这将简单地给我鼠标单击的x和y坐标，然后运行一个自定义函数来找出位于单击坐标处的形状

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

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

That's exactly what you need to do. More accurately, you'd probably iterate over the shapes and check whether the clicked point was inside any of them.

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

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

不.而且请注意您的用语:这些元素不是元素，就像您在DOM中找到的那样.

No. And be careful with your terminology: these aren't elements like you'd find in the 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.

您需要检查点是否在每个三角形内，而不是其边界框内.用谷歌搜索点三角形碰撞检测"或点三角形相交"，以获得一堆结果.这更多的是数学问题，而不是编程问题.

You need to check whether the point is inside each triangle, not its bounding box. Do a google search for "point triangle collision detection" or "point triangle intersection" for a bunch of results. This is more of a math question than it is a programming question.

您可以使用 collide2D 库，但是说实话，您应该自己进行检测像这样简单的事情.

You could use the collide2D library, but honestly you should probably just do the detection yourself for something as simple as this.

这篇关于定位和识别画布中的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！