refer :
https://www.youtube.com/watch?v=R7dObDtw1aA
https://www.shuxuele.com/algebra/trig-finding-angle-right-triangle.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan
https://www.rapidtables.com/convert/number/how-radians-to-degrees.html
https://www.youtube.com/watch?v=ttO1TOs8048
https://www.youtube.com/watch?v=6MDNDjtWfMw
1. coordinate 和 css translate 是不同的东西
数学有 coordinate x,y ,
左上是 ( -x, +y )
右上是 ( +x, +y)
左下是 ( -x, -y)
右下是 ( +x, -y)
css translate 是说移动的方向.
+x 是往右
-x 是往左
+y 是往下
-y 是往上
注意 : coordinate y 和 translate y 是相反的.
2. 三角形和 tan sin cos
tan sin cos 在 js 里是 Math.cos, Math.sin, Math.tan
反向是 Math.acos, Math.asin, Math.atan
一般上我们 cos(degree) 使用的是 degree, 但是 js 使用的是 radian
所以要背一个转换的公式
radian = degree * Math.PI / 180;
export function degreeToRadian(degree: number): number {
return degree * Math.PI / 180;
}
export function radianToDegree(radian: number): number {
return radian * 180 / Math.PI;
}求三角形斜线的长度是
export function calcRadius(width: number, height: number): number {
return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
}求 x, y coordinate 当拥有 degree 和 radius (斜线的长度)
cos(deg) = x / radius
sin(deg) = y / radius
export function calcCoordinate(radius: number, degree: number): Xy {
return {
x: Math.cos(degreeToRadian(degree)) * radius,
y: Math.sin(degreeToRadian(degree)) * radius
}
}求 degree 当有 x, y
单靠反推上面求 x,y 的公式，我们是无法获取 degree 的，因为 cos(135) === cos(225).
所以更好的做法是通过 tan
tan(d) = y / x
有一点要特别注意就是, x y 的正负值, 代表了它在不同区域. 这个是会直接影响 degree 的. 我们要特别处理.
export function calcDegree(coordinate: Xy): number {
const { x, y } = coordinate;
const result = radianToDegree(Math.atan(y / x));
if (x < 0 && y >= 0) {
return 180 - Math.abs(result); // 这里 result 是 negative
}
else if (x < 0 && y < 0) {
return 180 + result; // 这里 result 是 positive
}
else if (x >= 0 && y < 0) {
return 360 - Math.abs(result) // 这里 result 是 negative
}
else {
return result; // 这里 result 是 positive
}
}最后是 js 的另一个函数来做到上面一样的效果. Math.atan2(y, x)
export function calcDegree(coordinate: Xy): number {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
const result = radianToDegree(Math.atan2(coordinate.y, coordinate.x));
return (result > 0) ? result : 360 - Math.abs(result);
}css 的 rotate 和我们数学的方向也是不太一样的, 数学我们是 右边线开始，逆时针旋转 20 degree 是这样的. 上面的算法全部基于这个概念
所以如果我想说下面这个 x, y 顺势旋转 20 degree 算法应该是..
export function calcCoordinateAfterRotate(currentCoordinate: Xy, rotateDegree: number): Xy {
const radius = calcRadius(Math.abs(currentCoordinate.x), Math.abs(currentCoordinate.y));
const degree = calcDegree(currentCoordinate);
const degreeAfterRotate = degree - rotateDegree;
return calcCoordinate(radius, degreeAfterRotate);
}换算 coordinate 去 translate x, y
export function calcTranslate(fromCoordinate: Xy, toCoordinate: Xy): Xy {
return {
x: toCoordinate.x - fromCoordinate.x,
y: fromCoordinate.y - toCoordinate.y
}
}练习题 :
假设有 2 个点, a 和 b 连成一条斜线.
a = 1, 1
b = 11, 11
问 x = 7, y = 多少 ?
先做一个十字架基于 a 点, 然后换算 b 点 和 x 坐标
现在来求角度
10, 10 求一个角度, 上面已经有公式了, 用 atan2
calcDegree(10, 10);
角度是 45 degree
有 degree , 和 x, 我们可以算出 radius
cos(degree) = x / radius
radius = x / cos(degree)
8.482 = 6 / cos(45)
现在我们有了 三角形的底部 6 和 斜线 8.482
那我们要求高，公式可以用这个
radius = sqrt( pow2(x) + pow2(y) ) 求 y
8.482 = sqrt( pow2(6) + pow2(y) )
pow2(8.482) = pow2(6) + pow2(y)
pow2(8.482) - pow2(6) = pow2(y)
sqrt( pow2(8.482) - pow2(6) ) = y
y = 5.99... 进位就是 6 了
x = 6 , y = 6 这个是对应 a point 的,
记得一开始我们画了多一个十字架来找角度吗 ？
那现在我们得换算回去.
x = 6 + a.x, y = 6 + a.y;
所以最后是 7, 7
这个例子比较简单, 因为都是 positive 坐标, 如果是 negetive 角度可能会取代 225 degree
但我们计算三角形是不会有 225 degree 的，所以要特别处理一下. 看代码自己试试吧
export function calcHitLineCoordinateByXOrY(
startLineCoordinate: Xy,
endLineCoordinate: Xy,
by: 'x' | 'y',
xOrY: number
): number {
const min = Math.min(startLineCoordinate[by], endLineCoordinate[by]);
const max = Math.max(startLineCoordinate[by], endLineCoordinate[by]);
if (xOrY < min || xOrY > max) {
console.error(`bug ! x or y over line, this is impossible to hit line`);
throw 0;
}
// 对应 startLineCoordinate
endLineCoordinate = {
x: endLineCoordinate.x - startLineCoordinate.x,
y: endLineCoordinate.y - startLineCoordinate.y
}
xOrY = xOrY - startLineCoordinate[by];
const degree = calcDegree(endLineCoordinate);
const degreeInside90Degree = degree % 90;
const radius = calcRadiusByDegreeAndWidtOrhHeight(
degreeInside90Degree,
by === 'x' ? 'width':'height',
Math.abs(xOrY)
);
const widthOrHeight = Math.sqrt(Math.pow(radius, 2) - Math.pow(Math.abs(xOrY), 2));
let resultXOrY = widthOrHeight;
if (by === 'x' && degree > 180) {
resultXOrY *= -1;
}
else if (by === 'y' && degree > 90 && degree < 270) {
resultXOrY *= -1;
}
return resultXOrY + startLineCoordinate[by];
}
3. 直线方程式 Linear equation 和 斜率 slope
通常当我们想算出 2 条线交叉点坐标得时候就会用到下面这个公式了
代码表达
const lineA = {
start: { x: 1, y: 2 },
end: { x: 5, y: 6 }
}
const lineB = {
start: { x: 2, y: 5 },
end: { x: 6, y: 1 }
}那我们要求得是交叉也就是坐标 3, 4
这题就需要直线方程式 和斜率了
直线方程式是这样的
y - y0 = m * (x - x0);
x0, y0 是点的坐标, x 和 y 则是用来求交叉的
m 是 slope , 就是斜率.
我们如果有 2 条线的 x0 y0 和 m
然后把 2 个公式拿来解就可以算出 x 值和 y 值, x, y 就是交叉的坐标了.
那么我们看看这个 m 是这么来的。
最开始我们有 2 条线， 也就是 4 个坐标点.
m = (y1 - y0) / (x1 - x0)
这里有一个重要得点, 哪个坐标算是 0 哪个又应该是 1 呢？
线一定是左到右画的.
所以哪一个点的 x 比较小就是 start
线往上方走, m 将会是 positive
往下走是 negative
平行线则是 0
这个 positive negative 会影响算法的哦，别弄错.
有了这些概念，就容易了
先算出 2 条线分别的 m
然后放入直线公式里，然后就可以对解 2 个公式了
2 个公式就可以解除 x,y 了
下面是用 ts 的表达.
function calcIntersectionCoordinate(aLine: Line, bLine: Line): Xy {
if (aLine.start.x > aLine.end.x) {
aLine = { start: aLine.end, end: aLine.start }
}
if (bLine.start.x > bLine.end.x) {
bLine = { start: aLine.end, end: aLine.start }
}
const aLineSlope = (aLine.end.y - aLine.start.y) / (aLine.end.x - aLine.start.x);
const bLineSlope = (bLine.end.y - bLine.start.y) / (bLine.end.x - bLine.start.x);
const x0 = aLine.start.x;
const y0 = aLine.start.y;
const m0 = aLineSlope;
const x1 = bLine.start.x;
const y1 = bLine.start.y;
const m1 = bLineSlope;
const x = (-(m1 * x1) + y1 - y0 + (m0 * x0)) / (m0 - m1);
const y = (m0 * x) - (m0 * x0) + y0;
return { x, y };
}