FabricJS를 사용하여 직사각형의 x축 기울기 각도를 설정하는 방법은 무엇입니까?

이 튜토리얼에서는 FabricJS를 사용하여 직사각형의 x축 기울기 각도를 설정하는 방법을 알아봅니다. Rectangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 직사각형을 생성하려면 Fabric.Rect 클래스의 인스턴스를 생성하여 캔버스에 추가해야 합니다.

직사각형 개체는 크기 변경, 배경색 추가, X축의 기울기 각도 변경 등 다양한 방법으로 사용자 정의할 수 있습니다. skewX 속성을 사용하여 이를 수행할 수 있습니다.

Syntax

new Fabric.Rect({ skewX : Number }: Object )

Parameters

• Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 기타 여러 속성과 같이 skewX가 속성인 개체와 관련된 속성을 변경할 수 있습니다.

Option Key

• skewX - 이 속성은 개체 X축의 기울기 각도를 결정하는 number< /strong>를 허용합니다.

예제 1

skewX 속성이 설정되지 않은 경우 적용

skewX 속성이 적용되지 않은 경우 직사각형 객체가 어떻게 표시되는지 코드 예제를 살펴보겠습니다. 이 경우 직사각형 개체는 어떤 각도에서도 기울어져 표시되지 않습니다.

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

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

예제 2

skewX를 키로 전달하고 맞춤 값을 할당합니다.

이 예에서는 SkewX에 숫자 값을 할당하는 방법을 살펴보겠습니다. 재산. 전달된 값은 X축을 따른 기울기를 결정합니다.

rreee

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