svg 中的矩阵

从 18 年到 22 年,第一次知道 svg 中其实已经存在矩阵相关的 API,我们先来看一下通过矩阵运算实现的一个例子。

See the Pen transform ellipse by zeng (@zengxiaoluan) on CodePen.

核心代码是这样的:

  let m4 = translate2origin.multiply(ellOldMatrix);
  let m8 = rotate2zeroDegree.multiply(m4);
  let m5 = scaleMatrix.multiply(m8);
  let m7 = rotateBackMatrix.multiply(m5);
  let m6 = translateBackMatrix.multiply(m7);

这段 api 读起来,有点费劲。按照我们人类的语言,矩阵乘法运算应该是将矩阵 ellOldMatrix 移到原点,再旋转 -a 度,再缩放 x 倍,再旋转 a 度,再平移到原来的位置。

我们需要将 api 重新设计一下。类似这样:

class SelfMatrix {
  matrix;
  constructor(m) {
    this.matrix = m;
  }
  multiply(m) {
    let m1 = m.multiply(this.matrix);
    return new SelfMatrix(m1);
  }
}

就能愉快的链式调用了。

new SelfMatrix(ellOldMatrix)
  .multiply(translate2origin)
  .multiply(rotate2zeroDegree)
  .multiply(scaleMatrix)
  .multiply(rotateBackMatrix)
  .multiply(translateBackMatrix);

作者: 曾小乱

喜欢写点有意思的东西

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据