FabricJS를 사용하여 직사각형의 회전 각도를 설정하는 방법은 무엇입니까?

이 튜토리얼에서는 FabricJS를 사용하여 직사각형의 회전 각도를 설정하겠습니다. Rectangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 직사각형을 만들려면 fabric.Rect 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다.

angle 속성은 FabricJS에서 객체의 2D 회전 각도를 정의합니다. 또한 직사각형의 중심점을 사용할 수 있는 centeredRotation 속성도 있습니다. 변신의 원점으로 삼는다.

Syntax

new Fabric.Rect({ angle: Number, centeredRotation: Boolean }: Object)

Parameters

• Options(선택 사항) - 이 매개 변수는 직사각형인 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 angle 및 centeredRotation 속성이 있는 직사각형과 관련된 기타 여러 속성을 변경할 수 있습니다.

Option Key

• Angle - 이 속성은 지정된 number직사각형의 회전 각도(도)를 허용합니다.

• centeredRotation - 이 속성은 직사각형의 중심이 변환 원점인지 여부를 결정하는 Boolean 값을 허용합니다.

예제 1

맞춤 값을 사용하여 각도를 키로 전달하고 직사각형의 중심 회전을 비활성화합니다.

FabricJS에서 직사각형의 회전 각도를 설정하는 코드 예를 살펴보겠습니다. 음의 각도는 시계 반대 방향을 지정하고, 양의 각도는 시계 방향을 지정합니다. centeredRotation에 False 값을 할당했으므로 모서리를 회전 중심으로 사용하여 직사각형이 회전됩니다.

将角度作为带有自定义值的键并禁用矩形的居中旋转
旋转矩形可以看到其居中旋转已被禁用。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：125，
顶部：90，
宽度：170，
身高：70，
填写：“#cf1020”，
居中旋转：假，
角度：15，
});

// 将其添加到画布中
canvas.add(矩形);

예제 2

사각형의 중심 회전 활성화

이 예에서 centeredRotation 속성을 true로 설정하면 이제 직사각형은 중심을 회전 중심으로 사용합니다. 버전 1.3.4 이전에는 centeredScaling 및 centeredRotation은 다음과 같은 패키지에 포함되어 있습니다. centerTransform.

rreee

위 내용은 FabricJS를 사용하여 직사각형의 회전 각도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!