FabricJS를 사용하여 캔버스에서 중앙 크기 조정을 활성화하는 방법은 무엇입니까?
- 王林앞으로
- 2023-08-29 13:29:02890검색
이 기사에서는 FabricJS를 사용하여 캔버스에서 중앙 크기 조정을 활성화하는 방법을 알아봅니다. FabricJS에서는 개체를 모서리에서 드래그하면 개체가 비례적으로 변형됩니다. centeredScaling 속성을 사용하여 중심을 변환의 원점으로 사용할 수 있습니다.
Syntax
new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)Parameters
Element - 이 매개변수는
Options(선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 등 캔버스와 관련된 여러 속성을 변경할 수 있으며, 그 중 centeredScaling이 하나의 속성입니다. 객체가 중심점을 변환 원점으로 사용해야 하는지 여부를 결정하는 부울 값을 허용합니다. 기본값은 거짓입니다.
예제 1
값이 false인 centeredScaling 키 전달
centeredScaling이 False로 설정된 경우 객체의 크기가 어떻게 조정되는지 코드 예제를 살펴보겠습니다.
<!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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
centeredScaling 키를 값이 True인 클래스에 전달
기본적으로 centeredScaling 키는 False로 설정됩니다. 따라서 객체가 자신의 중심을 변환의 원점으로 사용할 수 있도록 클래스에 키를 전달하고 실제 값을 부여해야 합니다.
rreee위 내용은 FabricJS를 사용하여 캔버스에서 중앙 크기 조정을 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제