使用@panzoom/panzoom计算无限网页可视区域的缩放适配问题

我使用@panzoom/panzoom开发包含元素的无限网页，需根据元素坐标在用户平移时实现懒加载，因此需要计算屏幕可视区域。现有计算逻辑在scale≥1时运行正常，但当scale<1时，计算出的坐标无法覆盖完整可视区域。原代码如下：

const lazyload = e => {
    if (!panzoomInstance || !panzoomElem) return false;

    const scale = panzoomInstance.getScale();
    const pan = panzoomInstance.getPan();
    const { width, height } = document
      .getElementById("container")
      .getBoundingClientRect();

    const x1 = (0 - pan.x) / scale;
    const y1 = (0 - pan.y) / scale;
    const x2 = (width - pan.x) / scale;
    const y2 = (height - pan.y) / scale;

    const visibleArea = {
      x1: Math.floor(x1 * scale),
      y1: Math.floor(y1 * scale),
      x2: Math.floor(x2 * scale),
      y2: Math.floor(y2 * scale)
    };

    const itemsToLoad = items.filter(
      i =>
        i.x >= visibleArea.x1 &&
        i.x <= visibleArea.x2 &&
        i.y >= visibleArea.y1 &&
        i.y <= visibleArea.y2
    );

    console.log(`scale ${scale}`);
    console.log(`pan ${JSON.stringify(pan)}`);
    console.log("visibleArea", visibleArea);

    itemsToLoad.map(i => console.log(i.x, i.y));

    console.log(`found ${itemsToLoad.length} \n\n`);
};

问题分析 #

原逻辑的核心错误在于：将容器可视区域转换到元素原始坐标空间后，又错误地将坐标乘回了scale。当scale<1时，这会导致计算出的可视区域范围被缩小，无法覆盖实际显示的元素。

修正后的代码 #

const lazyload = e => {
    if (!panzoomInstance || !panzoomElem) return false;

    const scale = panzoomInstance.getScale();
    const pan = panzoomInstance.getPan();
    const { width, height } = document
      .getElementById("container")
      .getBoundingClientRect();

    // 将容器可视区域的边界转换为元素原始坐标空间的边界
    const x1 = (0 - pan.x) / scale;
    const y1 = (0 - pan.y) / scale;
    const x2 = (width - pan.x) / scale;
    const y2 = (height - pan.y) / scale;

    // 直接使用转换后的坐标作为可视区域边界，无需再乘scale
    const visibleArea = {
      x1: Math.floor(x1),
      y1: Math.floor(y1),
      x2: Math.ceil(x2), // 用ceil确保右侧/底部元素不会被遗漏
      y2: Math.ceil(y2)
    };

    const itemsToLoad = items.filter(
      i =>
        i.x >= visibleArea.x1 &&
        i.x <= visibleArea.x2 &&
        i.y >= visibleArea.y1 &&
        i.y <= visibleArea.y2
    );

    console.log(`scale ${scale}`);
    console.log(`pan ${JSON.stringify(pan)}`);
    console.log("visibleArea", visibleArea);

    itemsToLoad.forEach(i => console.log(i.x, i.y)); // 用forEach替代map更合适

    console.log(`found ${itemsToLoad.length} \n\n`);
};

关键修改说明 #

1. 移除多余的scale乘法：(容器坐标 - pan.x)/scale已经完成了从容器显示坐标到元素原始坐标的转换，无需再反向乘scale。
2. 调整取整方式：对x2和y2使用Math.ceil，确保刚好落在边界上的元素不会被过滤掉；x1和y1用Math.floor保证左侧/顶部边界准确。
3. 优化遍历方法：用forEach替代map，因为这里不需要返回新数组，只是执行打印操作。

这样修改后，无论scale大于1还是小于1，都能正确计算出覆盖完整可视区域的元素坐标范围，确保懒加载逻辑正常工作。

内容的提问来源于stack exchange，提问作者user1570901