FabricJS를 사용하여 직사각형을 보이지 않게 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 직사각형을 보이지 않게 만드는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-09-22 13:01:07

앞으로

879명이 탐색했습니다.

如何使用 FabricJS 使矩形不可见？

이 튜토리얼에서는 FabricJS를 사용하여 직사각형을 보이지 않게 만드는 방법을 알아봅니다. Rectangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 직사각형을 생성하려면 fabric.Rect 클래스의 인스턴스를 생성하여 캔버스에 추가해야 합니다.

크기 변경, 배경색 추가, 표시 또는 숨기기 등 다양한 방법을 사용할 수 있습니다. visible 속성을 사용하여 이를 수행할 수 있습니다.

구문

new Fabric.Rect( {visible: Boolean }: Object)

매개변수< h2>

옵션(선택 사항) - 이 매개변수는 객체 우리 직사각형으로. 이 매개변수를 사용하면 속성이 visible인 개체와 관련된 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다.

옵션 키

표시;/ Strong> - 이 속성은 개체를 캔버스에 렌더링할 수 있게 해주는 부울 값을 허용합니다. 기본값은 true입니다.

예 1

표시 속성 전달 'true' 값을 갖는 키로

visible을 전달할 때 무슨 일이 일어나는지 이해하기 위해 코드 예제를 살펴보겠습니다. 부동산의 진정한 가치. 값을 "True"로 지정함으로써 우리는 직사각형 개체가 캔버스에 렌더링됩니다. 이는 기본 동작이기도 합니다. FabricJS.

<!DOCTYPE html>
<html>
<머리>
<!--Fabric JS 라이브러리 추가-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</머리>
<본문>
<h2>표시되는 속성을 값이 'True'인 키로 전달합니다</h2>
<p>캔버스에 직사각형 개체가 렌더링된 것을 확인할 수 있습니다. </p>
<canvas id="canvas"></canvas>
<스크립트>
//캔버스 인스턴스 시작
var canvas = new Fabric.Canvas("캔버스");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//사각형 객체 초기화
var 직사각형 = 새 천.({
왼쪽: 55,
상단: 60,
폭: 170,
신장: 70,
입력: "#f4f0ec",
뇌졸중: "#2a52be",
스트로크 폭: 5,
가시적 : 실제,
});

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

예

'False' 값을 사용하여 표시 속성을 키로 전달

< ;p> ;이 예에서는 visible 속성을 값이 false인 키로 전달합니다. false 값을 지정하면 직사각형 객체가 캔버스에 렌더링되지 않습니다. 개체를 "보이지 않게" 만드는 것이 아니라 완전히 제거합니다. 코드를 삭제하지 않고 캔버스에서 개체를 제거하는 데 사용할 수 있습니다.



<머리>



<본문>
표시되는 속성을 'False' 값을 갖는 키로 전달합니다
직사각형 개체가 캔버스에 렌더링되지 않은 것을 확인할 수 있습니다. 

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

//사각형 객체 초기화
var 직사각형 = 새 천.({
왼쪽: 55,
상단: 60,
폭: 170,
신장: 70,
입력: "#f4f0ec",
뇌졸중: "#2a52be",
스트로크 폭: 5,
표시: 거짓,
});

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

위 내용은 FabricJS를 사용하여 직사각형을 보이지 않게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!