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

王林
풀어 주다: 2023-09-04 09:21:13
앞으로
654명이 탐색했습니다.

如何使用 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>
로그인 후 복사

예제 2

그림자 객체에 RGBA 값 전달

빨간색, 녹색, 파란색, 알파를 나타내는 RGBA 값을 지정하여 그림자를 조정하고 흐릿한 모양을 줄 수도 있습니다. 알파는 색상의 불투명도를 결정합니다.

rreee

위 내용은 FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