FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법은 무엇입니까?

王林

풀어 주다： 2023-09-04 09:21:13

앞으로

675명이 탐색했습니다.

如何使用 FabricJS 向三角形添加阴影？

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

삼각형 개체는 크기 변경, 배경색 추가, 그림자 추가 등 다양한 방법으로 사용자 정의할 수 있습니다. Shadow 속성을 사용하여 삼각형에 그림자를 추가할 수 있습니다.

Syntax

new fabric.Triangle({ shadow : fabric.Shadow }: Object)

로그인 후 복사

Parameters

Options(선택 사항) - 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 그림자가 속성인 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.

Option Keys

Shadow - 이 속성은 삼각형 개체에 그림자를 추가할 수 있는 fabric.Shadow 개체를 허용합니다.

예제 1

그림자 객체를 그림자 속성에 전달

삼각형 객체에 그림자를 추가하기 위해 그림자 속성에 값을 할당하는 방법을 이해하기 위해 코드 예제를 살펴보겠습니다. 먼저, 새로운 fabric.Shadow 인스턴스를 생성한 다음 해당 인스턴스를 shadow 속성에 할당해야 합니다.

<!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>Passing the shadow object to the shadow property</h2>
   <p>You can see that an orange shadow has been added to the triangle</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "orange",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

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

로그인 후 복사