FabricJS를 사용하여 배경색이 있는 텍스트 상자를 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 배경색이 있는 텍스트 상자를 만드는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-06 11:57:02

앞으로

1513명이 탐색했습니다.

如何使用 FabricJS 创建带有背景颜色的文本框？

이 튜토리얼에서는 FabricJs를 사용하여 배경색이 있는 텍스트 상자를 만듭니다. 텍스트 상자에 작성된 텍스트를 사용자 정의하거나 늘리거나 이동할 수 있습니다. FontSize,fontFamily,fontStyle,fontWeight 등과 같은 속성을 사용하여 텍스트 자체를 사용자 정의할 수도 있습니다. 텍스트 상자를 만들려면 fabric.Textbox 클래스의 인스턴스를 만들고 이를 캔버스에 추가해야 합니다. backgroundColor 속성을 사용하면 객체의 배경에 색상을 할당하고 텍스트 상자의 모양을 직사각형으로 지정할 수 있습니다.

Syntax

new fabric.Textbox(text: String, { backgroundColor: String }: Object)

로그인 후 복사

Parameters

text - 이 매개변수는 우리가 사용하려는 텍스트 문자열인 String 을 허용합니다. 텍스트 상자에 표시하고 싶습니다.
옵션 (선택 사항) - 이 매개 변수는 텍스트 상자에 대한 추가 사용자 정의를 제공하는 개체 입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 BackgroundColor 속성이 있는 텍스트 상자와 관련된 기타 여러 속성을 변경할 수 있습니다.

Options Keys

BackgroundColor - 이 속성은 배경색을 결정하는 String 값을 허용합니다.

예제 1

16진수 값을 사용하여 backgroundColor 속성을 키로 전달

16진수 색상 값을 사용하여 텍스트 상자 개체에 배경색을 할당하는 코드 예제를 살펴보겠습니다. 이 예에서는 매우 밝은 빨간색 음영인 16진수 색상 코드 "#ffe4e1"을 사용했습니다.

<!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 backgroundColor property as key with a hexadecimal value</h2>
   <p>You can see that the background colour is a very light shade of red.</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 textbox object
      var textbox = new fabric.Textbox("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "#ffe4e1",
         width: 400,
         top: 70,
         left: 110,
      });

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

로그인 후 복사