如何在emberjs中获取css宽度afterRender答案

【问题标题】：How to get css width afterRender in emberjs如何在emberjs中获取css宽度afterRender
【发布时间】：2015-07-30 06:31:16
【问题描述】：

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

我希望我的画布能够填充其父级，但直到运行时我才知道它会有多大，这就是为什么高度和宽度为 100%。

我尝试像这里所说的那样使用 Em.run.next：Ember.js - afterRender fires before CSS is finished 但它没有改变任何东西。应用 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();
        });
     }
});

编辑：看来你需要使用画布的宽度和高度属性来设置它。样式宽度和高度定义了将其放置在Canvas is stretched when using CSS but normal with "width" / "height" properties 中的框。因此，通过使用属性绑定，我可以以像素为单位设置宽度和高度，并且它可以工作。但是我不确定如何将其设置为百分比，因为如果这样做，它会显示为一个小框。

【问题讨论】：

你可以试试didRender。 didRender 在didInsertElement 之后运行（它也在随后的重新渲染中运行）。
这仍然会导致文本被拉伸
您可以作弊，使用 afterRender 事件，然后在 window.setTimeout 为 0 中抛出调整大小的代码，这将有效地将您的代码扔到队列的末尾并“应该”在浏览器已完成重绘。

标签： javascript css ember.js

【解决方案1】：

这与 EmberJS 完全没有关系。我只需要在渲染时更新画布宽度和高度属性，因此它们与 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();

    });

【讨论】：