如何让我的 canvas (fabricjs) 始终是 window 的全宽，也在调整 window 大小并保持对象到位之后

Question

我有一张 canvas，其中一张图片填满了 canvas。这工作正常，但我想让 canvas 是 window 的全宽。目前 canvas 是我放入其中的图像的宽度。

我已经在我的脚本底部尝试了以下内容：

function resizeCanvas() {
  canvas.setHeight(img.height);
  canvas.setWidth(window.innerWidth);
  canvas.renderAll();
}

resizeCanvas();

但这不起作用。

我也试过在其参数中给 canvas 元素 100% 的宽度和 css，但都没有成功。

Codepen 与工作示例：

https://codepen.io/twan2020/pen/YzpeEEr

如果您增加屏幕尺寸，图像会在一段时间后停止，而不是保持浏览器的全宽 window。

这可能吗？将所有对象保持在原位？

Answer 1

修复起来并不容易，但我找到了一些可以让它工作的文档。

首先将代码编辑为realWidth并添加var realWidth = window.innerWidth;

然后为了设置背景删除您当前的代码并添加

  fabric.Object.NUM_FRACTION_DIGITS = 10;
  fabric.Image.fromURL(source, function(img) {
      img.scaleToWidth(canvas.width);
      canvas.setBackgroundImage(img);
      canvas.requestRenderAll();
    });

这应该可以解决问题，背景将占据整个屏幕。

更新圆位置的新计算。

等于Newposition= oldPosition * (newWidth / oldWidth)

在这里你可以看到它有效https://codepen.io/AlenToma/pen/ExNEooX

如何让我的 canvas (fabricjs) 始终是 window 的全宽，也在调整 window 大小并保持对象到位之后

How to have my canvas (fabricjs) always be full width of the window, also after resizing window and keep objects in place

javascript

html

css

canvas

fabricjs