Question

虽然导航控制台没有向我显示任何错误，但我无法在此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道歉，这是因为我不知道如何调整我的项目以使其适合它。

Answer 1

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

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

我将上面的代码包装在下面的代码中，以便在jsFiddle上进行：

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

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

如何查看本地图像（放入资源文件夹）？

1 个答案: