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

FabricJS 캔버스에서 통합 크기 조정을 활성화/비활성화하기 위해 사용자 정의 키를 설정하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-09-07 11:57:08

앞으로

1000명이 탐색했습니다.

如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？

이 기사에서는 FabricJS에서 통합 스케일링을 활성화/비활성화하기 위해 사용자 정의 키를 설정하는 방법을 알아봅니다. FabricJS에서는 개체를 모서리에서 드래그하면 개체가 비례적으로 변형됩니다. 이를 균일한 스케일링이라고 합니다. 그러나 uniScaleKey를 사용하여 이 동작을 활성화/비활성화할 수 있습니다.

Syntax

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

로그인 후 복사

Parameters

element - 이 매개변수는 요소 자체이며 Document 를 사용하여 파생될 수 있습니다. getElementById() 또는 요소 자체의 ID입니다. FabricJS 캔버스는 이 요소에서 초기화됩니다.

Options(선택 사항) - 이 매개변수는 캔버스에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 및 캔버스와 관련된 기타 여러 속성을 변경할 수 있으며 그중 uniScaleKey가 하나의 속성입니다. 통합 크기 조정을 전환하는 키를 결정하는 문자열 값을 허용합니다. 기본값은 ShiftKey입니다.

예제 1

"altKey" 값으로 uniScaleKey 속성 전달

FabricJS에서 통합 크기 조정을 비활성화하는 사용자 정의 키에 대한 코드 예를 살펴보겠습니다. 여기서는 uniScaleKey를 "altKey"로 설정했습니다.

<!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 a custom key to enable/disable uniform scaling on a canvas</h2>
   <p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
   // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: true,
         uniScaleKey: "altKey"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
   </script>
</body>
</html>

로그인 후 복사