问题
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.
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").
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:
Your current design of having 1-2 polylines that define one letter is fine.
Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.
If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.
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.
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).
来源：https://stackoverflow.com/questions/19355120/kineticjs-draw-free-with-mouse