借助 canvas imageData 获取图像的顶点坐标答案

【问题标题】：Get vertex-coordinates of an image with the help of canvas imageData借助 canvas imageData 获取图像的顶点坐标
【发布时间】：2013-04-27 17:54:11
【问题描述】：

我需要获取某些精灵的每个边缘的位置，但不知道如何完成此操作。这是我的意思的示例图像：

我用canvas 和getImageData 尝试了一些东西，但没有成功。

我需要它来进行一些碰撞检测，结果必须是这样的数组：

[
    [-150, -120],
    [150, -120],
    [150, 60],
    [90, 120],
    [-90, 120],
    [-150, 60]
]

是否已经有一个简单的算法/解决方案在野外？

更新

这是我的意思的一个例子。使用箭头键旋转/缩放精灵 http://html5quintus.com/quintus/examples/sprite/

【问题讨论】：

那么你需要知道多边形的顶点吗？顺便说一句，我们是在谈论多边形吗？
@MaxArt 是的，你完全正确！ :) 有什么想法吗？
不容易。基本上，您必须使用getImageData 扫描画布，检测边框并跟随它检查方向的变化。抱歉，我没有为此写答案。
@MaxArt 没问题，很高兴知道你的想法和我的一样:)

标签： javascript canvas collision-detection intersection getimagedata

【解决方案1】：

我知道如何获取 x、y 坐标的唯一方法是在图像编辑器中打开图像。我会推荐免费的 GIMP。如果您正在寻找某种可以为您执行此操作的程序...我不知道有一个。

【讨论】：