Search code examples
javascriptcanvaskineticjs

Save a Kinetic.Layer and its children to load the saved page

I'm working on an application of drag and drop from layer1 to layer2 using KineticJS library. Right now, I need to know how to save the layer2 (the drop target) and its children which are the images and shapes drawn on it. I'll have to save the position and width and height.

There are two buttons: save and load. The purpose is to load the layer once it's been saved. What KineticJs method should I use? Is there specific functions to do this?

Solution

  • You can use layer.toJSON() for this and save the layer as string in the database.

    Check out: http://www.zeali.net/mirrors/html5canvastutorials/kineticjs/html5-canvas-save-stage-as-json-string-with-kineticjs/index.html

    To create node again, use Kinetic.Node.create()

    See also: http://www.zeali.net/mirrors/html5canvastutorials/kineticjs/html5-canvas-load-stage-with-json-string-with-kineticjs/index.html