草绘应用程序的点数据结构

Question

我目前正在开发基于HTML5 Canvas元素的小sketching application。有一个特殊的问题我还没有找到适当的解决方案。

这个想法是用户可以非常自由地操纵现有的笔画数据（点）。这包括推动点数据​​（即磁铁工具）并随心所欲地操纵它（即改变颜色）。

请注意，当前画笔引擎可以通过计算现有笔画数据来进行着色。这是一个快速而肮脏的解决方案，因为它只是迭代当前笔划中的点并根据距离规则检查它们。

现在问题是如何以一种很好的方式做到这一点。能够执行返回给定画布坐标和半径内所有点的高效查询非常重要。其他功能（如空间使用）应该是次要的。我不介意在用户不画画时在笔画之间做一些额外的处理。

欢迎提出任何指示。 ：）

Answer 1

在2d中处理任意点列表的标准解决方案是四叉树空间分区：http://en.wikipedia.org/wiki/Quadtree

Answer 2

您想要了解一般的spatial indexing。 Johan对四叉树提出了很好的建议。其他可能有用的数据结构：

• kd-tree
• vp tree
• simple grid index

Answer 3

我会选择简单矩阵int pixels[][]，其中对于x处的给定像素，y矩阵的值是其颜色。

我没有看到使用更复杂的数据结构的明显优势，矩阵非常快速且易于使用。至于操作，例如获取给定坐标和半径的点，您只需对矩阵索引执行数学运算，只检索匹配像素等。快速出血。

Answer 4

我基本上只是将一个数组包装在一个具有一些特殊功能的对象中，用于移动像素的数据 - 或者对它们进行采样。我在天气侵蚀项目中做了一些相似的事情......只是使用高斯函数来根据某种周长/加权原理对数据进行采样和推送。

如果你想要进行撤消/笔刷式交互，你必须有一个像素列表映射到每个'笔刷笔触'，但这看起来像是一个不同的对象 - 你只需要所有的笔触指向那个中心矩阵（对于他们影响的点的实际内容 - 他们可能有'权重'关于它们对点的贡献程度，或者其他东西）。