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

Question

我正在尝试制作一个简单的类似 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和其他一些函数，但没有成功。

请帮忙！

Codepen：我的代码

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

Answer 2

非常感谢您的问题和 CodePen 演示！我一直在处理同样的问题，即即使调整窗口大小，也要将对象保持在屏幕中央。

我什至不记得本周我有多少次访问此页面并尝试了您答案中的代码。不幸的是，它似乎对我不起作用。

也就是说，直到我点击您的 CodePen 链接。我开始将你的代码与我的进行比较，试图找出差异。最终，我找到了罪魁祸首：我最初使用

canvas.centerObject(object)

将对象居中，而你设置

top: 0, left: 0

却没有将其居中！

感谢您无意中帮助我解决了我的问题！