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

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

PHPz

풀어 주다： 2023-08-23 18:01:02

앞으로

1250명이 탐색했습니다.

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

이 튜토리얼에서는 FabricJS를 사용하여 텍스트 상자의 중심 크기 조정을 비활성화하는 방법을 알아봅니다. 텍스트 상자에 작성된 텍스트를 사용자 정의하거나 늘리거나 이동할 수 있습니다. 텍스트 상자를 만들려면 Fabric.Textbox 클래스의 인스턴스를 만들고 이를 캔버스에 추가해야 합니다. 컨트롤로 크기를 조정하는 경우 중앙을 개체의 변형 원점으로 사용하여 centeredScaling 속성에 참값을 할당합니다.

Syntax

new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)

로그인 후 복사

Parameters

text − 이 매개변수는 우리가 사용하려는 텍스트 문자열인 String을 허용합니다. 텍스트 상자에 표시하고 싶습니다.
옵션 (선택 사항) - 이 매개 변수는 텍스트 상자에 대한 추가 사용자 정의를 제공하는 개체 입니다. 이 매개변수를 사용하면 centeredScaling 속성과 관련된 개체의 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다.

Options Keys

centeredScaling - 이 속성은 부울 값을 허용하며 개체가 중심을 변환 원점으로 사용해야 하는지 여부를 제어할 수 있습니다.

예제 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>Passing centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the textbox to see that centered scaling has been enabled</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: true,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </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 centeredScaling property</h2>
   <p>Try scaling the textbox to see that centered scaling has been disabled</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: false,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

로그인 후 복사

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