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

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

WBOY

풀어 주다： 2023-09-17 16:25:02

앞으로

876명이 탐색했습니다.

如何使用 FabricJS 设置三角形从顶部的位置？

이 튜토리얼에서는 FabricJS를 사용하여 삼각형의 위치를 설정하겠습니다. top 속성을 사용하면 객체의 위치를 조작할 수 있습니다. 기본적으로 상단 위치는 객체 상단을 기준으로 합니다.

구문

 new Fabric.Triangle({ top: Number }: Object)< /pre><h2>매개변수</h2><ul class="list"><li><p><strong> ;/strong><strong> (선택 사항)</strongphpcngtphp cn - 이 매개변수는 삼각형에 대한 추가 사용자 정의를 제공하는 <em>Object</em>입니다. 이 매개변수를 사용하면 속성이 <em>top</em>인 개체와 관련된 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다. </p>
<h2>옵션 키phpcn<ul class='list"'><li>
<p><strong>top</strong> - 이 속성은 캔버스 상단에서 삼각형의 거리를 설정할 수 있는 </p></li></ul><h2> 1</h2> <p><strong>삼각형 개체의 기본 모양</strong></p><p>top 속성이 아닐 때 삼각형 개체가 어떻게 나타나는지 알아보기 위해 코드 예제를 살펴보겠습니다. </ 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> <b>top</b> 속성을 사용하지 않으면 삼각형의 기본 모양을 볼 수 있습니다. </p>
<canvas id="canvas"></canvas>
<스크립트>
//캔버스 인스턴스 시작
var canvas = new Fabric.Canvas("캔버스");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//삼각형 객체 초기화
var 삼각형 = 새로운 Fabric.Triangle({
왼쪽: 105,
폭: 90,
신장: 80,
입력: "#ffc1cc",
뇌졸중: "#fbaed2",
스트로크 폭: 5,
});

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

예 2

맞춤 값을 사용하여 top 속성을 키로 전달

이 예에서는 top 속성을 값 70으로 전달합니다. 이는 삼각형 개체가 위에서 70px 떨어진 곳에 배치된다는 의미입니다.



<머리>



<본문>
최상위 속성을 맞춤 값이 포함된 키로 전달하세요
삼각형 객체가 위에서 70px 위치에 배치된 것을 볼 수 있습니다

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

//삼각형 객체 초기화
var 삼각형 = 새로운 Fabric.Triangle({
왼쪽: 105,
상단: 70,
폭: 90,
신장: 80,
입력: "#ffc1cc",
뇌졸중: "#fbaed2",
스트로크 폭: 5,
});

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



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