FabricJS를 사용하여 직사각형의 Y축 기울기 각도를 어떻게 설정하나요?
- WBOY앞으로
- 2023-09-09 21:33:031204검색
이 튜토리얼에서는 y축의 기울기 각도를 설정하는 방법을 배웁니다. FabricJS를 사용한 직사각형. 직사각형은 에서 제공하는 다양한 도형 중 하나입니다. FabricJS. 직사각형을 생성하려면 인스턴스를 생성해야 합니다. fabric.Rect 클래스를 만들어 캔버스에 추가합니다.
직사각형 물체는 크기 변경, 배경색을 추가하거나 Y축의 기울기 각도를 변경하세요. 우리가 할 수 있는 일 이는 skewY 속성을 사용하여 달성됩니다.
Syntax
new fabric.Rect({ skewY : Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과skewY가 속성인 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.
Option Key
skewY - 이 속성은 y축에서 개체의 각도 기울기를 결정하는 숫자를 허용합니다.
예제 1
skewY 속성이 적용되지 않은 경우 p>
코드 예제를 통해 skewY 속성이 적용되지 않은 경우 직사각형 object이 어떻게 표시되는지 살펴보겠습니다. 이 경우 직사각형 개체에는 각도 기울기가 없습니다.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>When the skewY property is not applied</h2>
<p>You can see there is no skew by any angle on the rectangle by default</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 105,
top: 70,
width: 170,
height: 70,
fill: "#8f9779",
stroke: "#8fbc8f",
strokeWidth: 9,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>예제 2
skewY를 키로 전달하고 맞춤 값을 할당합니다.
이 예에서는 SkewY의 숫자 값을 할당하는 방법을 살펴보겠습니다. 재산. 전달된 값은 Y축을 따른 기울기를 결정합니다.
rreee위 내용은 FabricJS를 사용하여 직사각형의 Y축 기울기 각도를 어떻게 설정하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제