suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit FabricJS ein Textfeld mit Hintergrundfarbe?

Wie erstelle ich mit FabricJS ein Textfeld mit Hintergrundfarbe?

WBOY
WBOYnach vorne
2023-09-06 11:57:021538Durchsuche

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

In diesem Tutorial erstellen wir mit FabricJs ein Textfeld mit einer Hintergrundfarbe. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Wir können den Text selbst auch mithilfe von Eigenschaften wie „fontSize“, „fontFamily“, „fontStyle“, „fontWeight“ usw. anpassen. Um ein Textfeld zu erstellen, müssen wir eine Instanz der fabric.Textbox-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft „backgroundColor“ können wir dem Hintergrund des Objekts eine Farbe zuweisen und die Form des Textfelds als Rechteck festlegen.

Syntax

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

Parameter

  • text – Dieser Parameter akzeptiert einen String , den Textstring, den wir verwenden möchten. Möchten Sie in unserem Textfeld anzeigen.

  • Optionen (optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Textfelds ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Textfeld beziehen, dessen Eigenschaft backgroundColor ist.

    • Optionsschlüssel

    • backgroundColor – Diese Eigenschaft akzeptiert einen String-Wert, der die Hintergrundfarbe bestimmt.

    Beispiel 1

    Übergabe der Eigenschaft „backgroundColor“ als Schlüssel mit Hex-Wert

    Sehen wir uns ein Codebeispiel an, um unserem Textfeldobjekt mithilfe eines Hex-Farbwerts eine Hintergrundfarbe zuzuweisen. In diesem Beispiel haben wir den Hex-Farbcode „#ffe4e1“ verwendet, der ein sehr heller Rotton ist. 

    <!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>

    Beispiel 2

    Übergeben der Eigenschaft „backgroundColor“ als Schlüssel mit RGBA-Wert

    Wir können RGBA-Werte anstelle von Hex-Farbcodes verwenden, dies steht für – Rot, Grün, Blau und Alpha. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir RGBA-Werte (0,206,209,0,4) verwendet, was einer dunkeltürkisen Farbe mit einer Deckkraft von 0,4 entspricht. 

    <!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 an RGBA value</h2>
   <p>You can see that the background colour is a dark turquoise colour with 0.4 opacity.</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: "rgba(0,206,209, 0.4)",
         width: 400,
         top: 70,
         left: 110,
      });

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Textfeld mit Hintergrundfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie werde ich JavaScript-Entwickler?Nächster Artikel：Wie werde ich JavaScript-Entwickler?

In Verbindung stehende Artikel

Mehr sehen