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

时间:2018-09-04 09:54:57

标签: javascript html5 canvas

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

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

2 个答案:

答案 0 :(得分:2)

一旦在画布上绘制了东西,除非具有某种图像处理算法,否则您将无法获取绘制对象的坐标。

相反,您需要将在画布上绘制的多边形对象保留在内存中,并且需要在画布上定义其边界。

这样,当用户单击画布时,您只需在画布上获取鼠标坐标,然后通过检查绘制多边形的位置并检查鼠标单击是否输入了该多边形的边界来计算单击了哪个多边形。

答案 1 :(得分:1)

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

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

(有关更多详细信息,请参见SO答案How do I get the coordinates of a mouse click on a canvas element?。)

2)确定用户单击了多边形P之后,您想重绘它。您可以通过使用与以前相同的坐标简单地重绘相同的多边形来重绘它(例如,可以将strokeStylefillStyle更改为不同的颜色以表示所选内容)

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

请注意,如果多边形很复杂,甚至确定合适的缩放点也可能很困难。 “什么是复杂多边形的中心”这个问题有几个不同的答案。一个简单的答案是对多边形点的所有X和Y值取平均值(中心X = avg(X),中心Y = avg(Y))。如果这看起来不太正确,则另一个SO问题What is the fastest way to find the "visual" center of an irregularly shaped polygon?中还有更复杂的方法可用。

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