如何在P5JS中平移和旋转后获得绘制点的真实位置

Question

我读了很多书，尝试了很多东西，但无法完成这个，而且看起来很简单

我有以下p5js代码

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

function draw() {
  background(220);

  push();
  translate(50,100);
  point(25,25);
  // MISSING CODE to get 75,125
  pop();
  
} 

我想弄清楚是否有办法获得绘制点的实际坐标， 我读到了有关 getTransform、矩阵和很多东西的内容，但似乎不可能完成它。另外，我需要在变换中使用旋转，这使得它变得更加困难

谢谢！

Answer 1

使用变量，这样您就可以跟踪翻译的量和点的位置，以便您可以将它们相加以获得所需的结果。

let trans_x = 50
let trans_y = 100
let point_x = 25
let point_y = 25


translate(trans_x, trans_y);
point(point_x, point_y);

result_x = trans_x + point_x  // 50+25=75
result_y = trans_y + point_y  // 100+25=125

您可以使用向量，这样您就不必定义 2 个变量，但您明白了。

通常你会调用 WorldPosition 来表示对象的绝对位置，调用relativePosition 来表示对象相对于 CameraPosition 的位置

翻译将被称为 CameraPosition ，为了使您的代码更高效，您应该只绘制其相对位置落在可绘制区域内的对象。

Answer 2

你可以做一些变换矩阵魔法：

  const ctx = drawingContext; // Alias for this._renderer.drawingContext
  const matrix = ctx.getTransform(); // This is a DOMMatrix in web browsers that support it
  // for the 2D case:
  const rot = atan2(matrix.b, matrix.a);
  console.log(rot); // the answer is in Radians if I am not mistaken
  const scale_x = sqrt(matrix.a**2 + matrix.c**2);
  const scale_y = sqrt(matrix.b**2 + matrix.d**2);
  const pos = createVector(matrix.e/scale_x, matrix.f/scale_y); // check pos.x and pos.y
  console.log(pos);