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

PHPz
풀어 주다: 2023-09-22 13:01:07
앞으로
812명이 탐색했습니다.

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

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

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

구문

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

    옵션 키

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

    예 1

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

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

      <머리>    <본문> 

    표시되는 속성을 값이 'True'인 키로 전달합니다

    캔버스에 직사각형 개체가 렌더링된 것을 확인할 수 있습니다.

    <스크립트> //캔버스 인스턴스 시작 var canvas = new Fabric.Canvas("캔버스"); canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //사각형 객체 초기화 var 직사각형 = 새 천.({ 왼쪽: 55, 상단: 60, 폭: 170, 신장: 70, 입력: "#f4f0ec", 뇌졸중: "#2a52be", 스트로크 폭: 5, 가시적 : 실제, }); //캔버스에 추가 canvas.add(직사각형);

    '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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!