在React中使用p5.js调整画布及模型大小的问题

问题1：Chrome全屏切换时windowResized()未触发的处理 #

p5.js的windowResized()默认监听浏览器resize事件，但Chrome在全屏/窗口模式切换时可能不会触发该事件，需额外监听全屏状态变化：

• 在setup()中添加全屏事件监听（兼容webkit内核）：

let p5Instance;

function setup(p) {
  p5Instance = p;
  // 你的初始化代码
  // 监听全屏切换事件
  document.addEventListener('fullscreenchange', triggerResize);
  document.addEventListener('webkitfullscreenchange', triggerResize);
}

function triggerResize() {
  // 手动调用windowResized
  windowResized(p5Instance);
}

如果你的windowResized是模块化导出的，确保在监听函数中能正确传入p5实例即可。

问题2：避免尺寸骤降的修复与平滑缩放实现 #

你的现有代码通过累积相乘比例导致尺寸快速趋近于0，核心问题是没有基于原始初始尺寸计算当前值，解决方案如下：

第一步：修复累积缩放误差 #

在模型初始化时保存原始尺寸参数，每次resize直接基于原始值计算当前值：

class BaseModel {
  constructor(initVars) {
    this.initVariables = initVars;
    // 保存原始初始尺寸
    this.originalMin = this.min;
    this.originalMax = this.max;
    this.originalMeasure = this.measure;
  }

  updateonResize() {
    this.r = this.findRatio(
      this.initVariables.width,
      this.initVariables.height,
      this.initVariables.browserWidth,
      this.initVariables.browserHeight
    );

    // 直接用原始值×当前比例，避免累积误差
    this.min = this.originalMin * this.r;
    this.max = this.originalMax * this.r;
    this.measure = this.originalMeasure * this.r;
  }

  findRatio(wd, hd, wc, hc) {
    const w = wc / wd;
    const h = hc / hd;
    return w < h ? w : h;
  }
}

第二步：实现平滑缩放 #

如果需要尺寸平缓过渡而非瞬间跳转，使用p5.js的lerp()函数实现插值过渡：

updateonResize() {
  this.r = this.findRatio(
    this.initVariables.width,
    this.initVariables.height,
    this.initVariables.browserWidth,
    this.initVariables.browserHeight
  );

  // 计算目标尺寸
  const targetMin = this.originalMin * this.r;
  const targetMax = this.originalMax * this.r;
  const targetMeasure = this.originalMeasure * this.r;

  // 平滑过渡，第三个参数为平滑系数（0-1，值越小过渡越慢）
  this.min = p5.lerp(this.min, targetMin, 0.15);
  this.max = p5.lerp(this.max, targetMax, 0.15);
  this.measure = p5.lerp(this.measure, targetMeasure, 0.15);
}

这样调整窗口时，模型尺寸会逐步趋近目标值，不会出现骤降问题。

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