在加载模板后，如何触发一个动画在画布上立即绘制？ [英] How can I trigger an action to draw on a canvas immediately after the template loaded?

问题描述

我想在模板加载后立即在模板上画一个画布，所以我想我需要一个合适的钩子（事件）来做，但是找不到一个。

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.

我阅读了如何在ember中加载模板时，如何触发操作？我试图使用setupController事件来执行它，但是没有起作用。

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);
  }

在Ember.route类中有beforeModel方法和afterModel方法，所以我预计会有类似于 afterTempalteLoad 方法之类的东西。

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!

推荐答案

我将创建一个组件（通过使用 ember g组件画布组件在终端中），组件中使用didInsertElement钩子。

I would create a component (by using ember g component canvas-component in the terminal) and in the component use the didInsertElement hook.

所以在canvas组件（或任何您选择称之为）

So in canvas-component (or whatever you choose to call it)

didInsertElement() {
   this._super(...arguments);

   const canvas = this.$();
   console.log(canvas:" + canvas); 
}

绝对推荐阅读有关组件的ember文档

这篇关于在加载模板后，如何触发一个动画在画布上立即绘制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！