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

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

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

Syntax

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

Parameters

• < strong>Options(선택 사항) - 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 Object입니다. 이 매개변수를 사용하면 angle 및 centeredRotation 속성과 관련된 삼각형의 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다. < /p>

Option Key

• Angle - 이 속성은 삼각형의 회전 각도를 도 단위로 지정하는 Number를 허용합니다.

• centeredRotation - 이 속성은 삼각형의 중심이 변환의 원점인지 여부를 결정하는 부울

예제 1

각도를 키로 전달 사용자 정의 값을 사용하고 삼각형의 중심 회전을 비활성화합니다

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

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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：假，
角度：15，
});

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

예제 2