FabricJS를 사용하여 타원의 회전 각도를 설정하는 방법은 무엇입니까?
- PHPz앞으로
- 2023-09-10 13:29:021450검색
이 튜토리얼에서는 FabricJS를 사용하여 타원의 회전 각도를 설정합니다. 타원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 타원을 생성하려면 Fabric.Ellipse 클래스의 인스턴스를 생성하여 캔버스에 추가해야 합니다. FabricJS의 angle 속성은 객체의 2D 회전 각도를 정의합니다. 또한 타원의 중심점을 변환의 원점으로 사용할 수 있는 centeredRotation 속성도 있습니다.
Syntax
new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 타원에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하여 색상, 커서, 획 너비 및 각도와 centeredRotation 속성인 캔버스와 관련된 기타 여러 속성을 변경합니다.
Angle - 이 속성은 타원의 회전 각도를 도 단위로 지정하는 number를 허용합니다.
centeredRotation - 이 속성은 타원의 중심이 변환의 원점인지 여부를 결정하는 부울 값을 허용합니다.
예제 1
angle을 사용자 정의 값이 포함된 키로 전달하고 타원의 중심 회전을 비활성화합니다.
FabricJS에서 타원의 회전 각도를 설정하는 예를 들어 보겠습니다. 음의 각도는 시계 반대 방향을 지정하고, 양의 각도는 시계 방향을 지정합니다. centeredRotation에 "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>How to set the angle of rotation of an Ellipse using FabricJS?</h2>
<p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an Ellipse instance
var ellipse = new fabric.Ellipse({
left: 180,
top: 180,
rx: 90,
ry: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -40,
centeredRotation: false
})
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
타원 중심 회전 활성화
이 예에서 centeredRotation 속성을 "true"로 설정하면 타원이 이제 중심을 회전 중심으로 사용하는 것을 볼 수 있습니다. 버전 1.3.4 이전에는 centeredScaling 및 centeredRotation이 centerTransform이라는 속성에 포함되어 있었습니다.
rreee위 내용은 FabricJS를 사용하여 타원의 회전 각도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!