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

Question

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

这是卡片类(简化)，行和列是原始png文件中要显示的行和列，比率是显示的比例因子：

(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文件(卡片3)的第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;
}());

当我打三次那个班的电话时：

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下面的类现在可以正常工作了：

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