Kinetic.js负载问题

Question

I'm trying to load a saved stage from a database and when I load it, it looks fine, but after loading it I cannot draw on the stage. I'm aware that I might not be able to use the loaded objects like I could before saving, but how can I draw onto the stage after loading?

I am using Kinetic.Node.create(json, 'container'); but afterwards I can no longer add to the stage with layer.draw(); .

Does anyone have any suggestions? And what is a good way to re-bind event handlers. Are there any good tutorials? Thank you!

EDIT:

Here is my code for creating and editing the canvas.

var stage = new Kinetic.Stage({
        container: 'container',
        width:screen.width*.98,
        height: screen.height*.70,
        id:'stage',
        name: 'stage'
      });

      var layer = new Kinetic.Layer();
      layer.on('mousedown',function(e){ 
      var node = e.targetNode;
      //select(node);
      });

//load
var json= load();
stage = Kinetic.Node.create(json, 'container');

Answer 1

Q1: Re-instantiating a Kinetic.Stage.

Your Kinetic.Node.create command is the correct command to re-instantiate a stage. Further diagnosis was not possible since you provided no code.

var stage = Kinetic.Node.create(yourJSON, 'container');
stage.draw();

Q2: Re-binding event handlers.

One good way of rewiring event handlers is to provide a .js file along with your .json file.

For example:

When creating your nodes/containers, add properties to indicate which event handler(s) need to be rewired:

var circle1 = new Kinetic.Circle({
    x:100,
    y:100,
    radius: 30,
    fill: 'red',

    // this circle should be rewired with myClickHandler1
    clickEvent:"myClickHandler1"

});

Put all your event handlers in a .js file that's provided along with your .json file:

var eventHandlers={
    myClickHandler1:function(e){alert("Fired clickHandler1");},
}

And then you can rewire the event handlers from the .js file like this:

function rewireHandlers(node){

    var handler;

    // rewire click handler
    handler=node.getAttr("clickEvent");
    if(handler && eventHandlers[handler]){
        node.on("click",eventHandlers[handler])
    }

    // rewire other event handlers the same way
}

// rewire all nodes and containers

stage.getChildren().each(function(node){
   node.rewireHandlers(node);
});    

Answer 2

首先在你的json字符串中你需要将所有“className”：“Kinetic.Group”替换为“className”：“Group”然后尝试