在画布上定位和识别形状

假设我有一个物体在画布上呈现的四种不同形状。在画布上定位和识别形状

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坐标，然后我会运行一个自定义函数来找出坐在点击坐标上的形状。问题是，这并不总是防弹 - 例如在三角形的情况下，在它的边界内点击鼠标不会总是返回三角形......我需要以某种方式计算形状的面积（这看起来像尽管我需要一个自定义函数），而这看起来有些坚果。

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

来源

2017-09-19 Modermo

还有https://konvajs.github.io/用于2d画布事件 – Slai

如果这是您需要经常做的事情，那么我建议从画布切换到SVG。您可以轻松地将点击处理程序添加到SVG中的元素。 – david

这将只是给我x和鼠标点击的y坐标，然后我会运行一个自定义函数来寻找那些被坐在点击坐标

这正是形状你需要做什么。更准确地说，你可能会遍历这些形状并检查点击点是否在其中。

是否有任何本机函数使我能够识别画布上的元素？

号和要小心你的术语：这些都不是元素像你在DOM找到。

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

您需要检查点是否在每个三角形内，而不是它的边界框。做一个谷歌搜索“点三角形碰撞检测”或“点三角形相交”的一堆结果。这是一个数学问题，而不是一个编程问题。

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

来源

2017-09-19 23:56:02

Yeap，我不应该使用'element'，这是p5环境中两个完全不同的东西:)它看起来像是回到了我的绘图板！ – Modermo

看起来像[命中区域]（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility#Hit_regions）可以在Chrome和Firefox中使用。可能探索此选项... – Modermo

坚果，看起来像Chrome中的“ExperimentCanvasFeatures”功能标志需要设置为“真”，以使命中区域可以正常工作 – Modermo

在画布上定位和识别形状

回答

相关问题