Javascript 如何在emberjs中获得css宽度afterRender

我试图用emberjs实例化一个画布组件。我正在使用EaselJS在上面绘制一些文本。然而，看起来CSS是在绘制文本后应用的，当应用宽度/高度100%时，文本会被拉伸

我希望我的画布填充它的父画布，我不知道它会有多大，直到运行时，这就是为什么高度和宽度都是100%

我试着使用Em.run.next，就像这里说的：但它没有改变任何事情。应用CSS后是否还有其他事件触发？ 我需要根据画布的宽度和高度进行一些初始化

.easelCanvas {
  height: 100%;
  width: 100%;
  background-color: white;
}

以下是我的EmberJS组件：

export default Ember.Component.extend({
     tagName: 'canvas',
     classNames: ['easelCanvas'],
     canvasModel: null,
     didInsertElement: function() {
         this._super();
         Ember.run.scheduleOnce('afterRender', this, function() {
             console.log(this.$().css('width'));
             var stage = new createjs.Stage(this.element);
             var someText = new createjs.Text("HELLO WORLD!", "40px Arial", "#ff7700");
             stage.addChild(someText);
             stage.update();
        });
     }
});

---

编辑：似乎需要使用画布的宽度和高度属性来设置它。样式宽度和高度定义了要放置该样式的框。因此，通过使用属性绑定，我可以设置宽度和高度（以像素为单位），它可以正常工作。但是，我不知道如何将其设置为百分比，因为如果我这样做，它将显示为一个小盒子。

这与EmberJS没有任何关系。我只需要在render上更新画布的宽度和高度属性，以便它们与css拉伸画布的量相匹配。我最终不得不使用

Ember.run.next

。这是我的最后一部分：

export default Ember.Component.extend({
  tagName: 'canvas',
  classNames: ['easelCanvas'],
  canvasModel: null,
  didInsertElement: function() {
      this._super();
      Ember.run.next(this, function() {
      this.element.width  = this.element.offsetWidth; //set actual width of canvas to match css
      this.element.height = this.element.offsetHeight; //set actual height of canvas to match css
      var stage = new createjs.Stage(this.element);
      var someText = new createjs.Text("HELLO WORLD!", "40px Arial", "#ff7700");
      stage.addChild(someText);
      stage.update();

    });

---

你可以试试

didRender

在

didInsertElement

之后运行（它也会在后续重新渲染时运行）。这仍然会导致文本被拉伸。您可能会作弊，使用afterRender事件，然后在窗口中抛出调整大小的代码。将Timeout设置为0，这将有效地将代码抛出队列末尾并“应该”在浏览器完成重新绘制后运行它。