使用Flexbox和Enyo调整画布大小

k_hampton 发表于 Dev

汉普顿

使用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;
}

Ryanjduffy

在没有CSS尺寸的情况下，画布的height和width也将用作尺寸。如果您指定的CSS尺寸与属性不同，则画布将变形以固定指定的尺寸。请参见HTML5中的Canvas宽度和高度。

如果要使用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",
    }]
  }],

});