为 <canvas> 映射多边形的正确方法（以及执行此操作的工具）答案

【问题标题】：The correct way to map polygons for <canvas> (And the tools to do it)为 <canvas> 映射多边形的正确方法（以及执行此操作的工具）
【发布时间】：2014-08-06 05:36:57
【问题描述】：

几个小时以来，我一直在互联网上拼命想弄清楚如何获取坐标以制作特定形状的多边形（围绕图片绘制）以在 HTML5 <canvas> 中使用。

我需要一个工具，它允许我使用连接点跟踪图片以创建多边形，能够重新调整多边形的大小并在数组中接收新的固定坐标作为可复制文本，以用作 @ 中的精灵987654324@

也就是说，我需要得到同一个多边形的固定坐标的几个版本，它们已经统一缩小或放大了。

“镜像点”功能也很有用，但不是必需的（我可以在没有完美对称的情况下生活 =P）

我找到了一些方法，但每个都有自己的问题，这两个是我得到的最接近的：

HTML 图像映射工具 (This one was the best) 它给了我需要的坐标，但是我找不到一个可以让我重新调整多边形大小并获得新坐标的坐标，此外，我找不到另一个可以将坐标放入并吐出的工具新调整大小的坐标。我将不得不制作两次相同的多边形，但大小不同（并且可能有未对齐的点）

交互式数学绘图仪 (geogebra was the best one) 这个本来是完美的，但我无法让它以可复制的方式给我坐标。我必须单独写下每个坐标，这需要很长时间。

所以，我的问题是，制作复杂的多边形/几何形状并获取它们的坐标的正确方法是什么？我很确定这只是基本的几何/代数，但是有没有更面向编码人员并做我正在寻找的程序的程序？

我不禁觉得我的做法完全错误..

请不要笑，数学不是我的强项.. 如果这是在错误的堆栈交换站点，请原谅我，我不知道该放在哪里。

提前感谢您提供的任何帮助。

【问题讨论】：

标签： html canvas geometry polygon imagemap

【解决方案1】：

说到缩放，画布可以为你缩放：http://www.w3schools.com/tags/canvas_scale.asp 这将缩放所有内容，包括笔画宽度。

如果您需要在代码中缩放实际坐标，例如为了节省笔划宽度，只需将每个 x 和 y 分别乘以相同的因子即可。您可以通过渲染代码轻松完成此操作。

这两种方法都会相对于原点缩放点。如果您需要围绕其他中心缩放它们，则需要移动它们（加/减 x 和 y），围绕原点缩放，然后将它们移回相同的量。

【讨论】：

【解决方案2】：

天啊，我是不是觉得很害羞。

我发现geogebra 能够执行我需要的所有功能（尽管在某些领域确实晦涩难懂且过于复杂）

但是，我认为与其删除我的帖子相比，我认为将其留在这里供其他人查找很重要，因为我在搜索数小时后没有找到任何关于在<canvas> 中为图像映射和矢量图形创建多边形坐标的内容结束。

我可以使用以下过程制作多边形坐标列表（在geogebra:

制作多边形（使用多边形工具，折线工具（没有点限制但不填充多边形形状）或输入框中的Polygon[A,B,C,D]）
（如果你的多边形命名为poly1，它应该是默认的），在底部的输入框中输入{Vertex[poly1]}，在代数视图中创建一个坐标列表。
转到查看 > 电子表格（或者按 ctrl+shift+S）
右键单击坐标列表中的新列表（它是绿色的）并选择“记录到电子表格”，然后单击关闭（只需按 esc 也可以，或者，如果您有很多多边形框对于您的屏幕来说太大了，关闭按钮位于框的右侧，因此将框拖到左侧直到您可以看到按钮）
转到查看>重新计算所有对象（或按ctrl+R）
通过单击（第二个）表格行来选择/突出显示电子表格中的所有数字，然后将它们复制并粘贴到记事本++ 或其他编码文本编辑器中，并使用替换功能 (ctrl +H) 搜索\t（或TAB）并将所有匹配项替换为,\t（这将格式化您的坐标以便在您的代码中使用）

要镜像节点，您可以使用“线内反射对象”工具（文本工具左侧）（选择要镜像的节点，然后选择顶点线将其镜像到 X 或是）

您可以使用此输入根据比例调整多边形的大小： Dilate[poly1, 2]（将 2 调整为您想要调整大小的任何比例）（感谢数学向导在 GeoGebra 论坛上命名为 mathmum！）

其他模糊信息来自 Geogebra 论坛上名为 Zbynek 和 murkle 的数学奇才：

创建多边形的替代方法 使用“折线”工具，它没有点限制，但缺点是它不会填充多边形。它比第二个选项快得多，并且可以像多边形一样进行操作。

选项二：

Polygon[A,B,C,D]

或者，如果您仅从坐标（而不是点）编辑现有坐标，则可以使用以下语法：

Polygon[(-5,4),(0,-12),(5,4)]

这对于大型多边形至关重要，因为交互式多边形工具有一个点限制。

移动多边形尝试类似

Translate[poly1,(1,1)]

（“1,1”是您想要将其移动到的 X 和 Y 坐标）

四舍五入，你可以这样做

list1={Vertex[poly1]}
text1=list1+""

然后右键单击 text1，转到对象属性 > 文本 > 舍入 > 0 个小数位。

您可以直接在列表上应用变换，而不是变换实际的多边形，例如。

2*list1, list1+(1,1)

我仍然不确定这是否是制作用于画布或图像地图的 2D 多边形矢量的正确方法，但这是迄今为止我能想到的最简单的方法。

感谢 Joachim（和数学奇才）抽出时间回答我的问题 =)

【讨论】：