> 웹 프론트엔드 > JS 튜토리얼 > FabricJS를 사용하여 텍스트 상자에 그림자를 추가하는 방법은 무엇입니까?

FabricJS를 사용하여 텍스트 상자에 그림자를 추가하는 방법은 무엇입니까?

王林
풀어 주다: 2023-09-12 18:33:02
앞으로
1686명이 탐색했습니다.

如何使用 FabricJS 向文本框添加阴影?

이 튜토리얼에서는 FabricJS를 사용하여 텍스트 상자에 그림자를 추가하는 방법을 알아봅니다. 텍스트 상자에 작성된 텍스트를 사용자 정의하거나 늘리거나 이동할 수 있습니다. 텍스트 상자를 만들려면 Fabric.Textbox 클래스의 인스턴스를 만들고 이를 캔버스에 추가해야 합니다. 텍스트 상자 개체는 크기 변경, 배경색 추가, 그림자 추가 등 다양한 방법으로 사용자 정의할 수 있습니다. shadow 속성을 사용하여 텍스트 상자에 그림자를 추가할 수 있습니다.

Syntax

new fabric.Textbox(text: String, { shadow : fabric.Shadow }: Object)
로그인 후 복사

Parameters

  • text - 이 매개변수는 텍스트 상자에 표시하려는 string 텍스트인 문자열을 허용합니다.

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

Option Key

  • shadow - 이 속성은 텍스트 상자 개체에 그림자를 추가할 수 있는 fabric.Shadow 개체를 허용합니다. 예를 들어 Textbox 개체에 그림자를 추가하려면 새 Fabric.Shadow 인스턴스를 만든 다음 해당 인스턴스를 Shadow 속성에 할당해야 합니다.

예제 1

shadow 속성에 그림자 개체 전달

텍스트 상자에 shadow을 추가하기 위해 그림자 속성에 값을 할당하는 방법을 이해하기 위해 코드 예제를 살펴보겠습니다. 물체 . 먼저 fabric.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 a blue shadow has been added to the textbox</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: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>
로그인 후 복사

예제 2

그림자 객체에 RGBA 값 전달

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

rreee

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

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