如何讓我的 canvas (fabricjs) 始終是 window 的全寬，也在調整 window 的大小並保持對象到位之后

Question

我有一個 canvas，其圖像填充了 canvas。 這工作正常，但我想讓 canvas 成為 window 的全寬。 目前 canvas 是我放入其中的圖像的寬度。

我在腳本底部嘗試了以下內容：

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

resizeCanvas();

但這不起作用。

我還嘗試在其參數和 css 中為 canvas 元素提供 100% 的寬度，但均未成功。

帶有工作示例的 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();
    });

這應該可以解決問題，並且背景將占據屏幕的全尺寸。

更新圓 position 的新計算。

等於Newposition= oldPosition * (newWidth / oldWidth)

在這里你可以看到它工作https://codepen.io/AlenToma/pen/ExNEooX