Konva.js：缩放及移动时如何让图像始终在画布内无空白显示

要确保画布始终被图像覆盖、无空白，需根据画布尺寸、图像原始尺寸和当前缩放比例计算移动的边界值，限制偏移量在合理范围内。以下是完整实现逻辑：

1. 核心变量定义 #

先明确几个关键变量（根据你的实际代码调整命名）：

• stageWidth/stageHeight：画布的宽高（可从Konva Stage获取或在状态中存储）
• imageWidth/imageHeight：图像的原始宽高（加载图像后获取）
• scale：当前缩放比例（你的状态变量）
• stageX/stageY：控制图像偏移的状态变量

2. Y轴移动边界实现 #

向上移动（图像内容上滚，即图像向下偏移） #

你的现有代码已处理顶部边界，确保偏移量不超过0（避免画布顶部露出空白）：

// 向上移动按钮逻辑
setStageY((pre) => (pre + 50 > 0 ? 0 : pre + 50));

向下移动（图像内容下滚，即图像向上偏移） #

计算底部边界：当缩放后图像高度大于画布高度时，最大向上偏移量为-(缩放后图像高度 - 画布高度)，确保画布底部不露出空白：

// 向下移动按钮逻辑
setStageY((pre) => {
  const scaledImageHeight = imageHeight * scale;
  // 计算Y轴最小偏移量（最向上的极限）
  const minY = scaledImageHeight <= stageHeight ? 0 : -(scaledImageHeight - stageHeight);
  const newY = pre - 50;
  // 限制偏移量在合法区间内
  return newY < minY ? minY : newY;
});

3. 缩放时的边界修正 #

缩放比例变化后，原有偏移量可能超出新边界，需同步修正偏移量：

// 缩放逻辑示例（根据你的实际缩放方法调整）
const handleScaleChange = (newScale) => {
  setScale(newScale);
  
  // 修正Y轴偏移
  setStageY((pre) => {
    const scaledImageHeight = imageHeight * newScale;
    const minY = scaledImageHeight <= stageHeight ? 0 : -(scaledImageHeight - stageHeight);
    return Math.max(minY, Math.min(pre, 0));
  });

  // 同理修正X轴偏移（若需左右移动）
  setStageX((pre) => {
    const scaledImageWidth = imageWidth * newScale;
    const minX = scaledImageWidth <= stageWidth ? 0 : -(scaledImageWidth - stageWidth);
    return Math.max(minX, Math.min(pre, 0));
  });
};

4. X轴移动边界（同理实现） #

如果需要左右移动，逻辑与Y轴一致：

向左移动（图像内容左滚，即图像向右偏移） #

setStageX((pre) => (pre + 50 > 0 ? 0 : pre + 50));

向右移动（图像内容右滚，即图像向左偏移） #

setStageX((pre) => {
  const scaledImageWidth = imageWidth * scale;
  const minX = scaledImageWidth <= stageWidth ? 0 : -(scaledImageWidth - stageWidth);
  const newX = pre - 50;
  return newX < minX ? minX : newX;
});

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung