用线性代数解前端面试题，了解矩阵变换的魅力

前端

2024-02-01 06:08:32

前言

在前端开发中，我们经常需要处理坐标转换和几何计算。近日，笔者在某面试中遇到一道关于线性代数在前端应用的题目，现将解题思路分享给大家。

题目

给定一个鼠标位置(x, y)，以及一个三角形的三个顶点坐标(x1, y1)、(x2, y2)和(x3, y3)。判断鼠标位置位于三角形的哪个区域：上三角、下三角还是分割线上。

解题思路

我们可以将三角形视为一个矩阵，通过矩阵变换将鼠标坐标从原始坐标系转换到三角形坐标系中，即可判断其所在区域。具体步骤如下：

建立三角形坐标系： 以三角形的三个顶点为基准，建立一个新的坐标系T。
构造变换矩阵： 定义一个变换矩阵M，将原始坐标系中的点(x, y)转换到坐标系T中：
```
M = [
  x2 - x1, x3 - x1
  y2 - y1, y3 - y1
]
```
执行变换： 将原始坐标(x, y)乘以变换矩阵M，得到转换后的坐标(x', y')：
```
[x']   =   [x] * [M]
[y']       [y]
```
判断区域： 根据转换后的坐标(x', y')的符号，判断鼠标位置位于三角形的哪个区域：
- 如果x' > 0且y' > 0，则位于上三角。
- 如果x' > 0且y' < 0，则位于下三角。
- 如果x' = 0或y' = 0，则位于分割线上。

代码实现

function getTriangleArea(x, y, x1, y1, x2, y2, x3, y3) {
  // 构造变换矩阵
  const M = [
    x2 - x1, x3 - x1,
    y2 - y1, y3 - y1
  ];

  // 执行变换
  const [xPrime, yPrime] = [x, y].map(coord => {
    return [coord, 1].dot(M);
  });

  // 判断区域
  if (xPrime > 0 && yPrime > 0) {
    return '上三角';
  } else if (xPrime > 0 && yPrime < 0) {
    return '下三角';
  } else {
    return '分割线';
  }
}