在 createjs 中所有先前加载的实例上覆盖图像

Question

我正在创建一个纸牌游戏，我需要在其中加载纸牌作为单独的显示对象。我已经使用预加载器加载了包含 54 个图块的 PNG 文件。 loader.getResult("deck") 我必须扩展 Shape class 这样我就可以在每张卡片上使用一些自定义属性（颜色、值等）

这里是卡片class（简体），row和col是要显示的原始png文件中的行和列，ratio是显示的比例因子：

(function () {
    let RemiCard = function (container, tileWidth, tileHeight, row, col, ratio, color, order, value) {
        this.initialize(container, tileWidth, tileHeight, row, col, ratio, color, order, value);
    }
    let p = RemiCard.prototype = new createjs.Shape();
    
    p.color = 0;
    p.order = 0;
    p.value = 0;
    p.isClicked = false;
    p.initPosition = -1;
    
    p.initialize = function (container, tileWidth, tileHeight, row, col, ratio, color, order, value) {
        this.color = color;
        this.order = order;
        this.value = value;
        
        let matrix = new createjs.Matrix2D();
        matrix.translate(-col * tileWidth, -row * tileHeight);
        this.graphics.beginBitmapFill(loader.getResult("deck"), "no-repeat", matrix).drawRect(0, 0, tileWidth, tileHeight);
        container.addChild(this);
        this.scaleX = this.scaleY = ratio;
    }
    p.move = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.RemiCard = RemiCard;
}());

这里是创建 class:

的几个新实例的示例

let card1 = new RemiCard(myCardsContainer, 188, 250, 3, 2, 0.8, someColor, someOrder, someValue);
card1.move(0, 0);
let card2 = new RemiCard(myCardsContainer, 188, 250, 5, 1, 0.8, someColor, someOrder, someValue);
card2.move(40, 0);
let card3 = new RemiCard(myCardsContainer, 188, 250, 0, 7, 0.8, someColor, someOrder, someValue);
card3.move(80, 0);

所有事件和属性都适用于每个实例（移动，drag/drop）。这当然是预料之中的。但是，所有卡片都显示最后加载的卡片的（裁剪部分）图像，无论添加的卡片数量如何。这让我发疯，这是一个烦人的问题，我只是想不通为什么。在此示例中，所有卡片都在 PNG 文件 (card3) 的第 0 行第 7 列中显示一个图块。

感谢任何帮助。

编辑：

我已经尝试在没有任何位图的情况下简化 class...但仍然有一个奇怪的问题：

(function () {
    let SimpleBox = function (container, color) {
        this.initialize(container, color);
    }
    SimpleBox.prototype = new createjs.Shape();
    
    SimpleBox.prototype.initialize = function (container, color) {
        container.addChild(this);
        this.graphics.beginFill(color).drawRect(0, 0, 100, 100);
    }
    SimpleBox.prototype.moveMe = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.SimpleBox= SimpleBox;
}());

当我调用 3 次 class:

let card1 = new SimpleBox(stage, "red");
card1.moveMe(500, 0);
let card2 = new SimpleBox(stage, "blue");
card2.moveMe(600, 0);
let card3 = new SimpleBox(stage, "yellow");
card3.moveMe(700, 0);

三个盒子都是黄色的？？？怎么样？

Answer 1

我发现了一个问题。我使用的语法是旧式 createjs 扩展对象的“坏”变体。我不得不切换到新版本的语法。

SampleBox 下面的

Class 现在可以正常工作了：

(function () {
    let SimpleBox = function (container, color) {
        this.Container_constructor();
        this.initialize(container, color);
    }

    let p = createjs.extend(SimpleBox, createjs.Container);
    
    p.initialize = function (container, color) {
        let shape = new createjs.Shape();
        shape.graphics.beginFill(color).drawRect(0, 0, 100, 100);
        this.addChild(shape);
        container.addChild(this);
    }
    p.moveMe = function (x, y) {
        this.x = x;
        this.y = y;
    };
    
    window.SimpleBox = createjs.promote(SimpleBox, "Container");
}());

在 createjs 中所有先前加载的实例上覆盖图像

Overridden image on all previously loaded instances in createjs

javascript

createjs