p5.js中如何围绕点旋转线？

Question

目标: 我想创建一个三角形，给定两个角度(a0,b0)。为此，我尝试将向量r0绕着其中一个顶点旋转一定角度a0。下面是一个说明我的想法的示意图。 问题: 然而，当我旋转这条线时，它似乎围绕原点旋转。我已经阅读了很多, 很多 文章来解决这个问题，但是没有建议的解决方案（即先平移再旋转，push()，pop()）似乎行不通，可能是因为我在处理一条线段。以下是我的代码。

MWE 代码：

let angle = 0;

function setup() {
  createCanvas(600, 400);
  angleMode(DEGREES);
}

function draw() {
  let v1 = createVector(width / 2 - 50, height / 2);
  let v2 = createVector(width / 2 + 50, height / 2);

  background(255);
  stroke(0);
  strokeWeight(4);
  let r0 = line(v1.x, v1.y, v2.x, v2.y);
  rotate(20);
  let r1 = line(v1.x, v1.y, v2.x, v2.y);
  strokeWeight(10);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

任何帮助都将不胜感激。

- rb3652

Answer 1

rotate 会围绕坐标系原点进行旋转。如果要围绕某个轴心点进行旋转，需要执行以下步骤：

• 将轴心点移动到原点
• 旋转对象
• 将轴心点移回场景中的原位置

translate(v1.x, v1.y);
rotate(-1 * mouseX);
translate(-v1.x, -v1.y);

let angle = 0;

function setup() {
  createCanvas(600, 300);
  angleMode(DEGREES);
}

function draw() {
  let v1 = createVector(width / 2 - 50, height / 2);
  let v2 = createVector(width / 2 + 50, height / 2);

  background(255);
  stroke(0);
  strokeWeight(4);
  
  push();
  translate(v1.x, v1.y);
  rotate(-1 * mouseX);
  translate(-v1.x, -v1.y);
  let r0 = line(v1.x, v1.y, v2.x, v2.y);
  strokeWeight(10);
  let p1 = point(v1.x, v1.y);
  let p2 = point(v2.x, v2.y);
  pop();
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

对于单个模型的转换，您必须在指定变换之前push()当前矩阵，并在绘制对象后pop()矩阵。这样您就可以使用不同的变换绘制不同的对象。

- Rabbid76