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

Question

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

<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

通过使用其对象和窗口的内部宽度和内部高度来调整织物的画布大小

(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();
})();

Answer 2

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

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

Protip：还记得在窗口调整大小时设置它以防止任何内容溢出。

Answer 3

Because the nature of canvas element, width and height need be used in pixel. So, Fabric will not use a percent value to canvas.

attribute unsigned long width;

attribute unsigned long height;