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调整面料的画布

(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()获得document.getElementById('canvas-container').clientWidth的宽度，然后使用{{1那个价值？ E.g：

canvas.setWidth

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

Answer 3

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

attribute unsigned long width;

attribute unsigned long height;

Fabric.js：宽度为100％的帆布？

3 个答案: