FabricJS를 사용하여 왼쪽에서 타원의 위치를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-14 19:37:021210검색
이 튜토리얼에서는 FabricJS를 사용하여 왼쪽에서 타원의 위치를 설정하는 방법을 알아봅니다. 타원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 타원을 생성하기 위해 Fabric.Ellipse 클래스의 인스턴스를 생성하고 이를 캔버스에 추가하겠습니다. 위치, 불투명도, 획 및 크기를 변경하여 타원 개체를 조작할 수 있습니다. left 속성을 사용하여 왼쪽에서의 위치를 변경할 수 있습니다.
Syntax
new fabric.Ellipse( { left: Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 타원에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하여 왼쪽 속성이 속성인 개체와 관련된 색상, 커서, 획 너비 및 기타 여러 속성을 변경합니다.
Option key
left - 이 속성은 개체의 왼쪽 위치를 설정하는 number를 허용합니다. 이 값은 개체가 왼쪽으로 얼마나 멀리 배치되는지를 결정합니다.
예제 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 an Ellipse from left using FabricJS</h2>
<p>This is the default position, as 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");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
left 속성을 키로 전달
이 예에서는 left 속성에 사용자 정의 값을 할당합니다. 숫자를 허용하므로 왼쪽부터의 위치를 나타내는 숫자 값을 할당해야 합니다.
rreee위 내용은 FabricJS를 사용하여 왼쪽에서 타원의 위치를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제