Fabric.js：如何实现宽度100%的画布？

Question

当使用 'canvas = new fabric.Canvas('foo')' 时，Fabric将带有width=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.setWidth，但它只接受数字值（没有百分比值）。

有没有一种方法可以初始化Fabric以尊重/使用给定的100％宽度？

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

- thomasf1

---

尝试通过CSS强制将宽度设置为100％似乎没有办法，这样做会导致Fabric无法按预期工作。 - thomasf1

解决方案 - https://dev59.com/e2855IYBdhLWcg3wiU31#8486324 - vsync

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

- ilumin

---

如果有人想要给特定的div设置尺寸，可以使用以下代码： canvas.setHeight($('.yourDiv').height()); canvas.setWidth($('.yourDiv').width()); 其中，"yourDiv"是你想要设置尺寸的div的类名或ID。 - saad

如果页面需要一些时间来设置其布局，推迟调用 resizeCanvas() 是有意义的。对我而言，window.setTimeout(resizeCanvas, 2000) 更加可靠。 - Tom Pohl

Answer 2

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

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

提示：还要记得在窗口大小改变时设置它，以防止内容溢出。

- Albert Xing

---

小改动，但是'canvas-container'被注入为类，而不是ID。所以应该是'.canvas-container'而不是'#canvas-container'。 - Nick Mitchell

只是为了补充Nick Mitchell的评论，Fabric会将您的主机画布包装在一个带有canvas-container类的div中。 - pdoherty926

Answer 3

由于画布元素的性质，宽度和高度需要使用像素。因此，Fabric不会在画布中使用百分比值。

attribute unsigned long width;

attribute unsigned long height;

- rodrigopandini