Fabric.js：100% 宽度的画布可能吗？

Question

当使用 'canvas = new fabric.Canvas('foo')' 时，Fabric 会将带有 width=100% 的 css 类的画布元素转换为类似的内容：

<div class="canvas-container" style="position: relative" width="293px">
  <canvas class="upper-canvas"></canvas>
  <canvas class="lower-canvas" id="c"></canvas>
</div>

包装 div 以及两个画布元素都获得了样式标签和固定的宽度/高度。在初始化方面，我只发现 canvas.setWdith 虽然只接受数值（没有百分比值）。

有没有办法初始化 Fabric 以尊重/使用给定的 100% 宽度？

更新： 示例：http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

我不确定您是否可以明确告诉 Fabric 使用 100% 宽度，但也许可以通过 $('.canvas-container').width() 或 document.getElementById('canvas-container').clientWidth 获得 canvas-container 的宽度，然后在该值上使用 canvas.setWidth？例如：

canvas.setWidth($('.canvas-container').width());

提示：还记得在窗口调整大小时设置此项，以防止任何内容溢出。

Answer 2

因为canvas element、width 和height 的性质需要以像素为单位。因此，Fabric 不会在画布上使用百分比值。

attribute unsigned long width;

attribute unsigned long height;

Answer 3

通过使用它的对象和窗口的innerWidth和innerHeight来调整fabric的画布的大小

(function(){
  var canvas = new fabric.Canvas('app');

  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();
  }

  // resize on init
  resizeCanvas();
})();