KineticJS - 用鼠标自由绘制 [英] KineticJS - Draw free with mouse

问题描述

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

I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points.

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

When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object.

问题是，如果你要绘制一个文本，说我的名字是x这将导致许多线对象，1每个字符（和2为x和i）。

Problem with this is that if you are going to draw a text, say "My name is x" That would result in many line objects, 1 for each character (and 2 for "x" and "i").

有更好的方法吗？我的想法是只有一个线对象，而onmousedown你只是不添加一行从上一个位置，然后当你拖动你做。但我不认为KineticJS Line支持这一点。

Is there a better way to do this? My idea was to have only one line object, and onmousedown you simply not add a line from the previous position, and then when u drag you do. But I don't think KineticJS Line supports that.

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

So basically, can I improve the way I let the user draw?

推荐答案

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

Your current design of having 1-2 polylines that define one letter is fine.

画布和Kinetic都可以支持一整段字符，但性能会下降。

Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.

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

If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.

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

With Shape, you get full access to a wrapped canvas context. You could use that context to do your second idea--a single context.path drawing a sentence through a saved set of moveTo and lineTo commands.

我会去您当前的设计（每个字符1-2个多段线），因为性能很好，你得到更多的灵活性。 （例如，如果您要在当前设计中以不同的颜色绘制人的名称更容易）。

Personally I would go with your current design (1-2 polylines per character) because the performance is fine and you get more flexibility. (For example, if you want to draw the person's name in a different color is easier in your current design).

这篇关于KineticJS - 用鼠标自由绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！