Wie füge ich mit FabricJS Schatten zum Textfeld hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS Schatten zum Textfeld hinzu?

王林

Freigeben： 2023-09-12 18:33:02

nach vorne

1650 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS einen Schatten zu einem Textfeld hinzufügen. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Um ein Textfeld zu erstellen, müssen wir eine Instanz der Fabric.Textbox-Klasse erstellen und sie der Leinwand hinzufügen. Unser Textfeldobjekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder sogar Hinzufügen eines Schattens. Mit der Eigenschaft shadow können wir dem Textfeld einen Schatten hinzufügen.

Syntax

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

Nach dem Login kopieren

Parameter

Text – Dieser Parameter akzeptiert eine Zeichenfolge, bei der es sich um den Text handelt, den wir in unserem Textfeld anzeigen möchten.
– Dieser Parameter ist ein Objekt, das unserem Textfeld zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit Objekten verknüpft sind, deren Schatten ein Attribut ist.

shadow
– Diese Eigenschaft akzeptiert ein fabric.Shadow-Objekt, das es uns ermöglicht, dem Textbox-Objekt einen Schatten hinzuzufügen. Um beispielsweise einem Textbox-Objekt einen Schatten hinzuzufügen, müssen wir eine neue Fabric.Shadow-Instanz erstellen und diese Instanz dann der Shadow-Eigenschaft zuweisen.

Übergeben eines Schattenobjekts an die Eigenschaft „Shadow“

Schauen wir uns ein Codebeispiel an, um zu verstehen, wie der Eigenschaft „Shadow“ ein Wert zugewiesen wird, um unserem Textfeld einen „Shadow“ hinzuzufügen Objekt. Zuerst müssen wir eine neue Instanz von fabric.Shadow erstellen und diese Instanz dann unserer Shadow-Eigenschaft zuweisen.

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

Nach dem Login kopieren

Beispiel 2Übergabe von RGBA-Werten an das Schattenobjekt

Wir können den Schatten auch anpassen und ihm ein unscharfes Aussehen verleihen, indem wir RGBA-Werte angeben, die Rot, Grün, Blau und Alpha darstellen. Alpha bestimmt die Deckkraft der Farbe.

<!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 an RGBA value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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: "rgba(0,0,205, 0.7)",
         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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS Schatten zum Textfeld hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!