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

Posted 2023-03-24

【中文标题】为啥 KineticJS 文档中没有方法 draw()？

【英文标题】：Why there is no method draw() in KineticJS documentation?为什么 KineticJS 文档中没有方法 draw()？

【发布时间】：2013-09-24 01:48:48

【问题描述】：

我花了几个小时在谷歌上搜索 Kinetic.Layer.draw() 方法。我发现的只是用例——没有关于如何、何时以及为什么使用它的文档。也许它已经被弃用了？

这些是我在学习和使用这个美妙的框架时使用的主要链接：

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

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

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

【问题讨论】：

我对 KineticJS 不是很熟悉，但我在其他 JS 框架中也看到过同样的问题。也许这不是公共方法。实际上，没有官方方法可以在您的 javascript 代码中将某些内容声明为私有。所以一些 JS 框架/库尽量不生成任何关于内部方法或属性的公共文档。

感谢提示，我会试着找出来，也许我应该避免使用这种方法..

【参考方案1】：

实际上draw() 和drawHit() 在文档中，但文档记录很差：

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

draw()

绘制图层场景图

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

drawHit()

绘制图层命中图

令人惊讶的是，我在 Kinetic Docs 中找不到第三个也是最后一个 draw 方法：drawScene()。同样令我惊讶的是，这3个函数没有发现是从Kinetic.Stage的父类扩展而来的：Kinetic.Container

无论如何，我认为 这个 SO 问题完美地解释了这些方法的差异：What is the difference between KineticJS draw methods?

当然，使用这些功能是不可避免的，除非您的画布/舞台在整个应用程序期间是静态的，否则您最终将需要使用其中之一。 （*可能有例外，见下文）

回答您的问题：

如何：

在任何Kinetic.Container 上调用.draw()，其中包括：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 上重绘所有内容是一种性能问题。当我们想要更新和渲染舞台时，我们可以通过这种方式以编程方式控制绘制方法的使用。正如您可能想象的那样，如果我们在场景中有 10000 个节点，则必须一直绘制舞台是相当昂贵的。

何时：

drawScene()

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

drawHit()

如果您将事件绑定到形状，则更新命中图，以便任何事件的命中区域都将更新为节点更改。

draw()

当您需要同时执行以上两项操作时。

最后，也许示例/实验室将是这里最有益的学习工具，所以我准备了JSFIDDLE 供您测试差异。按照说明阅读我的 cmets 里面的内容，以更好地了解发生了什么。

*注意：我在上面提到了必须使用绘图方法的一个例外。那是因为每当您向舞台添加图层时，图层中的所有内容都会自动绘制。小提琴底部有一个小例子。

【讨论】：

JSFiddle 实验室已经完成，我正在做一些编辑。使用 draw 方法对每一行进行注释和取消注释，以查看每个函数的差异。 或取消注释每个绘制方法以查看舞台的进度。如果您有任何问题或 cmets，请告诉我。祝你好运！

请更新链接，因为它们不再起作用了，请注意JSFiddle中引用的JS文件...

【参考方案2】：

draw() 方法基本上用于绘制与您调用该方法的容器相关联的所有（可见）元素。 因此它不仅限于Kinetic.Layer，还可以用于Kinetic.Group、Kinetic.Container等...

何时及为何使用： 每当您对画布进行任何更改时，您都会调用相应容器的Draw() 方法。 KineticJS 不会刷新画布，除非您使用 Draw() 明确表示。通常，尝试调用受您的更改影响的最小容器，以利用有效的缓存并仅重绘受影响的部分画布。

举个例子： 您的应用程序中有 2 层。 Layer1 用于静态背景和其他一些不需要每次都重绘的静态项目。 Layer2 包含您的移动元素或活动对象。然后你可以简单地拨打Layer2.draw()

为了增加复杂性，您有一组对象，比如说所有菜单项。当用户按下任何菜单按钮时，最好调用menuGroup.draw()而不是其父层的draw函数。