在画布中查找多边形的坐标

汉宁顿曼波

我在画布上画了几个多边形。我现在对如何找到所选多边形的坐标(顶点)感兴趣。我可以使用鼠标坐标找到选定的多边形(区域),但是如果选中它,则需要重绘它,这就是为什么需要它的坐标来做到这一点。

到目前为止,我找到的一个类似答案是使用GeoGebra使用https://help.geogebra.org/topic/-solved-how-do-i-get-a-list-of-coordinates-from-a-polygon-,但是我正在使用HTML5和JavaScript!

艾略特·纳尔逊(Elliot Nelson)

听起来您正在尝试解决几个不同的问题:

1)找出用户单击了哪个多边形。如前所述,如果要在内存中保留多边形数组并可以实现一个isPointInPath方法,则可以遍历内存中的多边形并检查是否单击了任何多边形。别忘了要获得准确的检查,您可能需要获取给定的“鼠标x”和“鼠标y”坐标(例如,从单击事件中获取)并减去画布的页面X和Y坐标。

(有关更多详细信息,请参见SO答案如何获得在画布元素上单击鼠标的坐标?。)

2)一旦确定用户单击了多边形P,便要重绘它。通过使用与以前相同的坐标简单地重绘相同的多边形,您应该能够毫无问题地重绘它(例如,可以将您的strokeStyle更改fillStyle为不同的颜色来表示所选内容)。

如果你想多边形更大,在相同的位置,这是一个不同的问题-基本上,你需要翻译画布多边形的中心,然后扩展画布,然后绘制你的多边形。如果您不熟悉它,可以在http://codetheory.in/canvas-rotating-and-scaling-images-around-a-particular-point/中找到一个教程(使用图像代替多边形,但使用相同的概念)。

请注意,如果多边形很复杂,即使确定合适的缩放比例点也可能很困难。“什么是复杂多边形的中心”这个问题有几个不同的答案。一个简单的答案是对多边形点的所有X和Y值取平均值(中心X = avg(X),中心Y = avg(Y))。如果这看起来不正确,则另一个SO问题中还有更复杂的方法可用,即找到不规则形状的多边形的“可视”中心的最快方法是什么?

希望这能为您指明正确的方向!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章