为什么KineticJS文档中没有方法draw()？

Question

我花了几个小时搜索Kinetic.Layer.draw()方法.我发现的所有内容都是用例 - 没有关于如何,何时以及为何使用它的文档.也许它已经被弃用了？

这些是我在学习和玩这个精彩框架时使用的主要链接:

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

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

如果有人向我解释这种误解,那将会非常有帮助.

Answer 1

实际上draw()并且drawHit()在文档中,但它们的记录很少:

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

draw()

绘制图层场景图

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

drawHit()

绘制图层命中图

令人惊讶的是,我无法找到第三种和最后一种绘制方法:drawScene()在Kinetic Docs中.另外令我惊讶的是,没有发现这三个函数是从以下的父类扩展Kinetic.Stage:Kinetic.Container

无论如何,我认为这个问题完全解释了方法的不同之处:KineticJS绘制方法有什么区别？

当然,没有避免使用这些功能,除非你的canvas/stage在整个应用程序中是静态的,否则你最终需要使用其中一个.(*可能有例外,见下文)

回答你的问题:

如何:

呼叫.draw()任何Kinetic.Container包括:stage layer和group/或任何Kinetic.Node包括所有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个节点,那么必须始终绘制舞台是非常昂贵的.

时间:

drawScene()

任何时候你需要更新场景渲染器(例如使用.setFill()更改形状的填充)

drawHit()

如果要将事件绑定到形状,则更新命中图,以便将任何事件的命中区域更新为节点更改.

draw()

每当你需要做上述两种情况时.

最后,也许一个示例/实验室将是这里最有益的学习工具,所以我准备了一个JSFIDDLE来测试差异.按照说明阅读我的评论,以便更好地了解正在发生的事情.

*注意:我上面提到过必须使用draw方法有一个例外.这是因为无论何时向舞台添加图层,图层中的所有内容都会自动绘制.在小提琴的底部有一个小例子.