Fabric.js：窗口调整大小问题答案

【问题标题】：Fabric.js: Window Resizing IssueFabric.js：窗口调整大小问题
【发布时间】：2021-11-18 21:10:43
【问题描述】：

我正在尝试制作一个简单的类似 PowerPoint 的应用程序。这两周我正在努力解决窗口大小调整问题。如果您能给我任何建议，我真的很感激！

我想继续在屏幕中间定位一个白色矩形，所以我使用 absolutePan 和 zoomToPoint。它在加载时完美运行。但是，当您调整窗口大小时，位置会漂移。

这是我的代码

.
.
  handleWindowResize()
  window.addEventListener('resize', handleWindowResize)
.
.
  function handleWindowResize(){
    var clientWidth = document.getElementById('drawing-area').clientWidth
    var clientHeight = document.getElementById('drawing-area').clientHeight
    canvas.setDimensions({ width: clientWidth, height: clientHeight })

    // Pan canvas to locate white board center
    let panX =  - (canvas.width - WB_WIDTH)/2
    let panY =  - (canvas.height - WB_HEIGHT)/2

    var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
    canvas.absolutePan(new fabric.Point(panX,panY))
    canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
    canvas.renderAll();
  }

我认为平移可行，但 zoomToPoint 功能无法正常工作。缩放的中心点似乎不正确。

我尝试了 relativePan、setViewportTransform 和其他一些函数，但没有成功。

请帮忙！

screen shot

Codepen: my code

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案1】：

终于解决了这个问题。平移前必须设置 Zoom = 1

    var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
    canvas.setZoom(1) // Must set zoom = 1 before panning
    canvas.absolutePan(new fabric.Point(panX,panY))
    canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
    canvas.renderAll();

【讨论】：