javascript - 在 kineticjs 中导出阶段的最佳方法

Question

我正在寻找将动力学阶段导出到 json 的最佳方法。是否有导出具有事件和自定义属性的对象的解决方案？

Answer 1

正如您所发现的，object.toJSON 不会序列化您的事件处理程序。

所以你必须:

• 使用toJSON序列化大部分对象，以及

• 将您的 KineticJS 事件处理程序放在一个单独的 .js 文件中，然后

• 在反序列化对象后重新连接它们。

这是一个几乎自动重新连接事件的示例:

第 1 步:使用在对象中定义的事件处理程序创建一个单独的 kEvents.js 文件:

// the eventHandlers object contains all the event handling functions
// for the serialized object(s).

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

第 2 步:向您的 Kinetic 节点添加一些属性，指示要重新连接的处理程序:

// this circle will be rewired with the click handler named "myClickHandler1"

var circle1 = new Kinetic.Circle({
    x:100,
    y:100,
    radius: 30,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,

    // Below: 
    // "clickEvent" attribute indicates this node needs their click event rewired
    // "myClickHandler1" is the name of the handler function that will be rewired

    clickEvent:"myClickHandler1"
});

第 3 步:导入 kEvents.js 文件

<script src="http://yourSite.com/kEvents.js"></script>

步骤#4:运行一个函数，将 eventHandlers 中的处理程序附加到对象:

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

}