Vanilla JS无限网格对称缩放求助：轴值更新时机不一致

你的核心问题是放大/缩小的触发阈值不匹配，导致缩放路径不对称。要实现"反向回放"式的对称缩放，需要让层级切换的触发条件基于当前轴值间隔的实际像素尺寸，而非固定的minCellSize比例。

具体修改方案 #

针对Grid类draw函数的初始判断部分，按以下逻辑调整：

1. 先给Grid类补充初始轴值间隔的属性（如果还没有）：

class Grid {
  constructor(minCellSize = 100) {
    this.minCellSize = minCellSize;
    this.initialAxisStep = minCellSize; // 初始轴值间隔，和最小单元格尺寸一致
    this.axisStep = minCellSize; // 当前轴值间隔
    this.zoom = 1; // 全局缩放比例
    this.offsetX = 0; // 网格X偏移
    this.offsetY = 0; // 网格Y偏移
  }
}

2. 修改draw函数中的切换判断逻辑：

draw(ctx) {
  // 计算当前轴值间隔对应的实际渲染像素尺寸
  const currentAxisPixelSize = this.axisStep * (this.minCellSize / this.initialAxisStep) * this.zoom;

  // 放大触发：轴值间隔像素达到2倍最小尺寸时，升级刻度层级
  if (currentAxisPixelSize >= 2 * this.minCellSize) {
    this.axisStep *= 2;
    this.zoom /= 2;
    // 调整偏移量，保证缩放后网格线位置不变
    this.offsetX /= 2;
    this.offsetY /= 2;
  }
  // 缩小触发：轴值间隔像素小于最小尺寸时，降级刻度层级
  else if (currentAxisPixelSize < this.minCellSize) {
    // 可选：限制最小轴值间隔不低于初始值，避免出现小于minCellSize的刻度
    if (this.axisStep <= this.initialAxisStep) return;
    this.axisStep /= 2;
    this.zoom *= 2;
    // 调整偏移量，保证网格线位置不变
    this.offsetX *= 2;
    this.offsetY *= 2;
  }

  // 后续绘制网格、轴值的代码...
}

方案说明 #

• 对称触发逻辑：放大时在轴值间隔像素达到2*minCellSize时切换，缩小时在轴值间隔像素小于minCellSize时切换，确保缩放路径完全可逆（比如从100px刻度放大到200px，缩小又能从200px回到100px，而非降到50px）。
• 避免持续触发：每次切换后都会将轴值间隔的像素尺寸拉回minCellSize附近，只有当缩放操作突破阈值时才会触发层级切换，不会出现频繁触发的问题。
• 偏移量调整：切换层级时同步调整偏移量，保证网格线的视觉位置不变，避免缩放时网格跳变。

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