FabricJS를 사용하여 x축에서 삼각형의 기울기 각도를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-05 22:37:12823검색
이 튜토리얼에서는 FabricJS를 사용하여 삼각형의 x축 기울기 각도를 설정하는 방법을 알아봅니다. Triangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 삼각형을 생성하려면 fabric.Triangle 클래스의 인스턴스를 생성하여 캔버스에 추가해야 합니다.
크기를 변경하거나, 배경색을 추가하거나, x축의 기울기 각도를 변경하여 삼각형 개체를 맞춤 설정할 수 있습니다. skewX 속성을 사용하여 이를 달성할 수 있습니다.
구문
new fabric.Triangle({skewX: Number }: Object ) 매개변수
옵션(옵션 옵션) − 이 매개변수는 삼각형의 추가 사용자 정의를 위한 옵션을 제공하는 객체입니다. 이 매개변수를 사용하면 개체의 색상, 커서, 획 너비 및 skewX 속성과 관련된 기타 여러 속성을 변경할 수 있습니다.
옵션 키
skewX - 이 속성은 x축을 따라 개체의 기울기 각도를 결정하는 숫자 값을 허용합니다.
예시 1
skewX 속성이 적용되지 않은 경우
SkewX 속성이 적용되지 않았을 때 삼각형 객체가 어떻게 보이는지 코드 예제를 살펴보겠습니다. 이 경우 삼각형 개체는 어떤 각도로도 기울어지지 않습니다.<!DOCTYPE html>
<html>의 중국어 번역은 다음과 같습니다. <html>
<head>의 중국어 번역은 다음과 같습니다.
<!-- Fabric JS 라이브러리 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>의 중국어 번역은 다음과 같습니다. </head>
<body>의 중국어 번역은 다음과 같습니다.
<h2>skewX 속성이 적용되지 않은 경우</h2>
<p>기본적으로 삼각형이 어떤 각도로도 기울어지지 않은 것을 볼 수 있습니다</p>
<canvas id="canvas"></canvas>
<script>의 중국어 번역은 다음과 같습니다. <script>
// 캔버스 인스턴스 초기화
var canvas = new fabric.Canvas("캔버스");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 삼각형 객체 초기화
var 삼각형 = 새 fabric.Triangle({
왼쪽: 120,
상단: 70,
폭: 90,
신장: 80,
채우기: "#b7410e"，
스트로크: "#f5deb3",
(참고: 이것은 공백을 나타내는 HTML 코드 조각입니다.)
스트로크폭: 7,
});
//캔버스에 추가
Canvas.add(삼각형);
</스크립트>
</body>의 중국어 번역은 다음과 같습니다. </body>
</html>예 2
키로 skewX를 입력하고 맞춤 값을 할당합니다.
이 예에서는 skewX 속성에 숫자 값을 할당하는 방법을 살펴보겠습니다. 전달된 값은 X축을 따른 기울기 정도를 결정합니다.
<!DOCTYPE html>
<html>의 중국어 번역은 다음과 같습니다. <html>
<head>의 중국어 번역은 다음과 같습니다.
<!-- Fabric JS 라이브러리 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>의 중국어 번역은 다음과 같습니다. </head>
<body>의 중국어 번역은 다음과 같습니다.
<h2>skewX를 키로 전달하고 여기에 맞춤 값 할당</h2>
<p>삼각형이 x축에서 50도 각도로 기울어진 것을 볼 수 있습니다</p>
<canvas id="canvas"></canvas>
<script>의 중국어 번역은 다음과 같습니다. <script>
// 캔버스 인스턴스 초기화
var canvas = new fabric.Canvas("캔버스");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 삼각형 객체 초기화
var 삼각형 = 새 fabric.Triangle({
왼쪽: 120,
상단: 70,
폭: 90,
키: 80,
채우기: "#b7410e"，
스트로크: "#f5deb3",
(참고: 이것은 공백을 나타내는 HTML 코드 조각입니다.)
스트로크폭: 7,
스큐X: 50,
});
//캔버스에 추가
Canvas.add(삼각형);
</스크립트>
</body>의 중국어 번역은 다음과 같습니다. </body>
</html>의 중국어 번역은 다음과 같습니다: 위 내용은 FabricJS를 사용하여 x축에서 삼각형의 기울기 각도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제