FabricJS를 사용하여 원의 중심 크기 조정을 비활성화하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 원의 중심 크기 조정을 비활성화하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-07 17:13:02

앞으로

1419명이 탐색했습니다.

如何使用 FabricJS 禁用 Circle 的居中缩放？

이 튜토리얼에서는 FabricJS를 사용하여 원의 중심 크기 조정을 비활성화하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 컨트롤로 크기를 조정하는 경우 중앙을 개체의 변형 원점으로 사용하여 centeredScaling 속성에 참값을 할당합니다.

Syntax

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

로그인 후 복사

Parameters

Options(선택 사항) - 이 매개 변수는 원에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 centeredScaling 속성

옵션 키

centeredScaling과 관련된 개체의 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다. - 이 속성은 boolean을 허용합니다. 값. 이 속성이 True인 경우 개체는 중심을 변환 원점으로 사용합니다.

예제 1

centeredScaling을 키로 전달하고 "true" 값 할당

코드를 살펴보고 centeredScaling

할 때 둥근 객체가 어떻게 동작하는지 살펴보겠습니다. 속성이 활성화되었습니다. 물체를 확대할 때 변형의 원점은 원의 중심입니다.

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </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: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true
         });

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

로그인 후 복사

예제 2

centeredScaling 속성 비활성화

false 값을 지정하여 centeredScaling 속성을 비활성화할 수 있습니다. 그러면 원이 더 이상 원의 중심을 변환의 중심으로 사용하지 않게 됩니다. 이를 증명하는 코드는 다음과 같습니다

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false
         });

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

로그인 후 복사

위 내용은 FabricJS를 사용하여 원의 중심 크기 조정을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!