0

我仍在学习 JS，我一直在尝试使用 KineticJS 制作应用程序，但以面向对象的方式保持它。

所以我有类似的东西：

/*   ClassA Constructor   */
    var ClassA=function(id, x, y, name, layer){
        this.id=id;
        this.x=x;
        this.y=y;
        this.name=name;
        this.layer=layer;

        this.object_group=new Kinetic.Group({
            x: x,
            y: y,
            id: id,
            draggable: true,
            name: "A_object_group"
        });

        var object_polygon=new Kinetic.Polygon({
            points: [0,0,1,1],
            fill: '#ffffff',
            stroke: 'black',
            strokeWidth: 1,
            opacity: 0.5,
            name: "A_object_polygon"
        });

        this.object_group.methodA=function(){
            //Method A goes here
        };

        this.object_group.add(object_polygon);
        this.layer.add(this.object_group);

    return(this.object_group);
}

然后我将使用 KineticJS 方法 toJSON() 将舞台转换为 JSON，然后使用 Kinetic.Node.create() 方法从 JSON 再次加载它。

一切正常，问题是加载对象后他们将无法识别“ClassA”类中定义的“MethodA”。

我不确定这是否是最好的方法，也许我应该将整个对象序列化为 JSON 而不仅仅是 Kinetic.Group 部分。此外，序列化方法似乎也不是一种有效的方法，所以问题是：如何从 JSON 加载 KineticJS 对象并使它们仍然属于一个类并允许访问该类的方法？

4

2 回答 2

0

您可以通过以下方式进行操作：

  1. 向组添加一个属性，将其标识为 classA 的成员，假设this.object_group.setAttribute('class','ClassA') 此属性保存在 JSON 字符串中。
  2. 从 JSON 创建节点时，一旦阶段设置完毕，在图层中搜索属性“class”设置为“ClassA”的所有对象，并将函数重新分配给这些对象。

如果您不必过于频繁地重新创建对象，则该方法可以正常工作。

或者：您可以为所有此类对象分配相同的名称objClassA，然后使用layer.get(".objClassA") （请参阅此处的文档）返回具有给定名称的对象集合，然后遍历它们以添加回函数

于 2013-07-18T12:52:20.327 回答
0

为了解决这个问题，我不得不改变定义methodA的方式。代替：

this.object_group.methodA=function(){
    //Method A goes here
};

我曾经prototype在类构造函数之外定义methodA

/*   ClassA Constructor   */
var ClassA=function(id, x, y, name, layer){
    this.id=id;
    this.x=x;
    this.y=y;
    this.name=name;
    this.layer=layer;

    this.object_group=new Kinetic.Group({
        x: x,
        y: y,
        id: id,
        draggable: true,
        name: "A_object_group"
    });

    var object_polygon=new Kinetic.Polygon({
        points: [0,0,1,1],
        fill: '#ffffff',
        stroke: 'black',
        strokeWidth: 1,
        opacity: 0.5,
        name: "A_object_polygon"
    });

    this.object_group.methodA=ClassA.prototype.methodA;

    this.object_group.add(object_polygon);
    this.layer.add(this.object_group);

return(this.object_group);
},

ClassA.prototype={
    methodA: function(){
        //Method A goes here
    }
};

最后，当我加载 KineticJS JSON 时，我只需要以这种方式重新分配 methodA：

stage.destroy();
stage=Kinetic.Node.create(kineticjs_json, canvas_container);
if(stage.get(".A_object_group")[0]){
    stage.get(".A_object_group")[0].methodA=ClassA.prototype.methodA;
}
于 2013-07-23T08:56:15.070 回答