Fabric.js：自定义旋转点

Question

我在这里找到了一个解决方法（参见下面的代码），但我想知道Fabric是否内置支持将对象的旋转点设置为特定位置。

function rotateObject(fabObj, angleRadian, pivotX, pivotY) {
  ty = pivotY - fabObj.height / 2.0;
  tx = pivotX - fabObj.width / 2.0;
  if (angleRadian >= Math.PI * 2) {
    angleRadian -= Math.PI * 2;
  }
  angle2 = Math.atan2(ty, tx);
  angle3 = (2 * angle2 + angleRadian - Math.PI) / 2.0;
  pdist_sq = tx * tx + ty * ty;
  disp = Math.sqrt(2 * pdist_sq * (1 - Math.cos(angleRadian)));
  fabObj.set({transformMatrix:[
    Math.cos(angleRadian),
    Math.sin(angleRadian),
    -Math.sin(angleRadian),
    Math.cos(angleRadian),
    disp * Math.cos(angle3),
    disp * Math.sin(angle3)
  ]});
}

Answer 1

fabricjs上的旋转位于中心点附近。 这个功能正在开发......但我实现了线路旋转。 从自定义中心点重新绘制线到鼠标位置。 这对我来说很有用。

Answer 2

没有内置方法。

默认情况下，fabricjs上的鼠标旋转位于中心点附近。

如果停用对象上的centeredRotation，请将其设置为false：

fabric.Object.prototype.centeredRotation = false

对象将开始围绕originX和originY位置旋转。

然后你可以为每个对象设置一个特定的originX和originY，它可以是数字并代表对象内的任何一个点（值范围从0到1）我甚至不确定你是否可以用对象外的点来做。

此时，对象围绕该点旋转，只需将angle属性设置为所需的角度即可。

考虑到现在位置也与该起源有关。

作为一方，不要设置对象的transformMatrix。 不受支持，如果与控件交互，将为您提供奇怪的控件。

在您的具体示例中，一旦找到矩阵：

var matrix = [
  Math.cos(angleRadian),
  Math.sin(angleRadian),
  -Math.sin(angleRadian),
  Math.cos(angleRadian),
  disp * Math.cos(angle3),
  disp * Math.sin(angle3)
];

var options = fabric.util.qrDecompose(matrix);

object.set(options);
object.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center');

这应该给你相同的效果，但更好地支持fabricjs。