admin管理员组

文章数量:1323200

I've spent hours googling about Kinetic.Layer.draw() method. All that I've found is use-cases - no documentation about how, when and why to use it. Maybe it's deprecated already?

These are primary links which I use while learning and playing with this wonderful framework:

.html

/

It will be really helpful if somebody explains to me such misunderstanding.

I've spent hours googling about Kinetic.Layer.draw() method. All that I've found is use-cases - no documentation about how, when and why to use it. Maybe it's deprecated already?

These are primary links which I use while learning and playing with this wonderful framework:

http://kineticjs./docs/index.html

http://www.html5canvastutorials./kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

It will be really helpful if somebody explains to me such misunderstanding.

• javascript
• html5-canvas
• kineticjs
• konvajs

Share Improve this question Follow edited Mar 13, 2016 at 11:23 Mahdi Alkhatib 1,98211 gold badge3232 silver badges4343 bronze badges asked Sep 19, 2013 at 5:33 sermolaevsermolaev 9951111 silver badges2323 bronze badges 2

• 1 I'm not very familiar with KineticJS, but I've seen same issue with other JS frameworks. Maybe it's not a public method. Actually there is no official way to declare something as private in your JavaScript code. So some of JS frameworks/libraries tries not to generate any public documentation about internal methods or properties. – zaerymoghaddam Commented Sep 19, 2013 at 5:56
• Thanks for hint, I'll try to find out, maybe I should avoid using this method.. – sermolaev Commented Sep 19, 2013 at 8:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Actually draw() and drawHit() are in the docs, but they are poorly documented:

• http://kineticjs./docs/Kinetic.Stage.html#draw

draw()

draw layer scene graphs

• http://kineticjs./docs/Kinetic.Stage.html#drawHit

drawHit()

draw layer hit graphs

Surprisingly I was unable to find the 3rd and last draw method: drawScene() in the Kinetic Docs. Also to my surprise, these 3 functions were not found to be extended from the parent class of Kinetic.Stage: Kinetic.Container

Anyways, I think this SO question explains the differences of the methods perfectly: What is the difference between KineticJS draw methods?

And definitely, there's no avoiding using these functions, you'll need to use one of them eventually unless your canvas/stage is static during your entire application. (*There may be an exception, see below)

To answer your questions:

How:

Call .draw() on any Kinetic.Container which includes: stage layer and group, or any Kinetic.Node which includes all the Kinetic.Shape

Examples:

stage.draw(); //Updates the scene renderer and hit graph for the stage
layer.drawHit(); //Updates the hit graph for layer
rect.drawScene(); //Updates the scene renderer for this Kinetic.Rect

Why:

I would think it's a performance thing to not have everything redraw on the Kinetic.Stage every single time there is a change. The use of the draw methods this way we can control programatically when we want the stage to be updated and rendered. As you might imagine, it is quite expensive to have to draw the stage all the time if we have say 10000 nodes in the scene.

When:

drawScene()

Anytime you need to update either the scene renderer (for example using .setFill() to change the fill of a shape)

drawHit()

To update the hit graph if you're binding events to your shapes so that the hit area for any events will be updated to the node changes.

draw()

Whenever you need to do both of the above.

Finally, perhaps an example/lab will be the most beneficial learning tool here, so I've prepared a JSFIDDLE for you to test out the differences. Follow the instructions and read my ments inside to get a better understanding of what's going on.

*NOTE: I mentioned above there was an exception to having to use the draw methods. That is because whenever you add a layer to the stage, everything in the layer is automatically drawn. There is small example of this described at the bottom of the fiddle.

The draw() method is basically used for drawing all the (visible) elements associated with the container you call the method on. It is therefore not just limited to Kinetic.Layer but can also be used on Kinetic.Group, Kinetic.Container and so on...

When & Why to use: Whenever you make any change to the canvas, you call the appropriate container's Draw() method. KineticJS does not refresh the canvas unless you explicitly say it using Draw(). In general, try to call the smallest container affected by your changes to make use of the efficient caching and redrawing only a part of canvas that was affected.

Take for instance: You have 2 layers in your application. Layer1 is used for a static background and some other static items that need not be redrawn everytime. And Layer2 contains your moving elements, or active objects. Then you can simply make a call to Layer2.draw()

To add the plexity, you have a group of objects, lets say all menu items. When a user presses any menu btn, its better to call menuGroup.draw() rather than the draw function of the its parent layer.

本文标签： javascriptWhy there is no method draw() in KineticJS documentationStack Overflow