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

【问题标题】：Overridden image on all previously loaded instances in createjs在 createjs 中所有先前加载的实例上覆盖的图像
【发布时间】：2021-05-10 21:55:20
【问题描述】：

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

这里是card类（简化），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;
}());

这里是创建一个类的几个新实例的示例：

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

所有事件和属性都适用于每个实例（移动、拖放）。这当然是意料之中的。但是，所有卡片都显示上次加载卡片的（裁剪部分）图像，无论添加的卡片数量如何。这让我发疯，这是一个令人讨厌的问题，我无法弄清楚为什么。在此示例中，所有卡片都在 PNG 文件 (card3) 的第 0 行第 7 列中显示一个图块。

感谢任何帮助。

编辑：

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

(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 次时：

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

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

【问题讨论】：

标签： javascript createjs

【解决方案1】：

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

SampleBox 下面的类现在可以正常工作了：

(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");
}());

【讨论】：