Fabric.js 窗口调整大小时白板居中偏移问题求助

API 探路者

2026-10-3

修复方案

问题根因

窗口调整时白板漂移的核心原因是操作顺序错误：先执行absolutePan设置平移后再调用zoomToPoint，缩放操作会基于新的视口再次调整偏移量，导致之前的平移结果被叠加偏移，两次操作的坐标系没有对齐。

推荐修复方案

直接通过设置视口变换矩阵实现居中，避免多个视图方法叠加产生的计算冲突，逻辑完全可控：

function handleWindowResize(){
  const drawingArea = document.getElementById('drawing-area')
  const clientWidth = drawingArea.clientWidth
  const clientHeight = drawingArea.clientHeight
  // 先更新画布尺寸
  canvas.setDimensions({ width: clientWidth, height: clientHeight })

  // 计算适配缩放比例
  const zoom = Math.min(clientHeight / WB_HEIGHT, clientWidth / WB_WIDTH) * 0.9
  // 计算白板居中需要的视口偏移量
  const offsetX = (clientWidth - WB_WIDTH * zoom) / 2
  const offsetY = (clientHeight - WB_HEIGHT * zoom) / 2
  // 直接设置视口变换矩阵，格式为[缩放X, 斜切X, 斜切Y, 缩放Y, 偏移X, 偏移Y]
  canvas.setViewportTransform([zoom, 0, 0, zoom, offsetX, offsetY])

  canvas.renderAll()
}

可选修复方案（调整原有操作顺序）

如果要保留你原本的absolutePan+zoomToPoint写法，调整操作顺序，先做缩放再计算平移量即可：

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

  // 先执行缩放
  const zoom = Math.min(clientHeight / WB_HEIGHT, clientWidth / WB_WIDTH) * 0.9
  canvas.zoomToPoint(new fabric.Point(clientWidth / 2, clientHeight / 2), zoom)
  
  // 缩放完成后再计算平移值
  const panX = (clientWidth - WB_WIDTH * zoom) / 2
  const panY = (clientHeight - WB_HEIGHT * zoom) / 2
  canvas.absolutePan(new fabric.Point(panX, panY))

  canvas.renderAll()
}