Javascript Fabric.js：自定义旋转点

我找到了一个解决方法，请参见下面的代码，但我想知道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)
  ]});
}

---

没有内置的方法

默认情况下，fabricjs上的鼠标旋转围绕中心点

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

fabric.Object.prototype.centeredRotation=false

对象将开始围绕原点和原点位置旋转

然后可以为每个对象设置一个特定的原点和原点，可以是数字，并用0到1的值表示对象内部的任何点，我甚至不确定是否可以使用对象外部的点进行设置

在该点上，对象围绕该点旋转，只需将“角度”特性设置为所需角度

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

作为一个侧面，不要设置对象的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会更好地支持你。

没有内置的方法

默认情况下，fabricjs上的鼠标旋转围绕中心点

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

fabric.Object.prototype.centeredRotation=false

对象将开始围绕原点和原点位置旋转

然后可以为每个对象设置一个特定的原点和原点，可以是数字，并用0到1的值表示对象内部的任何点，我甚至不确定是否可以使用对象外部的点进行设置

在该点上，对象围绕该点旋转，只需将“角度”特性设置为所需角度

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

作为一个侧面，不要设置对象的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会更好地支持你。

fabricjs上的旋转是围绕中心点的。 这个功能是开发。。。 但我已经实现了线旋转。 从自定义中心点到鼠标位置重新绘制线。

---

对我来说效果很好。

法布里奇的旋转是围绕中心点的。 这个功能是开发。。。 但我已经实现了线旋转。 从自定义中心点到鼠标位置重新绘制线。

---

这对我来说很好。

我接受你的建议，但我不使用交互式鼠标旋转。然而，JSFIDLE上的示例满足了我的要求。我接受了您的建议，但我不使用交互式鼠标旋转。JSFIDLE上的示例实现了我想要的。嘿，欢迎来到SO！你能在你的答案中添加一些代码示例以使其更清晰吗？谢谢这是我过去的换行代码：init:{}，mouseDown:functionc，a，e{}，mouseUp:functionc，a，e{}，mouseMove:functionc，a，e{var c1={x:a.LT.l*Math.cosMath.atanpr.a+a.LT.c2.left，x1:-1*a.LT.l*Math.cosMath.atanpr.a+a.LT.c2.left，y:a.LT.l*Math.sinMath.atanpr.a+a.LT.l*Math.sinMath.sinMath.atanpr.a+a.LT.c2.top，}a.ln.ln.set{'x1:lp:lp[0].x'：lp[0].x2]lp.c2.top，y1:-1:-a.LT.l*a.LT.l*c.ln.LT.ln.ln.LT.ln.ln.集}:return；@ArreMariana:请你把代码放在你的问题中，我建议的编辑被拒绝了。嘿，欢迎这么做！你能在你的答案中添加一些代码示例以更清楚地说明吗？谢谢！这是我过去的换行代码：init:{}，mouseDown:functionc，a，e{}，mouseUp:functionc，a，e{}，mouseMove:functionc，a，e{var c1={x:a.LT.l*Math.cosMath.atanpr.a+a.LT.c2.left，x1:-1*a.LT.l*Math.cosMath.atanpr.a+a.LT.c2.left，y:a.LT.l*Math.sinMath.atanpr.a+a.LT.c2.top，y1:-1*a.LT.l*Math.sinMath.sinMath.atanpr.a+a.LT.c2.top，}a.LT.ln.LT.ln.set}lp[0]，lp[x].y2]；c.renderAll；}return；@ArreMariana:请你客气一点，把代码放进你的问题中，我建议的编辑被拒绝了。因为没有内置的支持，也许最好的处理方法是把你的对象放在一个组中，调整它相对于组的中心点的位置，然后旋转组。由于没有内置的支持，最好的处理方法可能是将对象放在组内，调整其相对于组中心点的位置，然后旋转组，这是比上述更好的方法。