Fabric.js ActiveSelection _calcRotateMatrix() 方法

_calcRotateMatrix() 是 Fabric.js 中 ActiveSelection 对象的一个方法，它用来计算选中对象的旋转变换矩阵。在 Fabric.js 中，矩阵是一个用来描述变换的数学对象，它可以用来表示平移、旋转、缩放等变换操作。

方法签名

_calcRotateMatrix(sin, cos, ignoreOrigin)

参数说明

• sin: 旋转变换的正弦值
• cos: 旋转变换的余弦值
• ignoreOrigin: 是否忽略原点进行旋转变换，可选，默认为 false

返回值

返回一个 3x3 的矩阵，用来描述选中对象的旋转变换。

方法实现

_calcRotateMatrix: function(sin, cos, ignoreOrigin) {
  if (typeof ignoreOrigin === 'undefined') {
    ignoreOrigin = false;
  }

  var center = ignoreOrigin ? { x: 0, y: 0 } : this.getCenterPoint();
  var theta = degreesToRadians(this.angle);
  var options = fabric.util.qrDecompose(this.calcTransformMatrix());
  options.angle = theta;

  var translateMatrix = fabric.util.createMatrix(options.translateX, options.translateY);
  var rotateMatrix = fabric.util.createMatrix(cos, sin, -sin, cos);
  var centerMatrix = fabric.util.createMatrix(1, 0, 0, 1, center.x, center.y);
  var centerTranslateMatrix = fabric.util.createMatrix(1, 0, 0, 1, -center.x, -center.y);

  return centerMatrix.multiply(rotateMatrix).multiply(centerTranslateMatrix).multiply(translateMatrix);
}

方法解析

1. 判断是否忽略原点进行旋转变换，如果忽略，则将中心点设置为原点。
2. 将选中对象的当前角度转化为弧度。
3. 使用 QR 分解分解选中对象的当前变换矩阵，并将角度替换为当前角度。
4. 计算平移、旋转、中心点、中心点反平移矩阵。
5. 将中心点矩阵乘以旋转矩阵，再乘以中心点反平移矩阵，最后乘以平移矩阵，得到最终的旋转变换矩阵。

使用示例

var activeSelection = new fabric.ActiveSelection(objects, options);
var sin = Math.sin(degreesToRadians(angle));
var cos = Math.cos(degreesToRadians(angle));
var transformMatrix = activeSelection._calcRotateMatrix(sin, cos, ignoreOrigin);
activeSelection.transform(transformMatrix);

本方法常用于旋转选中对象，可通过设置 sin 和 cos 分别表示旋转变换的正弦值和余弦值。如果需要忽略中心点进行旋转，则需要将 ignoreOrigin 设置为 true。最后，将计算出的变换矩阵应用到选中对象上即可。