个人中心
gpt4 book ai didi

javascript - 旋转点的位置

转载 作者：行者123 更新时间：2023-12-05 04:35:06 25 4
gpt4 key购买 nike

问题:旋转后如何获取点的位置？

目标:我想在给定两个 Angular 的情况下创建一个三 Angular 形。用户可以操作两个 Angular (a0,b0)，程序将根据两条边的交点确定第三个顶点。

说明:要找到两条边的交点，我需要四个点:l1 和l2 的端点。为了跟踪这些点，我创建了 vertices=[]。但在用户旋转边并更改 (a0,b0) 后，数组不会更新点的位置。

因此，当我检索我的点时，其中两个点处于初始位置，并且在用户旋转边后没有更新。我在网上搜索过这个问题，但无济于事。感谢您的帮助。

MWE:

let angle = 0;
let sides = [];
let vertices = [];
function setup(){
  createCanvas(600, 400);
  angleMode(DEGREES);

  angleOne = createSlider(0, 180, 100);
  angleOne.position(10,10);
  angleOne.style('width', '80px');

  angleTwo = createSlider(0, 180, 100);
  angleTwo.position(10,30);
  angleTwo.style('width', '80px');
}

function draw(){
  background(255);

  let angOne = angleOne.value();
  let angTwo = angleTwo.value();

  strokeWeight(0);
  textSize(15);
  text(angOne, 90, 17);
  text(angTwo, 90, 37);
  
  let v1 = createVector(width/2 - 50, height/2);
  let v2 = createVector(width/2 + 50, height/2);

  sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);
  sides[0].show();

  vertices[0] = new Vertex(v1.x, v1.y);
  vertices[0].show();

  vertices[1] = new Vertex(v2.x, v2.y);
  vertices[1].show();

  /** ROTATE TIME **/
  push();
  translate(v1.x, v1.y);
  rotate(-1*angOne);
  translate(-v1.x, -v1.y);

  sides[1] = new Side(v1.x, v1.y, v2.x, v2.y);
  sides[1].show();

  vertices[2] = new Vertex(v2.x, v2.y);
  vertices[2].show();

  pop();

  /** ROTATE TIME **/
  push();
  translate(v2.x, v2.y);
  rotate(angTwo);
  translate(-v2.x, -v2.y);

  sides[2] = new Side(v1.x, v1.y, v2.x, v2.y);
  sides[2].show();

  vertices[3] = new Vertex(v1.x, v1.y);
  vertices[3].show();

  pop();

  // const x1 = sides[0].a.x;
  // const y1 = sides[0].a.y;
  // const x2 = sides[1].a.x;
  // const y2 = sides[1].a.y;
  //
  // const x3 = p3.x;
  // const y3 = p3.y;
  // const x4 = p4.x;
  // const y4 = p4.y;

}

class Side {
  constructor(x1, y1, x2, y2){
    this.a = createVector(x1, y1);
    this.b = createVector(x2, y2);
  }

  show() {
    stroke(0);
    strokeWeight(4);
    line(this.a.x, this.a.y, this.b.x, this.b.y);
  }
}

class Vertex {
  constructor(x1, y1){
    this.a = createVector(x1, y1);
  }

  show() {
    stroke(255,0,0);
    strokeWeight(20);
    point(this.a.x, this.a.y);
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

    <title>Billiards #2</title>
  </head>
  <body>
  </body>
</html>

最佳答案

一句话:三 Angular 学。不使用 rotate() 函数来旋转绘图参照系，而是使用 trig 来计算各种顶点位置。这是带有注释的代码，希望能解释这是如何完成的:

let angle = 0;
let sides = [];
let vertices = [];

const len = 100;

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

  angleOne = createSlider(0, 180, 45);
  angleOne.position(10, 10);
  angleOne.style('width', '80px');

  angleTwo = createSlider(0, 180, 100);
  angleTwo.position(10, 30);
  angleTwo.style('width', '80px');

  // Initial vertice & side setup (these don't change)
  let v1 = createVector(width / 2 - len / 2, height / 2);
  let v2 = createVector(width / 2 + len / 2, height / 2);

  sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);

