FabricJS를 사용하여 원의 수평 배율을 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 원의 수평 배율을 설정하는 방법은 무엇입니까?

王林

풀어 주다： 2023-08-24 09:41:12

앞으로

1238명이 탐색했습니다.

如何使用 FabricJS 设置圆的水平比例因子？

이 튜토리얼에서는 FabricJS를 사용하여 원의 수평 배율을 설정하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들려면 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 캔버스 내 원형 개체의 위치, 색상, 불투명도 및 크기를 지정할 수 있는 것처럼 원형 개체의 가로 크기도 설정할 수 있습니다. 이는 scaleX 속성을 사용하여 수행할 수 있습니다.

Syntax

new fabric.Circle({ scaleX : Number }: Object)

로그인 후 복사

Parameters

Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 scaleX 속성이 있는 개체와 관련된 색상, 커서, 획 너비 및 기타 여러 속성과 같은 속성을 변경할 수 있습니다.

Option Key

scaleX - 이 속성은 numeric 값을 허용합니다. 할당된 값에 따라 수평 개체 배율이 결정됩니다. 기본값은 1입니다.

예제 1

scaleX을 사용하지 않은 경우의 기본 모습

scaleX 속성을 사용하지 않은 경우 원형 객체의 모습을 표시하는 코드를 살펴보겠습니다. 기본적으로 원형 객체의 수평 축척 비율은 1입니다. scaleX는 X축을 따라 객체의 크기를 조정하는 변환을 결정합니다.

<!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 horizontal scale factor of circle using FabricJS</h2>
      <p>This is the default horizontal scale factor. We have not used the <b>scaleX</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

scaleX 속성을 키로 전달

이 예에서는 scaleX 속성을 값 2의 키로 전달합니다. 이는 원형 객체의 축척 비율이 수평 방향으로 두 배가 됨을 의미합니다.
rreee
위 내용은 FabricJS를 사용하여 원의 수평 배율을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!