FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-03 20:57:08

앞으로

996명이 탐색했습니다.

如何使用 FabricJS 禁用画布中的统一缩放？

이 기사에서는 FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법을 알아봅니다. FabricJS에서는 개체를 모서리에서 드래그하면 개체가 비례적으로 변형됩니다. 그러나 uniformScaling 속성을 사용하면 이 동작을 비활성화할 수 있습니다.

Syntax

new fabric.Canvas(element: HTMLElement|String, { uniformScaling: Boolean }: Object)

로그인 후 복사

Parameters

Element - 이 매개변수는
옵션 (선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 및 uniformScaling이 포함된 기타 여러 속성과 같은 캔버스 관련 속성을 변경할 수 있습니다. 객체의 크기를 비례적으로 조정해야 하는지 여부를 결정하는 부울 값을 허용합니다. 기본값은 True입니다.

예: 균일한 스케일링을 값이 False인 키로 전달

코드 예제를 살펴보고 uniformScaling이 False로 설정된 경우 객체의 크기가 어떻게 고르지 않게 조정되는지 살펴보겠습니다. FabricJS 버전 4부터 uniScaleTransform 속성이 제거되고 uniformScaling으로 대체되었습니다.

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
      // UniformScaling is disabled
         uniformScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

로그인 후 복사

Output

FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법은 무엇입니까?

예: 값이 True인 클래스에uniformScaling 키 전달

uniformScaling이 False일 때 불균일하게 크기를 조정하는 방법을 이해했으므로 이를 방지하기 위해uniformScaling을 활성화할 수 있습니다. 코드가 어떻게 생겼는지 봅시다 -

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // UniformScaling is enabled
      uniformScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

로그인 후 복사