FabricJS를 사용하여 왼쪽부터 시작하는 원의 위치를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-01 13:25:02793검색
이 튜토리얼에서는 FabricJS를 사용하여 왼쪽에서 원의 위치를 설정하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 위치, 불투명도, 획 및 크기를 변경하여 원형 개체를 조작할 수 있습니다. left 속성을 사용하면 왼쪽부터 위치를 변경할 수 있습니다.
Syntax
new fabric.Circle( { left: Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 기타 여러 속성과 같이 left 속성이 있는 개체와 관련된 속성을 변경할 수 있습니다.
ul>Left - 이 속성은 개체의 왼쪽 위치를 설정하기 위해 Number을 허용합니다. 이 값은 개체가 왼쪽으로 얼마나 멀리 배치되는지를 결정합니다.
Option Key
예제 1
원형 개체의 기본 배치
캔버스에서 원형 개체의 위치가 변경되지 않을 때 기본 위치를 이해하기 위해 코드 예제를 살펴보겠습니다.
<!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>Setting the position of Circle from left using FabricJS</h2>
<p>This is the default placement of the circle. Here we have not used the <b>left</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
fill: "white",
radius: 100,
stroke: "yellow",
strokeWidth: 3
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
왼쪽 속성을 키로 전달
이 예에서는 left 속성에 사용자 정의 값을 할당합니다. 숫자를 허용하므로 왼쪽부터의 위치를 나타내는 숫자 값을 할당해야 합니다.
rreee위 내용은 FabricJS를 사용하여 왼쪽부터 시작하는 원의 위치를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제