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

Posted 2023-03-05

【中文标题】Fabric.js：100% 宽度的画布可能吗？

【英文标题】：Fabric.js: Canvas with 100% width possible?

【发布时间】：2013-02-19 08:43:47

【问题描述】：

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

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

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

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

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

【问题讨论】：

似乎无法将宽度设置为 100%，当尝试通过 CSS 强制设置时，Fabric 停止按预期工作。

解决方案 - ***.com/a/8486324/104380

【参考方案1】：

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

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

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

【讨论】：

小改动，但“canvas-container”是作为类注入的，而不是 id。所以它应该是 '.canvas-container' 而不是 '#canvas-container'

只是为了给 Nick Mitchell 的评论添加一些细节，Fabric 将您的主机画布包装在一个带有 canvas-container 类的 div 中。

【参考方案2】：

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

attribute unsigned long width;

attribute unsigned long height;

【参考方案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();
)();

【讨论】：

以防万一有人想给出特定的 div 尺寸 canvas.setHeight($('.yourDiv').height()); canvas.setWidth($('.yourDiv').width());

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