我花了几个小时在谷歌搜索Kinetic.Layer.draw()方法。我发现的所有内容都是用例 - 没有关于如何,何时以及为何使用它的文档。也许它已经被弃用了?
这些是我在学习和玩这个精彩框架时使用的主要链接:
http://kineticjs.com/docs/index.html
如果有人向我解释这种误解,那将是非常有帮助的。
答案 0 :(得分:9)
实际上draw()
和drawHit()
在文档中,但它们的记录很少:
<强> draw()
强>
绘制图层场景图
<强> drawHit()
强>
绘制图层命中图
令人惊讶的是,我无法在Kinetic Docs中找到第3个和最后一个 draw 方法:drawScene()
。另外,令我惊讶的是,这些3个函数未被发现从Kinetic.Stage
的父类扩展:Kinetic.Container
无论如何,我认为这个SO问题完全解释了方法的差异:What is the difference between KineticJS draw methods?
当然,没有避免使用这些功能,除非你的canvas / stage在你的整个应用程序中是静态的,否则你需要最终使用其中一个。 (*可能有例外,见下文)
回答你的问题:
致电.draw()
上的Kinetic.Container
,其中包括:stage
layer
和group
,或任何包含所有Kinetic.Node
的{{1}} }}
示例:
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
上重绘所有内容。以这种方式使用draw方法,当我们希望更新和呈现阶段时,我们可以以编程方式控制。正如您可能想象的那样,如果我们在场景中说出10000个节点,那么必须一直绘制舞台是非常昂贵的。
Kinetic.Stage
任何时候您需要更新场景渲染器(例如使用drawScene()
更改形状的填充)
.setFill()
如果要将事件绑定到形状,则更新命中图,以便将任何事件的命中区域更新为节点更改。
drawHit()
每当您需要执行上述两项操作时。
最后,也许一个示例/实验室将是最有益的学习工具,所以我准备了一个JSFIDDLE来测试差异。按照说明阅读我的评论,以便更好地了解正在发生的事情。
*注意:我上面提到过必须使用draw方法有一个例外。这是因为每当您向舞台添加图层时,图层中的所有内容都会自动绘制。在小提琴的底部有一个小例子。
答案 1 :(得分:4)
draw()
方法主要用于绘制与调用方法的容器关联的所有(可见)元素。
因此,它不仅限于Kinetic.Layer
,还可以用于Kinetic.Group
,Kinetic.Container
等等......
何时&amp;为什么使用:
每当您对画布进行任何更改时,都会调用相应容器的Draw()
方法。除非您使用Draw()
明确说明,否则KineticJS不会刷新画布。通常,尝试调用受更改影响的最小容器,以利用有效的缓存并仅重绘受影响的画布的一部分。
以此为例:
您的应用程序中有2个图层。 Layer1用于静态背景和一些其他静态项目,每次都不需要重绘。
Layer2包含您的移动元素或活动对象。然后,您只需拨打Layer2.draw()
要添加复杂性,您有一组对象,让我们说出所有菜单项。当用户按下任何菜单btn时,最好调用menuGroup.draw()
而不是其父图层的绘图功能。