Canvas 使用 Flexbox 和 Enyo 调整大小

Question

我在使用 Flexbox 和 Enyo 时调整 canvas 坐标系的大小时遇到问题。请参阅示例：http://jsfiddle.net/g7MLS/1989/

当你第一次运行它时，一切都很好。缩小框的宽度，文本行保持 1 行，直到 canvas 达到最小宽度，然后文本开始换行。

要查看问题，请取消注释以下行：

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

Flexbox 现在似乎正在使用内部坐标宽度来安排事物……或其他事物。文本现在将在 canvas 缩小到最小宽度之前开始换行。

如果没有 Enyo，我无法复制确切的设置，但这很接近并且似乎没有做同样的事情：https://jsfiddle.net/ez6b2q8v/103/

按照我的理解，设置canvas width/height 应该只会影响内部坐标，不会影响canvas 本身的大小。我错过了什么？

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维的情况下，canvas的height和width也将作为维。如果您指定 CSS 与属性不同的维度，canvas 将被扭曲以固定指定的大小。参见 Canvas width and height in HTML5。

如果您希望 canvas 内部坐标随 flex 布局进行调整，则必须按照您在 fiddle 中演示的那样处理调整大小。在 Enyo 中，您可以向 MySample 添加一个 handleResize 方法来更新 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",
    }]
  }],

});

Canvas 使用 Flexbox 和 Enyo 调整大小

Canvas resize with Flexbox and Enyo

javascript

canvas

resize

flexbox

enyo