EaselJS对象检查器 [英] EaselJS object inspector

问题描述

我是转换现有的代码库从使用Flash到使用CreateJS ，但我需要一种方法来停止阶段更新，并检查 EaselJS GUI元素
用于调试。

I am converting an existing code base from using Flash to using CreateJS but I am in need of a way to stop the Stage update and inspect the EaselJS GUI elements for debugging.

我的调试器需求列表是

• 必须可以停止将CreateJS记号传播到GUI的非调试部分，以便这些部分在检查期间不会更改。


• 在检查模式下，必须可以看到GUI的非调试部分的层次树。


• 在检查模式下，当选择层次树中的元素时，那么相应的可见画布图形必须改变外观以清楚地将其与画布上的其他图形区分开，并且使其边界清晰可见。


• 在检查模式下，


• 在检查模式下，当在画布上选择一个点时，必须在画布上显示以下属性相应的元素：coordinate&

• It must be possible to stop the propagation of CreateJS ticks to the non-debug parts of the GUI so that these parts do not change during inspection.
• In inspection mode, it must be possible to see the hierarchy tree of the non-debug parts of the GUI.
• In inspection mode, when an element in the hierarchy tree is selected, then the corresponding visible canvas graphics must change appearance to clearly distinguish it from the other graphics on the canvas, and so that its boundaries are clearly visible.
• In inspection mode, when a point is selected on the canvas, then the corresponding element must be visible and highlighted in the hierarchy tree.
• In inspection mode, when a point is selected on the canvas, then the following properties must be displayed for the corresponding element: coordinates & size.

要达到上述目的，我至少需要实现这些部分。

To achieve the above, I need to implement at least these parts.

• 阶段遍历和数据提取。


• 提取数据的树表示。


• 对象。


• 控制阶段滴答。

• Stage traversal and data extraction.
• Tree presentation of the data extracted.
• Highlight of specific stage objects.
• Control of the Stage ticking.

这样的检查工具？

推荐答案

EaselJS-Inspector 是一个例子，如何解决上面的一切，除了我使用固定大小的所有DisplayObjects。

The EaselJS-Inspector is an example of how to solve everything above, except that I use a fixed size for all DisplayObjects.

问题是形状没有大小，除非手动设置

这篇关于EaselJS对象检查器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！