为<canvas>映射多边形的正确方法

Question

几个小时后，我一直在对着互联网猛击我的头，想出如何获得坐标来制作一个特定形状的多边形（跟踪围绕一张图片）在HTML5 <canvas>中使用。

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

也就是说，我需要获得同一个多边形固定坐标的几个版本，这些坐标已经统一缩小或缩小。

A“镜面点”功能也将是有用的，但不是必需的（我生活中可以没有完美的对称= P）

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

HTML图像映射工具(This one was the best) 它给了我，我需要的坐标，但我无法找到一个让我重新大小的多边形，并获得新的坐标，而且，我不能”找到另一个工具，我可以把坐标放进去，并吐出新的调整大小的坐标。我会做出同样的多边形两次，但以不同的大小（也可能有未对齐的点）

互动数学绘图仪(geogebra was the best one) 这一次将是完美的，但我不能把它给我以可复制的方式进行坐标。我将不得不单独写下每一个需要时间的坐标。

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

我不禁觉得我会对此完全错误的方式..

大家不要笑，数学不是我的强项.. 并请原谅我，如果这是在错误的堆栈交换站点，我不知道还有什么地方可以放置它。

非常感谢您提供任何帮助。

Answer 1

哦，男人，我感到羞怯。

我发现geogebra能够执行所有我需要的功能（虽然真的模糊，在一些地区复杂）

，而不是删除我的帖子，但是，我认为这很重要，我离开这个这里为其他人找到，考虑到我没有找到任何有关创建图像映射和矢量图形的多边形坐标<canvas>搜索小时结束。

我能够使多边形的坐标列表通过使用下列程序（内geogebra：

1. 做一个多边形（通过使用多边形工具，将聚行工具（其中有在输入框中没有一点限制，但在多边形不填）或Polygon[A,B,C,D]）

2. （如果你的多边形被命名为POLY1它应该是默认的），把{Vertex[poly1]}到输入框的底部，使协调员名单在代数视图中。

3. 去查看>电子表格（您也可以按CTRL + 转变 + 小号）

4. 右键单击您的新列表（这是绿色）中的坐标列表，然后选择“记录到电子表格“然后单击关闭（只需按esc也可以使用，或者，如果您有很多多边形，该框对于您的屏幕来说太大，关闭按钮位于该框的右侧，因此将该框拖动到离开，直到你看到按钮）

5. 去查看>重新计算所有对象（或按CTRL + [R）

6. 选择/通过点击（2日）表行突出显示在电子表格中所有的数字和复制并粘贴到Notepad ++或其他编码的文本编辑器，并使用替代函数（CTRL + ^h）搜索\t（或TAB），并与,\t替换所有的比赛（这将格式化您的坐标，用在你的代码）

要镜像您可以使用“反映了线对象”工具（左文本工具）（选择一个节点，你要镜像，然后选择一个顶点线将其反映到X或Y）

节点

您可以重新大小使用该输入基于规模的多边形：Dilate[poly1, 2]（调整2到任何规模要重新大小它）（感谢您对GeoGebra论坛评为mathmum数学向导！）

其他不起眼的信息从数学奇才命名兹比涅克和murkle在Geogebra论坛：

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

选项二：

Polygon[A,B,C,D] 

，或者，如果您正在编辑从只有坐标现有（未分），你可以使用语法：

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

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

移动多边形尝试像

Translate[poly1,(1,1)] 

（ “1,1” 你要移动它的X和Y coords）使用

四舍五入，你可以做点像

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

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

除了转换实际的多边形外，还可以直接在列表中应用转换，例如。

2*list1, list1+(1,1) 

我仍然不知道这是着手做2D多边形向量在画布或图像的地图使用的正确方法，但这是我迄今设想的最简单的方法。

谢谢Joachim（和数学奇才）花时间回复我的问题=）

Answer 2

说到缩放，画布可以为您缩放：http://www.w3schools.com/tags/canvas_scale.asp 这将缩放一切，包括笔画宽度。

如果您需要缩放代码中的实际坐标，例如为了节省笔画宽度，这只是将每个x和y分别乘以相同因子的问题。你可以很容易地从你的渲染代码做到这一点。

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