KineticJS – 用鼠标自由绘制

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

当用户释放鼠标时，Line已完成，每当您再次单击以绘制更多内容时，我都会创建一个新的线对象。

问题在于，如果要绘制文本，请说“我的名字是x”，这将产生许多行对象，每个字符为1（“x”和“i”为2）。

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

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

Answer 1

您当前设计的1-2个折线定义一个字母是好的。

canvas和Kinetic都可以在性能滞后之前支持整段字符。

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

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

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