EaselJS：扩展 Container 类时的奇怪行为

Question

我正在尝试扩展 Container 类，但我遇到了一些奇怪的行为（至少对我来说很奇怪）。我以与 createjs 中相同的方式创建了 Item “类”。我在调用 setValue 时添加了一个形状对象。这是 Item 类：

this.test = this.test||{};

(function() {
    "use strict";

var Item = function() {
  this.initialize();
};

var p = Item.prototype = new createjs.Container();


        p.initialize = function() {

        };


        p.setValue = function(color){

            if (this.hasOwnProperty("bg"))
                this.removeChild(this.bg);
            this.bg = new createjs.Shape();
            this.bg.graphics.beginFill(color).drawRoundRect(-50/2,-50/2,50,50,4);
            this.addChildAt(this.bg);

        };

        p.getValue = function(){
            return this.value;
        };

test.Item = Item;
}());

现在我在 html 中执行以下操作。我创建了 2 个对象，我希望每个对象都创建一个不同颜色的子项。结果是每个项目实例包含 2 个形状，并且两个项目对象看起来相同。当我改变第二个对象的“bg”形状的位置时，它也改变了第一个项目对象。

function init() 
{
    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick", stage);

        var item1 = new test.Item();
        stage.addChild(item1);
        item1.setValue("#555555");
        item1.x = 50;
        item1.y = 50;

        var item2 = new test.Item();
        stage.addChild(item2);
        item2.setValue("#999999");
        item2.x = 300;
        item2.y = 50;

        item2.bg.x += 10;
        item2.bg.y += 10;

        stage.update();


}

我附上了截图。我正在使用最新的 createjs 版本。我要扩展的 Container 类是 here。

Answer 1

这是一种非常奇怪的扩展类的方式，真的。我在 createjs 中扩展东西时遇到了同样的问题。另外我什至不建议您使用createjs.extend 方法。 这是一种更好的扩展方法（我与 createjs 一起使用的方法），希望对您有所帮助：

// class inheritance helper
// may be called before or after you define the childclass' prototype
var _extends = function(ChildClass, ParentClass)
{
    var f = function() { };
    f.prototype = ParentClass.prototype;

    // copy child prototype methods in case there are some defined already
    for(var m in ChildClass.prototype)
    {
        f.prototype[m] = ChildClass.prototype[m];
    }

    ChildClass.prototype = new f();
    ChildClass.prototype.constructor = ChildClass;
    ChildClass.prototype._super = ParentClass.prototype;        
};

这是扩展 createjs 的方法

var MyContainer = function()
{
    // don't forget to call the '_super' methods, otherwise you'd overwrite them
    this._super.constructor.call(this);
    // do smth with it later on
    this.bg = new createjs.Shape();
}
// ... you can extend now or later on, after you are done with your class
MyContainer.prototype.createBg = function(color)
{
    this.bg.graphics.beginFill(color).drawRoundRect(-50/2,-50/2,50,50,4);
    this.addChild(bg);
}
// now extend 'Container'
_extends(MyContainer, createjs.Container);

Answer 2

p.initialize = function() { this.Container_initialize(); // needs to be called };

应该理顺你看到的行为。

希望对您有所帮助...