FabricJS 캔버스에서 통합 크기 조정을 활성화/비활성화하기 위해 사용자 정의 키를 설정하는 방법은 무엇입니까?
- PHPz앞으로
- 2023-09-07 11:57:08916검색
이 기사에서는 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>예제 2
'ctrlKey' 값으로 uniScaleKey 속성 전달
'ctrlKey''도 수정자 키이므로 uniScaleKey 속성의 값으로 전달할 수도 있습니다. uniScaleKey에 NULL 값이나 수정자 키가 아닌 키가 지정되면 해당 기능이 비활성화됩니다.
이 예에서는 uniformScaling에 잘못된 값이 할당되었습니다. 이는 해당 기능이 비활성화되었음을 의미합니다. ctrlKey를 누르면 균일한 크기 조정이 다시 활성화됩니다.
rreee위 내용은 FabricJS 캔버스에서 통합 크기 조정을 활성화/비활성화하기 위해 사용자 정의 키를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!