  vertices[0] = new Vertex(v1.x, v1.y);
  vertices[1] = new Vertex(v2.x, v2.y);
}

function draw() {
  background(255);

  let angOne = angleOne.value();
  let angTwo = angleTwo.value();

  strokeWeight(0);
  textSize(15);
  text(angOne, 90, 17);
  text(angTwo, 90, 37);

  // Calculate vertices 2 and 3 based on angles
  // We can use trigonometry to find the x and y component of a vector of known length based on the angle from some refference.
  // In this case our reference will be in the positive X direction.
  // The sine of an angle is, given a right triangle, equal to the ratio of the opposite side from that angle and the hypotenuse of the triangle, so that corresponds to our Y component.
  // The cosine is the ratio of the adjacent side over the hypotenuse, so that represents our X component
  let v2Offset = createVector(
    len * cos(-angOne),
    len * sin(-angOne)
  );
  // Our reference vector for this is in the negative X direction and we are rotating clockwise instead of counter clockwise, hence the different signs
  let v3Offset = createVector(-len * cos(angTwo), -len * sin(angTwo));

  // Add our offsets to the origins in order to calculate the actual positions for these vertices.
  vertices[2] = new Vertex(
    vertices[0].a.x + v2Offset.x,
    vertices[0].a.y + v2Offset.y
  );
  vertices[3] = new Vertex(
    vertices[1].a.x + v3Offset.x,
    vertices[1].a.y + v3Offset.y
  );

  // Update the sides
  sides[1] = new Side(
    vertices[0].a.x,
    vertices[0].a.y,
    vertices[2].a.x,
    vertices[2].a.y
  );

  sides[3] = new Side(
    vertices[1].a.x,
    vertices[1].a.y,
    vertices[3].a.x,
    vertices[3].a.y
  );

  // Now that are vertices are all computed properly finding the intersection of these two lines is a simple matter:

  // Calculate the slopes
  const m1 = (vertices[2].a.y - vertices[0].a.y) / (vertices[2].a.x - vertices[0].a.x);

  const m2 = (vertices[3].a.y - vertices[1].a.y) / (vertices[3].a.x - vertices[1].a.x);

  // Calculate the y-offset relative to vertices[0]
  const b2 = (vertices[1].a.x - vertices[0].a.x) * -m2;

  // y1 = m1 * x
  // y2 = m2 * x + b2
  // Find the x where y1 = y2
  // m1 * x = m2 * x + b2
  // m1 * x - m2 * x = b2
  // x * (m1 - m2) = b2
  // x = b2 / (m1 - m2)

  const xInt = b2 / (m1 - m2)
  const yInt = xInt * m1;
  // Note xInt and yInt are relative to vertices[0]

  // draw all the things
  sides.forEach(s => s.show());
  vertices.forEach(v => v.show());


  stroke(0, 255, 0);
  strokeWeight(20);
  point(vertices[0].a.x + xInt, vertices[0].a.y + yInt);
}

class Side {
  constructor(x1, y1, x2, y2) {
    this.a = createVector(x1, y1);
    this.b = createVector(x2, y2);
  }

  show() {
    stroke(0);
    strokeWeight(4);
    line(this.a.x, this.a.y, this.b.x, this.b.y);
  }
}

class Vertex {
  constructor(x1, y1) {
    this.a = createVector(x1, y1);
  }

  show() {
    stroke(255, 0, 0);
    strokeWeight(20);
    point(this.a.x, this.a.y);
  }
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

关于javascript - 旋转点的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71103887/

25 4 0
文章推荐： git - 无法克隆存储库 : git@gitlab. com : Permission denied (publickey, 键盘交互)
文章推荐： r - 如何将 data.frame 强制转换为 R 中的稀疏矩阵
文章推荐： c++ - 我怎样才能阻止链跳线？
文章推荐： node.js - "node"版本 "14"在 WSL 中运行 Node 16 时没有 't match your global version "12"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com