crop image 需要的基础知识

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 };
}