Question

我还在学习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方法将JSON（）转换为JSON，然后使用Kinetic.Node.create（）方法从JSON再次加载它。

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

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

Answer 1

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

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

如果您不必经常重新创建对象，该方法可以正常工作。

或者：您可以为所有此类对象指定相同名称objClassA，然后使用layer.get(".objClassA") (see doc here)返回具有给定名称的对象集合，然后迭代它们以添加支持功能

Answer 2

要解决这个问题，我必须改变我定义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时，我只需要以这种方式重新分配方法：

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;
}

kineticjs对象toJSON并再次返回对象

2 个答案: