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元素都获得样式标记和固定的宽度/高度.在初始化方面,我只找到了canvas.setWdith,它只接受数值(没有百分比值).

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

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

Answer 1

通过使用其对象和窗口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();
})();

Answer 2

我不知道,如果你能明确告诉面料使用100%的宽度,但也许得到的宽度 canvas-container,通过$('.canvas-container').width()或document.getElementById('canvas-container').clientWidth,然后使用canvas.setWidth该值？例如:

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

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