如何在fabric.js中的一个指定点周围旋转？ [英] how to rotate around one specified point in fabric.js?

问题描述

任何人都知道如何围绕fabric.js中的一个指定点旋转？例如，

Could anybody know how to rotate around one specified point in fabric.js? For example,

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

我想根据它的终点（70,100）而不是它的中心旋转它。

I would like to rotate it based on its end point(70, 100) but not its center.

推荐答案

您可以使用 fabric.util.rotatePoint 。这将让您旋转一行（由 x1 ， y1 ， x2 origin_x 和 origin_y 定义）的原始数据（和 y2 code>）以度为单位的角度（由 angle 定义）。

You can achieve a rotation about an arbitrary point using fabric.util.rotatePoint. This will let you rotate a line (defined by x1, y1, x2 and y2) about an origin (defined by origin_x and origin_y) by an angle in degrees (defined by angle).

$ c> fabric.util.rotatePoint 采用以弧度表示的旋转，即使 angle 通常在使用fabric.js时指定为度数。 / p>

Note that fabric.util.rotatePoint takes a rotation in radians, even though angles are usually specified in degrees when using fabric.js.

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 属性以适当地旋转对象。

You can do the same with other objects, but you may need to provide the angle property to rotate the object appropriately.

这篇关于如何在fabric.js中的一个指定点周围旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！