0

我正在尝试制作一个简单的类似 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：我的代码

4

1 回答 1

0

最后我解决了这个问题。平移前必须设置 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();
于 2021-09-26T16:10:59.493 回答