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

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

PHPz

풀어 주다： 2023-08-31 11:21:06

앞으로

899명이 탐색했습니다.

如何使用 FabricJS 禁用圆的居中旋转？

이 튜토리얼에서는 FabricJS를 사용하여 원의 중심 회전을 비활성화하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들기 위해 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가하겠습니다. 기본적으로 FabricJS의 모든 객체는 중심을 회전점으로 사용합니다. 그러나 centeredRotation 속성을 사용하여 이 동작을 변경할 수 있습니다.

Syntax

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

로그인 후 복사

Parameters

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

Option Key

centeredRotation - 이 속성은 컨트롤을 통해 회전할 때 개체가 변환 원점을 중심점으로 사용할지 여부를 제어할 수 있는 Boolean < /strong> 값을 허용합니다. 기본값은 True입니다.

예제 1

회전의 기본 동작 > FabricJS의 원

원형 개체의 기본 동작을 설명하는 예를 살펴보겠습니다. centeredRotation 속성은 기본적으로 True로 설정되어 있으므로 원형 객체는 중심을 회전점으로 사용합니다.

<!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 rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default 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",
         });

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

로그인 후 복사

예제 2

값이 "false"인 centeredRotation 키 전달

이제 기본 동작을 살펴보았으므로 centeredRotation 속성이 다음과 같이 지정될 때 어떤 일이 발생하는지 이해하기 위해 코드 조각을 살펴보겠습니다. 거짓 .
rreee
위 내용은 FabricJS를 사용하여 원의 중심 회전을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!