FabricJS를 사용하여 왼쪽에서 삼각형의 위치를 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 왼쪽에서 삼각형의 위치를 설정하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-11 17:05:09

앞으로

1187명이 탐색했습니다.

如何使用 FabricJS 设置三角形从左开始的位置？

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

불투명도, 획과 해당 치수를 사용하여 삼각형 개체를 조작합니다. left 속성을 사용하여 왼쪽의 위치를 변경할 수 있습니다.

구문

new Fabric.Triangle( { 왼쪽: 숫자 }: 객체 ) </p>
<h2>매개변수</h2>
<ul class="list"><li>
<p><strong>옵션</strong><strong> (선택 사항)phpcnltphp cn /strong> - 이 매개변수는 삼각형에 대한 추가 사용자 정의를 제공하는 <em>객체</em>입니다. 이 매개변수를 사용하면 속성이 <em>left</em>인 개체와 관련된 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다. </p></li></ul><h2>옵션 키</h2phpcngtphp cn<ul class="list" "><li><p><strong>왼쪽</ Strong> - 이 속성은 개체의 왼쪽 위치를 설정하는 </p> 값을 허용합니다. 이 값은 개체가 캔버스의 왼쪽 가장자리에서 얼마나 멀리 떨어져 있는지를 결정합니다. </ li></ul><h2>예제 1</h2><p><strong>삼각형 개체의 기본 배치</strongphpcn gtphpcn</p><p>코드를 살펴보겠습니다. 위치가 변경되지 않은 경우 캔버스에서 삼각형 객체의 기본 배치를 이해하는 예 </p><pre class="demo-code notranslate 언어-javascript" data-lang="javascript"><!DOCTYPE HTML>
<html>
<머리>
<!--Fabric JS 라이브러리 추가-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</머리>
<본문>
<h2>삼각형 객체의 기본 배치</h2>
<p>삼각형의 기본 위치를 볼 수 있습니다</p>
<canvas id="canvas"></canvas>
<스크립트>
//캔버스 인스턴스 시작
var canvas = new Fabric.Canvas("캔버스");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//삼각형 객체 초기화
var 삼각형 = 새로운 Fabric.Triangle({
상단: 50,
입력: "#b0e0e6",
신장: 90,
폭: 100,
});

//캔버스에 추가
canvas.add(삼각형);
</스크립트>
</body>
</html>

예제 2

왼쪽 속성을 키로 전달

예를 들어 left 속성에 맞춤 값을 할당하고 있습니다. 숫자를 허용하므로 왼쪽부터 위치를 나타내는 숫자 값을 할당해야 합니다.



<머리>



<본문>
왼쪽 속성을 키로 전달하세요
삼각형이 왼쪽에서 80px 위치에 있는 것을 볼 수 있습니다. 

<스크립트>
//캔버스 인스턴스 시작
var canvas = new Fabric.Canvas("캔버스");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//삼각형 객체 초기화
var 삼각형 = 새로운 Fabric.Triangle({
왼쪽: 80,
상단: 50,
입력: "#b0e0e6",
신장: 90,
폭: 100,
});

//캔버스에 추가
canvas.add(삼각형);


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