为什么KineticJS文档中没有方法draw()? [英] Why there is no method draw() in KineticJS documentation?
问题描述
我花了几个小时在谷歌搜索Kinetic.Layer.draw()方法。我发现的所有内容都是用例 - 没有关于如何,何时以及为何使用它的文档。也许它已经被弃用?
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.com/docs/index.html
如果有人解释,这将非常有用我这样的误解。
It will be really helpful if somebody explains to me such misunderstanding.
推荐答案
实际上 draw()
和 drawHit()
在文档中,但是它们的记录很少:
Actually draw()
and drawHit()
are in the docs, but they are poorly documented:
- http://kineticjs.com/docs/Kinetic.Stage.html#draw
draw()
draw()
绘制图层场景图
draw layer scene graphs
- http://kineticjs.com/docs/ Kinetic.Stage.html#drawHit
- http://kineticjs.com/docs/Kinetic.Stage.html#drawHit
drawHit()
drawHit()
绘制图层点击图
draw layer hit graphs
令人惊讶的是,我无法在Kinetic Docs中找到第3个和最后一个 draw 方法: drawScene()
。另外令我惊讶的是,这三个函数未被发现从 Kinetic.Stage
的父类扩展: Kinetic.Container
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
无论如何,我认为这个SO问题解释了差异完美的方法: KineticJS绘制方法之间的区别是什么?
Anyways, I think this SO question explains the differences of the methods perfectly: What is the difference between KineticJS draw methods?
当然,没有避免使用这些功能,你需要最终使用其中一个,除非你的画布/ stage在整个应用程序中是静态的。 (*可能有例外,见下文)
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)
回答你的问题:
在任何 Kinetic.Container <上调用
.draw()
/ code>其中包括: stage
layer
和 group
,或任何 Kinetic.Node
,其中包括所有 Kinetic.Shape
Call .draw()
on any Kinetic.Container
which includes: stage
layer
and group
, or any Kinetic.Node
which includes all the Kinetic.Shape
示例:
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
为什么:
我认为每次有一次重写时都不会重写 Kinetic.Stage
更改。通过这种方式使用draw方法,我们可以在我们希望更新和呈现阶段时以编程方式进行控制。正如您可能想象的那样,如果我们在场景中说10000个节点,那么必须一直绘制舞台是非常昂贵的。
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.
drawScene()
任何时候你需要更新场景渲染器(例如使用 .setFill()
来更改形状的填充)
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.
最后,也许一个示例/实验室将是这里最有益的学习工具,所以我准备了 JSFIDDLE 让您测试差异。按照说明阅读我的评论,以便更好地了解正在发生的事情。
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 comments 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.
这篇关于为什么KineticJS文档中没有方法draw()?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!