FabricJS를 사용하여 원의 회전 각도를 설정하는 방법은 무엇입니까?
- 王林앞으로
- 2023-09-14 08:57:231470검색
이 튜토리얼에서는 FabricJS를 사용하여 원의 회전 각도를 설정합니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. FabricJS의 angle 속성은 객체의 2D 회전 각도를 정의합니다. 또한 원의 중심점을 변환의 원점으로 사용할 수 있는 centeredRotation 속성도 있습니다.
Syntax
new fabric.Circle({ angle: Number, centeredRotation: Boolean }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 개체에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 원과 관련된 기타 속성을 변경할 수 있습니다. 여기서 angle 및 centeredRotation 속성은 다음과 같습니다. p>
Option Key
Angle - 이 속성은 원의 회전 각도를 도 단위로 지정하는 number를 허용합니다.
-
centeredRotation - 이 속성은 원의 중심이 변환의 원점인지 여부를 결정하는 boolean 값을 허용합니다.
예제 1
맞춤 값을 사용하여 각도를 키로 전달하고 원의 중심 회전을 비활성화합니다.
다음 예는 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>Set the angle of rotation of a Circle using FabricJS</h2>
<p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -60,
centeredRotation: false,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
원의 중심 회전 활성화
이 예에서 centeredRotation 속성을 True로 설정하면 원이 이제 중심을 회전 중심으로 사용한다는 것을 알 수 있습니다. 버전 1.3.4 이전에는 centeredScaling 및 centeredRotation이 centerTransform이라는 속성에 포함되어 있었습니다.
rreee위 내용은 FabricJS를 사용하여 원의 회전 각도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!