移动端P5.js绘图工具p5.Graphics顶点绘制异常问题求助

• 技术栈：Ionic框架搭建的PWA，使用P5.js ^1.7.0实现绘图功能
• 异常场景：桌面端绘图表现完全正常；移动端（Google Pixel 6，LineageOS 20/Android 13，Chrome浏览器）中，绘图过程中p5.Renderer实时绘制的线条正常，但输入释放后调用updateDrawingCurve函数在p5.Graphics上通过curveVertex绘制的曲线结果不符合预期
• 核心问题：移动端p5.Graphics的curveVertex渲染逻辑与桌面端存在不一致，无法通过P5.js高层API修正

1. 修正触摸坐标精度
   移动端触摸事件返回的坐标可能存在浮点精度误差，而桌面端鼠标坐标精度更稳定。在将坐标传入curveVertex前，对坐标做精度截断处理：

// 替换原坐标处理代码
const adjustedX = Number(touchX.toFixed(2));
const adjustedY = Number(touchY.toFixed(2));
graphics.curveVertex(adjustedX, adjustedY);

2. 强制同步Graphics渲染状态
   移动端浏览器的GPU渲染优化可能导致p5.Graphics的状态未与主画布同步，在绘制前后手动对齐状态并强制刷新：

function updateDrawingCurve() {
  graphics.push();
  // 同步主画布的笔触、线宽等状态
  graphics.stroke(mainCanvas.stroke());
  graphics.strokeWeight(mainCanvas.strokeWeight());
  graphics.fill(mainCanvas.fill());
  // 执行curveVertex绘制逻辑
  // ...
  graphics.pop();
  // 强制刷新Graphics的GPU缓存
  graphics.drawingContext.flush();
}

3. 自定义曲线绘制逻辑替代curveVertex
   如果P5.js原生curveVertex在移动端WebGL渲染存在兼容问题，改用自定义贝塞尔曲线实现：

// 基于二次贝塞尔的平滑曲线绘制
function drawSmoothCurve(points, graphics) {
  if (points.length < 3) return;
  graphics.beginShape();
  graphics.vertex(points[0].x, points[0].y);
  for (let i = 1; i < points.length - 1; i++) {
    const midPoint = {
      x: (points[i].x + points[i+1].x) / 2,
      y: (points[i].y + points[i+1].y) / 2
    };
    graphics.quadraticVertex(points[i].x, points[i].y, midPoint.x, midPoint.y);
  }
  graphics.vertex(points[points.length-1].x, points[points.length-1].y);
  graphics.endShape();
}

4. 禁用移动端触摸相关浏览器优化
   添加CSS规则消除触摸事件的默认行为和延迟，避免坐标采集偏差：

canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

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