在 javascript 中根据起始坐标和预定义的角度获取结束线坐标

Question

我有一个问题，每次点击都画SVG线，我需要做的是只画水平/垂直线(90度(或45度线。 我已经解决的水平/垂直问题，如果我知道以下信息，我卡在的地方是画 45 度线：startCoordX、startCoordY、endCoordX、endCoordY、angle(正 45 度或负 -45 度。 基本上，我只需要调整 endT坐标，使它们与起始坐标形成 +-45 度角线。 到目前为止，我正在计算两点之间的角度，如下所示：

angle(startx, starty, endx, endy) {
var dy = endy - starty;
var dx = endx - startx;
var theta = Math.atan2(dy, dx); // range (-PI, PI]
theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
//if (theta < 0) theta = 360 + theta; // range [0, 360)
return Math.abs(theta) > 90 ? theta % 90 : theta;
}

任何想法如何实现这一目标？我需要另一个函数来返回我的结束 X 和 Y 坐标，以便画线......

Answer 1

看到这个答案：https://stackoverflow.com/a/18473154/9792594

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

有了它，你可以用 45 作为第 4 个参数调用它，即：

const pos = polarToCartesian(startx, starty, radius, 45)

这需要您知道要绘制的半径。或者你可以从你的函数中获取它，比如：

angle(startx, starty, endx, endy) {
const dy = endy - starty;
const dx = endx - startx;
const radius = Math.sqrt(dy**2 + dx**2);
const pos = polarToCartesian(startx, starty, radius, 45);
let theta = Math.atan2(dy, dx); // range (-PI, PI]
theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
//if (theta < 0) theta = 360 + theta; // range [0, 360)
return Math.abs(theta) > 90 ? theta % 90 : theta;
}

重要的行const radius = Math.sqrt(dy**2 + dx**2);后跟const pos = polarToCartesian(startx, starty, radius, 45)

我假设您想更改最终回报以检查当前θ是否更接近45而不是0或90？如果是这样，请画一条 45 度线？

如有任何问题，或者如果我错误地理解了您的目标，请告诉我。