1

我正在构建一个画布绘画工具，用户只需拖动鼠标即可在画布上绘画。据我了解，线条是完成这项工作的最佳方式。所以在鼠标按下时，我创建了一个 KineticJS Line 对象，当用户拖动时，我在最后一个鼠标位置和当前鼠标位置之间添加一个点。请注意，我只有一个具有多个点的线对象。

当用户松开鼠标时，线条就完成了，每当您再次单击以绘制更多内容时，我都会创建一个新的线条对象。

这样做的问题是，如果您要绘制文本，请说“我的名字是 x”，这将导致许多线条对象，每个字符 1 个（“x”和“i”有 2 个）。

有一个更好的方法吗？我的想法是只有一个 line 对象，并且 onmousedown 你根本不从前一个位置添加一条线，然后当你拖动你时。但我不认为 KineticJS Line 支持这一点。

所以基本上，我可以改进让用户绘制的方式吗？

4

1 回答 1

1

您当前的设计有 1-2 条折线来定义一个字母，这很好。

canvas 和 Kinetic 都可以支持一整段字符，然后才表现滞后。

如果您想要一个完整句子的单一定义，您可以使用自定义 Kinetic.Shape。

使用 Shape，您可以完全访问包装的画布上下文。您可以使用该上下文来实现您的第二个想法 - 单个 context.path 通过一组保存的 moveTo 和 lineTo 命令绘制一个句子。

就我个人而言，我会采用您当前的设计（每个字符 1-2 条折线），因为性能很好并且您可以获得更大的灵活性。（例如，如果您想用不同的颜色绘制人名，在您当前的设计中会更容易）。

于 2013-10-14T16:05:48.017 回答