Question

如何将画布脚本分成帮助器？目前它只有在写入模板本身时才有效。我想这是微不足道的 - 但我找不到怎么做。谢谢！（scaledSprite也是帮助者）

<template name="spriteBox">
    <script>
        var myImage = new Image();
        myImage.src="{{ spirte.url store='OriginalPix' }}";

        myImage.onload = function() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "{{ sprite.metadata.backColor }}";
            ctx.fillRect(0, 0, {{ scaledSprite.widthDevice }}, {{ scaledSprite.heightDevice }});
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(myImage, 0, 0, {{ scaledSprite.widthDevice }}, {{ scaledSprite.heightDevice }});
        }
    </script>
    <canvas id="myCanvas" width="{{ scaledSprite.widthDevice }}" height="{{ scaledSprite.heightDevice }}" style="width:{{ scaledSprite.width }}px; height: {{ scaledSprite.height }}px;">
        This browser does not support HTML5 canvas
    </canvas>
</template>

这不工作： 尝试分离脚本并将其移至spriteBox.js：

Template.spriteBox.rendered = function () {
    var myImage = new Image();
    myImage.src= this.sprite.url;
        // > Exception from Tracker afterFlush function: Cannot read property 'url' of undefined
        // > TypeError: Cannot read property 'url' of undefined

    myImage.onload = function() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = this.sprite.metadata.backColor;
        ctx.fillRect(0, 0, scaledSprite.widthDevice, scaledSprite.heightDevice);
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(myImage, 0, 0, scaledSprite.widthDevice, scaledSprite.heightDevice);
    }
};

HTML

<template name="spriteBox">
    <canvas id="myCanvas" width="{{ scaledSprite.widthDevice }}" height="{{ scaledSprite.heightDevice }}" style="width:{{ scaledSprite.width }}px; height: {{ scaledSprite.height }}px;">
        This browser does not support HTML5 canvas
    </canvas>
</template>

铁路由器

Router.route('/spriteBox/:_id/:boxsize', {
    name: 'spriteBox',
    template: 'spriteBox',
    waitOn: function() {
        return [
            subs.subscribe('aPix', this.params._id)
        ];
    },
    data: function() {
        var spriteDocument = MyPix.findOne({_id: this.params._id});
        templateData = {
            sprite: spriteDocument,
        }
        return templateData;
    }
});

Answer 1

您的渲染功能有一个明显的问题是您无法在javascript代码中使用{{...}}。那只是模板。您需要直接调用实际函数。

Answer 2

根据您的新代码，您有一个新错误：

myImage.src= this.sprite.url;

应该是

myImage.src= this.data.sprite.url;

如何在模板中组织canvas脚本

2 个答案: