位图仅在刷新后渲染或根本不渲染

Question

我使用 createjs 实现了一个由单元格组成的网格：

function Cell(identifier,color,gridPositionVector,canvasPositionVector,width)
{
    this.identifier = identifier;
    this.color = color;
    this.gridPositionVector = gridPositionVector;
    this.canvasPositionVector = canvasPositionVector;
    this.width = width;

    var square = new createjs.Shape();
    square.graphics.beginFill(color).drawRect(0, 0, width, width);
    square.x = this.canvasPositionVector.X();
    square.y = this.canvasPositionVector.Y();
    square.name = "square";
    stage.addChild(square);
    stage.update();

}

Cell.prototype.GetGridPositionVector = function () { return this.gridPositionVector; };

function Vector2(x,y)
{
    this.x = x;
    this.y = y;
}

Vector2.prototype.X = function () { return this.x; };
Vector2.prototype.Y = function () { return this.y; };

function Grid()
{
    this.cellArray = [];
    this.gridArray = [   ['o', 'o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x'],
                         ['x', 'o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'o', 'x', 'o', 'o', 'o', 'o', 'x', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'x', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'x', 'x', 'o', 'o', 'o', 'o'],
                         ['x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x']];

    for (var i = 0; i < this.gridArray.length; i++) {
        var row = this.gridArray[i];
        for (var j = 0; j < row.length; j++) {
            switch (row[j]) {
                case 'o':
                    var cell = new Cell('o', 'green', new Vector2(i, j), new Vector2(j * cellWidth, i * cellWidth), cellWidth); 
                    this.cellArray.push(cell);
                    break;
                case 'x':
                    var cell = new Cell('o', 'blue', new Vector2(i, j), new Vector2(j * cellWidth, i * cellWidth), cellWidth); 
                    this.cellArray.push(cell);
                default:

            }
        }
    }
}

Grid.prototype.GetGridArray = function () {
    return this.gridArray;
}

我还实现了一个显示图像的 Creep.js：

function Creep(id, gridPositionVector, texture)
{
    this.id = id;
    this.texture = texture;

    this.texture.x = gridPositionVector.X() * 50;
    this.texture.y = gridPositionVector.Y() * 50;

    stage.addChild(this.texture);
    stage.update();
    console.log('creep created and added.');
}

在我的初始化函数（称为 onLoad）中，我调用了显示网格和 creep 所需的一切。

var stage;

var cellWidth = 50;

function init()
{
    stage = new createjs.Stage("DisplayCanvas");
    // to get onMouseOver & onMouseOut events, we need to enable them on the stage:
    stage.enableMouseOver();

    var cellGrid = new Grid();

    var creepTex = new createjs.Bitmap("creep.png");
    console.log(creepTex.id);

    var creep = new Creep('creep1', new Vector2(9, 9), creepTex);
}

到目前为止，一切都已按预期显示。然后我在我的 TFS 项目中检查了该项目。我在另一台机器上下载最新版本后出现以下问题：

不再显示 creep 图像。
我试过调试和记录，一切似乎都正常。
我也试过用http://localhost:59271/creep.png直接调用图片。图像已找到并显示在浏览器中。
如果我运行在 Firefox 中的项目图像不显示。只有当我刷新页面时，它才会突然出现。这仅适用于 Firefox。在IE10和Chrome下刷新或清缓存也不显示

这对我来说是个谜，因为在我的另一台开发机器上一切正常，蠕变图像显示正常。

Answer 1

如果您使用字符串路径添加图像，则必须在后台创建并加载图像。即使缓存在浏览器中，也不会立即可用。您可以通过以下方式解决此问题：

监听图像加载，并更新舞台
不断更新舞台（一旦准备好就会出现）
使用 PreloadJS 之类的方式预加载您的内容，并将图像 reference 传递给位图。

这是最简单的方法：

var img = new Image();
img.onload = function() {
    stage.update();
}
img.src = "creep.png";
var creepTex = new createjs.Bitmap(img);

希望这是有道理的。

位图仅在刷新后渲染或根本不渲染

Bitmap rendered only after refresh or not rendered at all

javascript

bitmap

easeljs