javascript - 获取给定 Angular x 和 y 增量值

Question

注意:您的解决方案可以是浏览器 js 或 python。 angleX 将以弧度为单位

我想要一个带有三个参数的方法:-

• aCord -(具有 A 点坐标的对象/字典)
• bCord -(带有 B 点坐标的对象/字典)
• angleX -(旋转 Angular )

假设我有一个点 A 和一个点 B(屏幕上的任何位置。不一定如图所示平行)

B点旋转angleX度(以B点为圆心)形成C点

但是，我想增加 b.x 和 b.y，使其与 c.x 和 c.y 相同

你的函数应该返回一个带有两个值的对象/字典。一个“x-增量”和一个“y-增量”(这是我应该增加 B 点的 x 和 y 的量)

这是我现有的代码(js)

function getIncrement(aCord, bCord, angleX) {

  let r = Math.sqrt(Math.pow(aCord.x - bCord.x, 2) + Math.pow(aCord.x - bCord.x, 2));

  let angleY = Math.atan(Math.abs(aCord.y - bCord.y) / Math.abs(aCord.x - bCord.x));

  let cCord = {
    x: Math.cos(angleY + angleX) * r,
    y: Math.sin(angleY + angleX) * r
  };

  return {
    xIncrement: cCord.x - aCord.x,
    yIncrement: cCord.y - aCord.y
  };
}

抱歉，如果我的解释不够好。如果有不明白的地方我可以在评论里解释

Answer 1

这里是在 JavaScript 代码片段中使用的函数的演示。在框中移动鼠标可移动 B 点(A 固定)，A-C 线将动态添加。改变输入框中的 Angular :

// The function to calculate C:
function getC(a, b, angle) {
    let sign = -1; // change to 1 if Y axis goes upward
    let radius = Math.sqrt((a.x-b.x)**2 + (a.y-b.y)**2);
    angle += Math.atan2(sign*(b.y-a.y), b.x-a.x);
    return {
        x: a.x + Math.cos(angle)*radius,
        y: a.y + sign*Math.sin(angle)*radius
    };
}

// I/O handling
function drawLine(ctx, a, b, color="black") {
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.strokeStyle = color;
    ctx.stroke();
}

function text(ctx, a, txt, color) {
    ctx.fillStyle = color;
    ctx.fillText(txt, a.x+2, a.y-2);
}

function refresh(ctx, a, b, c) {
    outputB.textContent = Math.round(b.x) + "," + Math.round(b.y);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawLine(ctx, a, b, "black");
    drawLine(ctx, a, c, "red");
    text(ctx, a, "A", "black");
    text(ctx, b, "B", "black");
    text(ctx, c, "C", "red");
}

let ctx = document.querySelector("canvas").getContext("2d");
let inputDegrees = document.querySelector("#angle");
let outputB = document.querySelector("#b");
let a = { x: 200, y: 75 };

ctx.canvas.onmousemove = function(e) {
    let b = { 
        x: e.clientX-e.target.offsetLeft,
        y: e.clientY-e.target.offsetTop,
    };
    let c = getC(a, b, inputDegrees.value*Math.PI/180);
    refresh(ctx, a, b, c);
}

canvas { border: 1px solid }

Angle(degrees): <input id="angle" type="number" value="15"><br>
A=(200,75) B=(<span id="b"></span>)<br>

<canvas width="400" height="150"></canvas>