Search code examples
javascriptkineticjs

Kineticjs class hierarchy clarification

After reviewing the Kineticjs docs I have come up with the following

  • Kinetic.Node - Nodes are entities that can be transformed, layered, and have bound events.
  • Kinetic.Shape (Node) - Shapes are primitive objects such as rectangles, circles, text, lines, etc.

  • Kinetic.Container (Node) - Containers are used to contain nodes or other containers

  • Kinetic.Stage (Container(Node)) - A stage is used to contain multiple layers add(Layer)

  • Kinetic.Layer (Container(Node)) - Layers are tied to their own canvas element and are used to contain groups or shapes add(Node)
  • Kinetic.Group (Container(Node)) - Groups are used to contain shapes or other groups. add(Node)
  • Kinetic.BaseLayer (Container(Node)) - ???

  • Kinetic.FastLayer (Container(Node)) - is used for layers that don't need user interaction (update thanks markE)

  • Kinetic.Collection (Array) - This class is used in conjunction with Kinetic.Container#get

What are BaseLayer and 'FastLayer' used for exactly? In the documentation FastLayer has the exact same description as Layer and BaseLayer just says that it is a constructor.

in one of the commit comments it is inferred that FastLayer does not have to remove a hit canvas ... I am guessing this is because it does not have one thus making it faster?

Some clarification on what these two classes do, and how to effectively use them would be appreciated.

EDIT: Updated Question to reflect markE's input, anyone have insight on BaseLayer?

Solution

  • Note: as of this post the fast layer was introduced only several days ago. But as I understand...

    The new fast layer is the old layer but with eventing turned off.

    The KineticJS docs say:

    If you don't need node nesting, mouse and touch interactions, or event pub/sub, you should use FastLayer instead of Layer to create your layers. It renders about 2x faster than normal layers.

    The fast layer is used for layers that don't need user interaction:

    • a static background layer with no user interaction required.
    • a static layer that is manipulated and drawn entirely thru JS code with no user interaction required.

    Drawing fast layers is faster because there is no overhead related to eventing.

    Normal layers also have a supporting offscreen canvas which supports hit-testing and dragging.

    I suspect the fast layer does not have this overhead either since hit-testing and dragging is related to eventing.

    Having said this...I need to investigate this new tool more myself. ;-)