p5.js暗黑模式切换时图形颜色无法更新的技术求助

问题根源 #

1. bodyTextColor仅在页面初始化时读取一次，切换暗黑模式后不会自动获取最新的body文字颜色
2. 承载文字的graphic画布只在初始化和窗口 resize 时生成，颜色变更后没有重新绘制带新颜色的文字内容

修复方案 #

1. 监听body样式变化 #

通过MutationObserver监听body元素的样式变更，一旦检测到颜色属性改变，立即更新颜色值并重新生成图形画布。

2. 实时更新图形画布 #

每次颜色变更时，调用responsive()重新绘制带新颜色的文字到graphic画布中。

修改后的完整代码 #

//p5.js hero animation//

let font
let graphic

let body = document.querySelector("body")
let bodyTextColor = window.getComputedStyle(body).getPropertyValue("color");

function responsive () {
  // 清除旧画布，避免内存占用
  if(graphic) graphic.remove();
  graphic = createGraphics(windowWidth / 1.1, windowHeight)
  
  graphic.fill(bodyTextColor);
  graphic.textSize(windowWidth * 0.4);
  graphic.textAlign(CENTER, CENTER);
  graphic.textFont('GT cinetype');
  graphic.textStyle(ITALIC);
  graphic.text("aaaa", windowWidth / 2, windowHeight / 2);
}

function setup () {
  var myCanvas = createCanvas(windowWidth, windowHeight);
  myCanvas.parent('p5-container');
  
  responsive();

  // 监听body样式变化，捕获颜色更新
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if(mutation.attributeName === 'style') {
        bodyTextColor = window.getComputedStyle(body).getPropertyValue("color");
        responsive();
      }
    });
  });
  observer.observe(body, { attributes: true });
}

function draw () {
  background("0, 0, 0, 255");

  const tileSize = 20

  for (let x = 0; x < 120; x = x + 1) {
    for (let y = 0; y < 60; y = y + 1) {

      const wave = 0.03

      const distortionX = sin(frameCount * wave + x * 0.5 + y * 0.2) * 30
      const distortionY = sin(frameCount * wave + x * 0.5 + y * 1.1) * 10

      const sx = x * tileSize + distortionX
      const sy = y * tileSize + distortionY
      const sw = tileSize
      const sh = tileSize

      const dx = x * tileSize
      const dy = y * tileSize
      const dw = tileSize
      const dh = tileSize

      image(graphic, dx, dy, dw, dh, sx, sy, sw, sh)
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  responsive();
}

关键修改说明 #

• 新增MutationObserver监听body的style属性变化，自动触发颜色更新与画布重绘
• 在responsive()中添加旧画布清除逻辑，避免内存冗余
• 移除draw()循环中无效的graphic.fill(bodyTextColor)语句，该语句无法修改已绘制完成的画布内容

内容的提问来源于stack exchange，提问作者sam.svg