javascript - Fabric .js : custom rotation point

Question

我找到了解决方法 here (见下面的代码)，但我想知道 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 上的鼠标旋转围绕中心点。

如果您停用对象的 centeredRotation，将其设置为 false:

fabric.Object.prototype.centeredRotation = false

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

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

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

考虑现在位置也是相对于原点的。

另一方面，不要设置对象的 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 更好的支持。