Question

我试图用emberjs实例化一个canvas组件。我正在使用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中的框。因此，通过使用属性绑定，我可以设置像素的宽度和高度，它的工作原理。但是我不确定如何将其设置为百分比，因为如果我这样做，它看起来像一个小盒子。

Answer 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();

    });

如何在emberjs中获取css width afterRender

1 个答案: