问题
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.
My list of requirements for the debugger is
- 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.
Are there libraries that can help me create such an inspector tool?
回答1:
The EaselJS-Inspector is an example of how to solve everything above, except that I use a fixed size for all DisplayObjects.
The problem is that Shapes do not have a size unless one manually sets it.
来源：https://stackoverflow.com/questions/25177650/easeljs-object-inspector