FabricJS를 사용하여 원의 중심 회전을 비활성화하는 방법은 무엇입니까?
- PHPz앞으로
- 2023-08-31 11:21:06826검색
이 튜토리얼에서는 FabricJS를 사용하여 원의 중심 회전을 비활성화하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들기 위해 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가하겠습니다. 기본적으로 FabricJS의 모든 객체는 중심을 회전점으로 사용합니다. 그러나 centeredRotation 속성을 사용하여 이 동작을 변경할 수 있습니다.
Syntax
new fabric.Circle({ centeredRotation: Boolean }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 centeredRotation 속성과 관련된 개체의 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다.
ul>centeredRotation - 이 속성은 컨트롤을 통해 회전할 때 개체가 변환 원점을 중심점으로 사용할지 여부를 제어할 수 있는 Boolean 값을 허용합니다. 기본값은 True입니다.
Option Key
예제 1
회전의 기본 동작 > FabricJS의 원
원형 개체의 기본 동작을 설명하는 예를 살펴보겠습니다. centeredRotation 속성은 기본적으로 True로 설정되어 있으므로 원형 객체는 중심을 회전점으로 사용합니다.
<!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>Disabling the centered rotation of circle using FabricJs</h2>
<p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set to True. </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,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
값이 "false"인 centeredRotation 키 전달
이제 기본 동작을 살펴보았으므로 centeredRotation 속성이 다음과 같이 지정될 때 어떤 일이 발생하는지 이해하기 위해 코드 조각을 살펴보겠습니다. 거짓 .
rreee위 내용은 FabricJS를 사용하여 원의 중심 회전을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!