FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-03 20:57:08872검색
이 기사에서는 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
.gif)
예: 값이 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>output
.gif)
위 내용은 FabricJS를 사용하여 캔버스에서 통합 크기 조정을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제