FabricJS를 사용하여 원의 패딩을 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 원의 패딩을 설정하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-08-25 10:45:05

앞으로

1070명이 탐색했습니다.

如何使用 FabricJS 设置圆的填充？

이 튜토리얼에서는 FabricJS를 사용하여 원의 패딩을 설정하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 캔버스 내 원형 개체의 위치, 색상, 불투명도 및 크기를 지정할 수 있는 것처럼 원형 개체의 채우기도 설정할 수 있습니다. 이는 padding 속성을 사용하여 수행할 수 있습니다.

Syntax

new fabric.Circle({ padding : Number }: Object)

로그인 후 복사

Parameters

Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 기타 여러 속성과 같이 padding이 속성인 개체와 관련된 속성을 변경할 수 있습니다.

Option Key

Padding - 이 속성은 numeric 값을 허용합니다. 할당된 값은 원형 객체와 제어 경계 상자 사이의 거리를 결정합니다.

예제 1

padding을 사용하지 않은 경우의 기본 모습

padding 속성을 사용하지 않은 경우 원형 객체의 모습을 표시하는 코드를 살펴보겠습니다. 보시다시피, 개체와 주변 제어 경계 사이에는 공간이 없습니다. 이는 원과 제어 경계 상자 사이에 제로 패딩이 있음을 의미합니다.

<!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>Setting the padding of circle using FabricJS</h2>
      <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven&#39;t used any <b>padding</b> here. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

로그인 후 복사

예제 2

패딩 속성을 키로 전달

이 예에서는 패딩 속성을 값 7의 키로 전달합니다. 이는 원형 개체와 모든 컨트롤 테두리 사이의 거리가 7px임을 의미합니다.
rreee
위 내용은 FabricJS를 사용하여 원의 패딩을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!