FabricJS를 사용하여 삼각형으로 캔버스를 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 삼각형으로 캔버스를 만드는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-15 12:33:03

앞으로

717명이 탐색했습니다.

如何使用 FabricJS 创建带有 Triangle 的画布？

이 튜토리얼에서는 FabricJS를 사용하여 Triangle 객체로 캔버스를 만드는 방법을 알아봅니다. Triangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 삼각형을 만들려면 Fabric.Triangle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다.

Syntax

new fabric.Triangle({ width: Number, height: Number }: Object)

로그인 후 복사

Parameters

Options(선택 사항)− 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등 삼각형 개체와 관련된 속성을 변경할 수 있으며 해당 width 및 height 속성이 있습니다.

Option key

Width − 이 속성은 개체의 너비를 지정하는 number를 허용합니다. 기본값은 100입니다.
Height - 이 속성은 개체의 높이를 지정하는 Number를 허용합니다. 기본값은 100입니다.

예제 1

Fabric.Triangle() 인스턴스를 생성하여 캔버스에 추가

코드 예제를 통해 캔버스에 삼각형을 추가하는 방법을 살펴보겠습니다. 여기서는 너비가 100px이고 높이가 70px인 개체를 만듭니다. 또한 채우기 색상으로 "Orange" 색상을 사용했습니다.

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

로그인 후 복사

예제 2

Set 메소드를 사용하여 Triangle 객체 조작

이 예에서는 set 메소드를 값의 설정자로 사용합니다. 획, 획 너비, 각도, 배율, 회전 등과 관련된 모든 속성은 이 메서드를 사용하여 변경할 수 있습니다.
rreee
위 내용은 FabricJS를 사용하여 삼각형으로 캔버스를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!