如何在模板加载后立即触发动作在画布上绘制？ [英] 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屋！