计算 B 点坐标，知道与 A 点的角度和距离

Question

有人可以帮我解决数学问题吗？我正在尝试计算从 A 点到 B 点的行进距离。 这是我到目前为止所拥有的：https://editor.p5js.org/Marcel0024/sketches/Np03rgmxO 我无法让 **angle ** 工作，在这种情况下，我希望在鼠标单击的方向绘制圆。

计算我在这里得到的角度公式：https://maththebeautiful.com/angle-between-points/

我在这里得到的新点公式：两个向量 2D 之间的角度

但我不能让他们一起工作。

所以我有（使用鼠标位置作为 B 点）

function mouseClicked(){
  var angle = Math.atan2(mouseY - point1.y, mouseX - point1.x)

  const x = point1.x + Math.sin(angle) * travelDistance;
  const y = point1.y - Math.cos(angle) * travelDistance;
  
  circle(x, y, 10)
}

但是角度偏了

Answer 1

你真的不需要角度，一个向量就足够了

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const A = {
  x: canvas.width / 2,
  y: canvas.height / 2
}

const balls = 10

canvas.addEventListener('mousemove', (e) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const vector = getVector(A, getMousePos(canvas, e))
  
  for (let i = 1; i <= balls; i += 1) {
    const x = A.x + vector.x * 20 * i
    const y = A.y + vector.y * 20 * i
    ctx.fillStyle = `hsl(${i * 360 / balls}, 50%, 50%)`
    ctx.beginPath()
    ctx.arc(x, y, 5, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fill()
  }
})

function getVector(A, B) {
  const vector = {
    x: B.x - A.x,
    y: B.y - A.y
  }
  const magnitude = Math.sqrt(vector.x ** 2 + vector.y ** 2)
  const normalized = {
    x: vector.x / magnitude,
    y: vector.y / magnitude
  }
  return normalized
}

function getMousePos(canvas, evt) {
  const rect = canvas.getBoundingClientRect()
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  }
}

canvas {
  border: 1px solid black;
}

<canvas></canvas>

Answer 2

您的代码中存在一些问题，包括混淆了 sin 和 cos，混合了正负数，以及没有正确检索鼠标坐标。这将起作用：

function setup() {
  createCanvas(400, 400);
}

var point1 = {
  x: 300,
  y: 200
}
var travelDistance = 50;

function draw() {
  circle(point1.x, point1.y, 10)
}

function mouseClicked({x:mouseX, y:mouseY}){
  var angle = Math.atan2(mouseY - point1.y, mouseX - point1.x)
  const x = point1.x + Math.cos(angle) * travelDistance;
  const y = point1.y + Math.sin(angle) * travelDistance;
  circle(x, y, 10)
}