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.');
}

在我的init函数（称为onLoad）中，我调用了显示网格和蠕变所需的所有内容。

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项目中检查了项目。在另一台计算机上下载最新版本后，会出现以下问题：

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

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

Answer 1

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

收听图片上的负载并更新舞台
不断更新舞台（一旦准备就会显示）
使用PreloadJS之类的内容预加载您的内容，并将图像引用传递给位图。

这是最简单的方法：

{{1}}

希望这是有道理的。

仅在刷新后呈现的位图或根本不呈现的位图

1 个答案: