FabricJS를 사용하여 원의 X축 기울기 각도를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-10 19:41:02885검색
이 튜토리얼에서는 FabricJS를 사용하여 원의 X축 기울기 각도를 설정하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들기 위해 fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가하겠습니다. 원 개체는 크기 변경, 배경색 추가, X축의 기울기 각도 변경 등 다양한 방법으로 사용자 정의할 수 있습니다. skewX 속성을 사용하여 이를 수행할 수 있습니다.
Syntax
new fabric.Circle({ skewX : Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 기타 여러 속성과 같이 skewX가 속성인 개체와 관련된 속성을 변경할 수 있습니다.
ul>skewX - 이 속성은 개체 X축의 기울기 각도를 결정하는 number를 허용합니다.
Option Key
예제 1
>skewX 속성을 적용하지 않은 경우
예제를 통해 SkewX 속성을 적용하지 않은 원형 객체가 어떻게 나타나는지 살펴보겠습니다. 이 경우 원형 객체는 어떤 각도로도 왜곡되지 않습니다.
<!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 angle of skew on X-axis of circle using FabricJS</h2>
<p>Here we have not applied the <b>skewX</b> property, hence there is no distortion in the object. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 50,
top: 90,
radius: 50,
fill: "#ccccff",
stroke: "#7b68ee",
strokeWidth: 5
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
skewX를 키로 전달하고 맞춤 값을 할당합니다.
이 예에서는 skewX 속성의 숫자 값을 할당하는 방법을 살펴보겠습니다. 전달된 값은 X축을 따른 비틀림을 결정합니다. skewX 속성에 값 30을 할당했기 때문에 원형 개체를 가로로 꼬집어 30도 각도를 만드는 것과 같은 효과가 있습니다.
rreee위 내용은 FabricJS를 사용하여 원의 X축 기울기 각도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!