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

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

WBOY

풀어 주다： 2023-08-26 22:49:11

앞으로

720명이 탐색했습니다.

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

이 튜토리얼에서는 FabricJS를 사용하여 원을 보이지 않게 만드는 방법을 알아봅니다. Circle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 원을 만들려면 fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 원 개체는 크기 변경, 배경색 추가, 표시 여부 지정 등 다양한 방법으로 사용자 정의할 수 있습니다. visible 속성을 사용하여 이를 달성할 수 있습니다.

Syntax

new fabric.Circle( { visible: Boolean }: Object)

로그인 후 복사

Parameters

options(선택 사항) - 이 매개 변수는 원의 추가 사용자 정의를 위한 옵션을 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 visible이 포함된 기타 여러 속성 등 이 개체와 관련된 속성을 변경할 수 있습니다.

Option key

visible - 이 속성은 개체를 캔버스에 렌더링할 수 있는 boolean 값을 허용합니다. 기본값은 True입니다.

예제 1

visible 속성을 키로 전달하고 'true' 값을 지정합니다.

visible 속성에 True 값을 전달하면 어떤 일이 발생하는지 이해하기 위해 코드를 살펴보겠습니다. 값을 'true'로 지정하면 원 개체가 캔버스에 렌더링됩니다. 이는 FabricJS의 기본 동작이기도 합니다.

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>Making a circle invisible using FabricJS</h2>
      <p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior. So, even if we don&#39;t apply the <b>visible</b> property, it will be set to True, by defalt. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            visible: true
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

로그인 후 복사

예제 2

visible 속성을 키로 전달하고 이를 'false' 값으로 설정합니다.

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

rreee

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