Размер холста с помощью Flexbox и Enyo

Question

У меня возникла проблема с изменением размера системы координат холста при использовании Flexbox и Enyo. См. Пример: http://jsfiddle.net/g7MLS/1989/

Когда вы впервые запускаете его, все в порядке. Уменьшите ширину поля, а строка текста останется 1 строка, пока холст не достигнет минимальной ширины, затем текст начнет обертываться.

Чтобы увидеть проблему, раскомментируйте строки:

C.WIDTH = b.width;
c.height = b.height;

Теперь Flexbox использует внутреннюю координатную ширину, чтобы расположить вещи ... или что-то еще. Теперь текст начнет обертывание до того, как холст сжимается до минимальной ширины.

Я не могу дублировать точную установку без Эньо, но это близко и, кажется, не делать то же самое: 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.

Если вы хотите, чтобы внутренние координаты холста были скорректированы с помощью гибкого макета, вам придется обрабатывать размеры, как показано на вашей скрипке. В Enyo вы можете добавить метод handleResize в MySample, чтобы обновить свойства canvas.

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", 
    }] 
    }], 

});