0
如何將畫布腳本分隔成助手？目前它只有在它直接寫入模板本身時纔有效。我想這是微不足道的 - 但我找不到如何去做。謝謝！ （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;
}
});
當您使用渲染代碼，會發生什麼？ – tarmes 2015-02-09 14:52:56