如何在模板加载后立即触发动作在画布上绘制? [英] How can I trigger an action to draw on a canvas immediately after the template loaded?
问题描述
我想在模板加载后立即在一个模板上画画,所以我想我需要一个合适的钩子(事件)来做,但我找不到一个。
我阅读了当模板加载到ember中时,如何触发动作?,我试图使用setupController事件来做,但是没有工作。
template.hbs
< canvas id =lyric-editor width =200height =200/>
route.js
import Ember from'ember';
export default Ember.Route.extend({
setupController:function(){
var canvas = document.getElementById('lyric-editor');
console.log :+ canvas);
//结果为null,表示此时没有加载模板
var ctx = canvas.getContext('2d');
ctx。 fillStyle ='white'; //颜色条形图
ctx.fillRect(50,50,40,40);
}
在Ember.route类中有beforeModel方法和afterModel方法,所以我预期像 afterTempalteLoad 方法。
$
我会创建一个组件(通过使用 ember g组件画布组件在终端
)和组件中使用didInsertElement钩子。
因此在canvas组件(或任何您选择调用它)
didInsertElement(){
this._super ;
const canvas = this。$();
console.log(canvas:+ canvas);
}
绝对建议阅读关于组件的ember文档
I want to draw on a canvas in a template immediately after the template loaded, so I think I need a suitable hook (event) to do it but I could not find one.
I read the answer for How can I trigger an action, when a template is loaded in ember? and I tried to use "setupController" event to do it but it did not work.
template.hbs
<canvas id="lyric-editor" width="200" height="200"/>
route.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function() {
var canvas = document.getElementById('lyric-editor');
console.log(canvas:" + canvas);
// the result is null, it means the template is not loaded at this time.
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white'; // Color of the bars
ctx.fillRect(50, 50, 40, 40);
}
There are beforeModel method and afterModel method in the Ember.route class so I expected something like afterTempalteLoad method.
Any hints are appreciated, Thanks in advance!
I would create a component (by using ember g component canvas-component in the terminal
) and in the component use the didInsertElement hook.
So in canvas-component (or whatever you choose to call it)
didInsertElement() {
this._super(...arguments);
const canvas = this.$();
console.log(canvas:" + canvas);
}
I definitely recommend reading through the ember docs about components
这篇关于如何在模板加载后立即触发动作在画布上绘制?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!