如何查看本地图像（放在 assets 文件夹中）？答案

【问题标题】：How can see local images (put in assets folder)?如何查看本地图像（放在 assets 文件夹中）？
【发布时间】：2015-01-13 10:29:36
【问题描述】：

我无法在这个 ChessBoard 视图中看到我的资产图片，尽管导航控制台没有显示任何错误：

enyo.kind({
    name: "PositionView",
    published: {
        fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
        cellsize: 32,
        color: "#CCC"
    },
    fit: true,
    components: [
        {
            name: "canvas",
            kind: "enyo.Canvas",
            attributes: {width: 10, height: 10}
        }
    ],
    create: function() {
        this.inherited(arguments);
    },
    rendered:function(){
        this.inherited(arguments);
        this.computeCellSize();
        this.drawGrid();
        this.drawPieces();
        this.$.canvas.update();
    },
    drawGrid: function() {
        for (var line=0; line < 8; line++){
            for (var col=0; col < 8; col++){
                var compName = "abcdefgh"[col] + (8-line);
                var bgcolor = ((line+col)%2 == 0) ? "#CF3" : "#630";
                this.$.canvas.createComponent({
                    kind: "enyo.canvas.Rectangle",
                    bounds:{t:(line*this.cellsize), l:(col*this.cellsize), w:this.cellsize, h:this.cellsize},
                    color:bgcolor,
                    name: compName
                });
            }
        }
    },
    drawPieces: function(){
        var x = 3*this.cellsize;
        var y = 4*this.cellsize;
        this.$.canvas.createComponent({
            kind: "enyo.canvas.Image",
            bounds:{t:y, l:x, w:this.cellsize, h:this.cellsize},
            src: "assets/wn.svg"
        });
    },
    computeCellSize: function(){
        var screenWidth = enyo.dom.getWindowWidth();
        var screenHeight = enyo.dom.getWindowHeight();
        var minSize = screenWidth < screenHeight ? screenWidth : screenHeight;
        this.cellsize = Math.floor(minSize * 1.0 / 8);
        this.$.canvas.setAttribute('width', 8*this.cellsize);
        this.$.canvas.setAttribute('height', 8*this.cellsize);
    }
});

您应该已经注意到，我正在使用方法 drawGrid() 动态地制作网格单元（这很好用），但是方法 drawPieces() 似乎不起作用，因为我看不到图片。

为没有使用 JsFiddle 道歉，这是因为我不知道如何调整我的项目以使其适合它。

【问题讨论】：

标签： enyo

【解决方案1】：

可能是图像标签没有及时加载以进行渲染。您可能想尝试延迟调用以在短时间内更新画布。我修改了之前发布的小提琴并包含了一个 SVG 图像。它不会为我第一次呈现，但是当重新运行时它会呈现，因为它在浏览器缓存中：

http://jsfiddle.net/RoySutton/cxx57780/1

我将上面的代码包装在下面以使其在 jsFiddle 上运行：

enyo.ready(function() {
...
    new enyo.Application({view: "PositionView"});
});

我之前对 SVG 的宽度/高度的想法似乎不正确，因此我已将其从该答案中删除。

【讨论】：

谢谢。我已经用 Kate 编辑器检查了 svg 源代码，作者已经在其中设置了宽度/高度。我应该如何覆盖 enyo.canvas.Image 类以应用边界：更简单的方法是什么？否则，如果可以的话，我可以尝试将所有 svg 源代码内联到源代码中（对于 JSFiddle 来说更容易）：您对此有何看法？
我已经根据更多测试修改了我的答案。
谢谢，我正在考虑使用 preload.js 来延迟画布绘制，但我没有找到如何将它与我的 Enyo 类集成（因为类生命周期管理）。否则，我已经按照 preload.js 官方示例“成功”了。