Wie füge ich mit FabricJS einen Strich zu einem Dreieck hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS einen Strich zu einem Dreieck hinzu?

WBOY

Freigeben： 2023-09-21 13:49:02

nach vorne

737 Leute haben es durchsucht

如何使用 FabricJS 向三角形添加描边？

In diesem Tutorial lernen wir, wie man mit FabricJS einen Strich zu einem Dreieck hinzufügt. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Unser Dreiecksobjekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder Ändern der Farbe der um das Objekt herum gezeichneten Linien. Wir können dies tun, indem wir das Attribut Stroke verwenden.

Syntax

new fabric.Triangle({ stroke : String }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, für das Stroke ein Attribut ist.

< /ul>
Options Keys
Stroke – Diese Eigenschaft akzeptiert einen String, um die Farbe des Rahmens dieses Objekts zu bestimmen.
Beispiel 1

Übergeben von Strichen als Schlüssel mit Hexadezimalwerten stark>

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie ein Dreiecksobjekt angezeigt wird, wenn das Attribut lines verwendet wird. Hexadezimale Farbcodes beginnen mit „#“, gefolgt von einer sechsstelligen Zahl, die die Farbe darstellt. In diesem Fall haben wir „#3cb371“ verwendet, was Mid-Sea Green 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 stroke as key with a hexadecimal value</h2>
   <p>You can see that the stroke around the triangle is of medium sea-green colour</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 triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "#3cb371",
         strokeWidth: 7,
      });

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

Nach dem Login kopieren

Beispiel 2

Rgba-Wert an StrokeProperty übergeben

In diesem Beispiel sehen wir, wie man einen RGBA-Wert für die Stroke-Eigenschaft angibt. Anstelle von hexadezimalen Farbcodes können wir RGBA-Werte verwenden, die für Rot, Grün, Blau und Alpha stehen. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir den rgba-Wert (46.139,87,0,8) verwendet, der ein Seegrün mit einer Deckkraft von 0,8 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 an rgba value to the stroke property</h2>
   <p>You can see that the stroke colour is coming from the RGBA value now</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 triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "rgba(46,139,87,0.8)",
         strokeWidth: 7,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS einen Strich zu einem Dreieck hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!