围绕 p5.js 中的点旋转线

Question

目标： 我正在尝试创建一个给定两个角的三角形 (a0,b0)。为此，我尝试将向量 r0 旋转某个角度 a0 around r0 的顶点之一。这是说明我的想法的图表。 问题： 但是，当我旋转线时，它似乎绕着原点旋转。我已阅读 , articles 如何解决此问题，但 none 的建议解决方案（即平移然后旋转、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>

感谢任何帮助。

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() 矩阵。所以你可以用不同的变换绘制不同的对象。

围绕 p5.js 中的点旋转线

Rotating Line around Point in p5.js

javascript

computational-geometry

p5.js