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

时间:2013-09-19 05:33:41

标签: javascript html5-canvas kineticjs konvajs

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

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

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

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

如果有人向我解释这种误解,那将是非常有帮助的。

2 个答案:

答案 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 layergroup,或任何包含所有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.GroupKinetic.Container等等......

何时&amp;为什么使用: 每当您对画布进行任何更改时,都会调用相应容器的Draw()方法。除非您使用Draw()明确说明,否则KineticJS不会刷新画布。通常,尝试调用受更改影响的最小容器,以利用有效的缓存并仅重绘受影响的画布的一部分。

以此为例: 您的应用程序中有2个图层。 Layer1用于静态背景和一些其他静态项目,每次都不需要重绘。 Layer2包含您的移动元素或活动对象。然后,您只需拨打Layer2.draw()

即可

要添加复杂性,您有一组对象,让我们说出所有菜单项。当用户按下任何菜单btn时,最好调用menuGroup.draw()而不是其父图层的绘图功能。