如何在JavaScript中实现DOMMatrix与DOMVector的相乘？

DOMMatrix API 确实提供了向量与矩阵相乘的能力，核心通过以下两个方法实现：

• 带平移的向量（点）变换：使用 transformPoint() 方法，传入 DOMPoint 对象，返回变换后的点，本质是向量与矩阵的完整仿射相乘（包含平移分量）。
  示例代码：

  // 创建x方向平移10、y方向平移20的矩阵
  const translateMatrix = new DOMMatrix([1, 0, 0, 1, 10, 20]);
  // 定义原始点（向量）
  const originalPoint = new DOMPoint(5, 5);
  // 执行矩阵相乘
  const transformedPoint = translateMatrix.transformPoint(originalPoint);
  // 结果：transformedPoint.x = 15, transformedPoint.y = 25
  

• 纯向量（忽略平移）变换：使用 transformVector() 方法，传入 DOMPoint 对象，会忽略矩阵中的平移分量，仅执行线性变换（缩放、旋转、剪切等），适合纯向量运算场景。
  示例代码：

  // 创建x、y方向放大2倍的缩放矩阵
  const scaleMatrix = new DOMMatrix([2, 0, 0, 2, 0, 0]);
  // 定义原始向量
  const originalVector = new DOMPoint(3, 4);
  // 执行纯向量矩阵相乘
  const transformedVector = scaleMatrix.transformVector(originalVector);
  // 结果：transformedVector.x = 6, transformedVector.y = 8
  

注意：DOMPoint 支持 z 和 w 属性，上述方法同样适用于3D向量与3D矩阵的相乘操作。

内容的提问来源于stack exchange，提问作者Adam Gawne-Cain