如何获取P5JS中经平移和旋转后绘制点的实际坐标

P5.js的平移、旋转等变换本质是通过变换矩阵作用于坐标点，你可以获取当前的变换矩阵，通过矩阵运算得到原始点经过变换后的实际画布坐标。以下是两种可行的解决方案：

基础示例（对应你的代码） #

function setup() {
  let canvas = createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);

  push();
  translate(50,100);
  point(25,25);
  
  // 方法1：使用P5.js内置的getMatrix()
  let transformMatrix = getMatrix();
  // 矩阵运算公式：x' = a*x + c*y + e; y' = b*x + d*y + f
  // 矩阵顺序：[a, b, c, d, e, f]
  let worldX = transformMatrix[0] * 25 + transformMatrix[2] * 25 + transformMatrix[4];
  let worldY = transformMatrix[1] * 25 + transformMatrix[3] * 25 + transformMatrix[5];
  console.log("变换后坐标（方法1）：", worldX, worldY); // 输出75, 125
  
  // 方法2：使用Canvas原生上下文的变换矩阵（更简洁）
  let domMatrix = drawingContext.getTransform();
  let transformedPoint = domMatrix.transformPoint(new DOMPoint(25, 25));
  console.log("变换后坐标（方法2）：", transformedPoint.x, transformedPoint.y); // 输出75, 125
  
  pop();
}

包含旋转的复杂场景 #

如果加入旋转变换，两种方法依然适用，无需修改核心逻辑：

function draw() {
  background(220);

  push();
  translate(50,100);
  rotate(radians(45)); // 新增45度旋转
  point(25,25);
  
  // 用方法2快速计算旋转后的实际坐标
  let domMatrix = drawingContext.getTransform();
  let transformedPoint = domMatrix.transformPoint(new DOMPoint(25, 25));
  console.log("旋转后实际坐标：", transformedPoint.x, transformedPoint.y);
  
  pop();
}

关键说明 #

• getMatrix()返回的是P5.js封装的变换矩阵数组，顺序对应标准齐次变换矩阵的参数，手动计算时要注意参数顺序。
• 原生Canvas的getTransform()返回DOMMatrix对象，transformPoint()方法可以直接完成矩阵与点的乘法运算，代码更简洁不易出错。

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