FabricJS를 사용하여 원의 수직 배율을 설정하는 방법은 무엇입니까?
Sep 01, 2023 am 10:57 AM
이 튜토리얼에서는 FabricJS를 사용하여 원의 수직 배율을 설정하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 캔버스 내 원형 개체의 위치, 색상, 불투명도 및 크기를 지정할 수 있는 것처럼 원형 개체의 수직 크기도 설정할 수 있습니다. 이는 scaleY 속성을 사용하여 수행할 수 있습니다.
Syntax
new fabric.Circle({ scaleY : Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 scaleY 속성을 사용하는 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.
Option Key
scaleY - 이 속성은 numeric< /em> 값을 허용합니다. 할당된 값에 따라 수직 개체 배율이 결정됩니다. 기본값은 1입니다.
예제 1
scaleY를 사용하지 않은 경우의 기본 모습
scaleY 속성을 사용하지 않았을 때 원형 객체의 모습을 보여주는 예를 살펴보겠습니다. 기본적으로 원형 객체의 수직 축척 비율은 1입니다. scaleY Y축을 따라 개체의 크기를 조정하는 변환을 결정합니다.
<!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 id="Setting-the-vertical-scale-factor-of-a-Circle-using-FabricJS">Setting the vertical scale factor of a Circle using FabricJS</h2>
<p>Notice the vertical scale factor of the circle. Here we have not used the <b>scaleY</b> property, but by default, it is set to 1. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
padding: 7,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
scaleY property를 키로 전달
이 예에서는 scaleY property를 값 2의 키로 전달합니다. 이는 원형 객체의 수직 방향 배율이 두 배가 된다는 것을 의미합니다.
rreee위 내용은 FabricJS를 사용하여 원의 수직 배율을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7310
9
1623
14
1344
46
1259
25
1207
29
