如何围绕织物中的一个指定点旋转.js

how to rotate around one specified point in fabric.js?

本文关键字：一个 js 旋转 何围绕      更新时间：2023-09-26

有人知道如何围绕织物中的一个指定点旋转.js吗？例如

var line1 = new fabric.Line([70, 20, 70, 100], {
    stroke: "#000000",
    strokeWidth: 6
});

我想根据它的终点(70、100(而不是它的中心来旋转它。

您可以使用

fabric.util.rotatePoint 实现围绕任意点的旋转。这将允许您围绕原点(由origin_x和origin_y定义(旋转一条线(由x1、y1、x2和y2定义(的角度

(由angle定义(。

请注意，fabric.util.rotatePoint以弧度为单位旋转，尽管在使用织物.js时angle通常以度为单位指定。

var rotation_origin = new fabric.Point(origin_x, origin_y);
var angle_radians = fabric.util.degreesToRadians(angle);
var start = fabric.util.rotatePoint(new fabric.Point(x1,y1), rotation_origin, angle_radians);
var end = fabric.util.rotatePoint(new fabric.Point(x2,y2), rotation_origin, angle_radians);
var line1 = new fabric.Line([start.x, start.y, end.x, end.y], {
    stroke: '#000000',
    strokeWidth: 6
});

您可以对其他对象执行相同的操作，但可能需要提供 angle 属性才能相应地旋转对象。

目前无法围绕任意点旋转。变换的起源——缩放和旋转——目前处于对象的中心。我们计划在不久的将来添加对任意转换源的支持。

相关文章：