如何为p5.js中带遮罩的类内顶点对象添加X轴移动效果？

嘿，我来帮你解决这个问题！你遇到的核心问题应该是遮罩和车的位置没有同步更新，或者你之前的移动逻辑只修改了部分顶点坐标，导致整体效果不对。下面给你两种简单可行的解决方案：

方案一：用图形缓冲区（createGraphics）统一控制车和遮罩 #

这是最省心的方法，把车和遮罩都画在一个独立的图形缓冲区里，然后只需要移动这个缓冲区的位置，就能让车和遮罩一起动起来，完美避免同步问题。

具体步骤： #

1. 先在setup()里创建一个和你的车尺寸匹配的图形缓冲区：

let carBuffer;

function setup() {
  createCanvas(800, 400);
  // 这里的宽高要根据你画的车实际调整，示例为200宽100高
  carBuffer = createGraphics(200, 100);
}

2. 在draw()里，先在缓冲区里完成车和遮罩的绘制（所有坐标都基于缓冲区的本地坐标，不用管屏幕位置），然后再把整个缓冲区画到主画布的动态位置上：

let carX = 0;

function draw() {
  background(220);
  
  // 每次绘制前清空缓冲区，避免残留
  carBuffer.clear();
  
  // --- 在缓冲区里画你的车（用vertex） ---
  carBuffer.beginShape();
  // 坐标相对于缓冲区左上角，示例顶点仅供参考
  carBuffer.vertex(50, 0);
  carBuffer.vertex(150, 0);
  carBuffer.vertex(180, 50);
  carBuffer.vertex(180, 80);
  carBuffer.vertex(20, 80);
  carBuffer.vertex(20, 50);
  carBuffer.endShape(CLOSE);
  
  // --- 在缓冲区里画遮罩（比如半透明矩形） ---
  carBuffer.push();
  carBuffer.fill(0, 0, 255, 80); // 蓝色半透明遮罩
  carBuffer.rect(0, 0, carBuffer.width, carBuffer.height);
  carBuffer.pop();
  
  // --- 控制车的移动逻辑 ---
  carX += 1; // 每次帧移动1像素
  // 当车完全移出屏幕右侧时，重置到左侧外，实现循环移动
  if (carX > width + carBuffer.width) {
    carX = -carBuffer.width;
  }
  
  // 把缓冲区画到主画布上，y坐标可根据需求调整
  image(carBuffer, carX, height/2 - carBuffer.height/2);
}

方案二：用统一的位置变量同步顶点和遮罩 #

如果你不想用缓冲区，那就要给车定义一个整体的X位置变量，所有顶点的X坐标都基于这个变量计算，同时遮罩的位置也要跟着这个变量走。

具体代码示例： #

let carX = 0;
// 定义车的顶点相对坐标（相对于车的左上角）
const carVertices = [
  [50, 0], [150, 0], [180, 50], [180, 80], [20, 80], [20, 50]
];

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(220);
  
  // 更新车的位置
  carX += 1;
  if (carX > width + 200) { // 200是车的总宽度，根据实际调整
    carX = -200;
  }
  
  // --- 绘制车：每个顶点的X都加上carX ---
  beginShape();
  for (let v of carVertices) {
    vertex(carX + v[0], height/2 - 40 + v[1]); // y坐标根据布局调整
  }
  endShape(CLOSE);
  
  // --- 绘制遮罩：位置同样基于carX ---
  push();
  fill(255, 0, 0, 80); // 红色半透明遮罩
  // 遮罩位置要刚好覆盖车的区域，坐标需和车的顶点对应
  rect(carX + 20, height/2 - 40, 160, 80);
  pop();
}

为什么你之前的方法没生效？ #

你提到用if x > width, x =+ 1（应该是x += 1？）没效果，大概率是因为：

1. 你只修改了部分顶点的X坐标，没有统一更新所有顶点；
2. 遮罩的位置没有跟着车的X坐标一起移动，导致车移开后，遮罩还留在原地，看起来车没动或者显示异常。

用上面两种方法，就能确保车和遮罩始终同步移动啦！

备注：内容来源于stack exchange，提问作者viv