畫布使用Flexbox和Enyo調整大小

Question

使用Flexbox和Enyo時，我在調整畫布座標系的大小時遇到​​問題。看例子：http://jsfiddle.net/g7MLS/1989/

當你第一次運行它，一切都很好。收縮盒子的寬度，文本行保持1行，直到畫布達到最小寬度，然後文本開始換行。

要查看問題，取消註釋行：

c.width = b.width;
c.height = b.height;

Flexbox似乎現在正在使用內部座標寬度來排列事物...或其他東西。文本現在將開始在畫布縮小爲最小寬度之前進行包裝。

我不能重複不Enyo確切的設置，但是這是接近，似乎並沒有做同樣的事情：https://jsfiddle.net/ez6b2q8v/103/

我的理解是，設置畫布寬度/高度應該隻影響內部座標，而不是畫布本身的大小。我錯過了什麼？

var ready = require('enyo/ready'), 
 
    kind = require('enyo/kind'), 
 
    Toolbar = require('onyx/Toolbar'), 
 
    Application = require('enyo/Application'), 
 
    Button = require('enyo/Button'); 
 

 

 
ready(function() { 
 
    var MySample = kind({ 
 
    name: "MySample", 
 
    rendered: function() { 
 
     this.inherited(arguments); 
 
     c = this.$.myCanvas.hasNode(); 
 
     b = this.$.myCanvas.getBounds() 
 
     //c.width = b.width; 
 
     //c.height = b.height; 
 
     console.log(c.width); 
 
    }, 
 
    buttonTapped: function(inSender, inEvent) { 
 
     this.render(); 
 
     return true; 
 
    }, 
 

 
    components: [{ 
 
     classes: "main", 
 
     components: [{ 
 
     classes: "content", 
 
     components: [{ 
 
      classes: "canvas", 
 
      tag: "canvas", 
 
      name: "myCanvas" 
 
     }, { 
 
      classes: "label", 
 
      content: "This text should be on 1 line, but wrap when canvas == min-width" 
 
     }] 
 
     }, { 
 
     kind: Button, 
 
     ontap: "buttonTapped", 
 
     content: "Render", 
 
     }] 
 
    }], 
 

 
    }); 
 

 
    app = new Application({ 
 
    view: MySample 
 
    }); 
 
});

.main { 
 
    position: relative; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
    background: red; 
 
} 
 

 
.content { 
 
    order: 0; 
 
    display: flex; 
 
    background: yellow; 
 
    flex: 1 1 auto; 
 
} 
 

 
.canvas { 
 
    padding: 4px; 
 
    margin: auto; 
 
    min-width: 100px; 
 
    flex: 1 1 auto; 
 
    height: 40px; 
 
    background: blue; 
 
    box-sizing: border-box; 
 
} 
 

 
.label{ 
 
    flex: 0 1 auto; 
 
}

Answer 1

在沒有CSS尺寸，所述height和畫布的width也將被用作尺寸。如果您指定與屬性不同的CSS尺寸，畫布將會變形以修復指定的尺寸。見Canvas width and height in HTML5。

如果您希望用flex佈局調整畫布內部座標，則必須按照您在小提琴中演示的方式處理調整大小。在Enyo中，您可以將一個handleResize方法添加到MySample以更新畫布的屬性。

kind({ 
    name: "MySample", 
    rendered: function() { 
    this.inherited(arguments); 
    this.setupCanvas(); 
    }, 
    handleResize: function() { 
    this.inherited(arguments); 
    this.setupCanvas(); 
    }, 
    setupCanvas: function() { 
    var c = this.$.myCanvas.hasNode(); 
    var b = this.$.myCanvas.getBounds() 
    c.width = b.width; 
    c.height = b.height; 
    }, 
    buttonTapped: function(inSender, inEvent) { 
    this.render(); 
    return true; 
    }, 

    components: [{ 
    classes: "main", 
    components: [{ 
     classes: "content", 
     components: [{ 
     classes: "canvas", 
     tag: "canvas", 
     name: "myCanvas" 
     }, { 
     classes: "label", 
     content: "This text should be on 1 line, but wrap when canvas == min-width" 
     }] 
    }, { 
     kind: Button, 
     ontap: "buttonTapped", 
     content: "Render", 
    }] 
    }], 

});