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

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

PHPz

Freigeben： 2023-08-24 17:57:13

nach vorne

1141 Leute haben es durchsucht

如何使用 FabricJS 向圆添加描边？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS einen Strich zu einem Kreis hinzufügen. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Fabric.Circle-Klasse und fügen sie der Leinwand hinzu. Unser Kreisobjekt 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 die Eigenschaft „Stroke“ verwenden.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise 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.

Option Key

Stroke – Diese Eigenschaft akzeptiert einen String< /strong> und bestimmt die Farbe des Rahmens dieses Objekts.

Beispiel 1

Übergabe von Stroke als Schlüssel mit Hexadezimalwert

Sehen wir uns ein Beispiel an, um zu verstehen, wie ein kreisförmiges Objekt angezeigt wird, wenn das Attribut lines verwendet wird. Hexadezimale Farbcodes beginnen mit „#“, gefolgt von einer sechsstelligen Zahl, die die Farbe darstellt. In diesem Beispiel haben wir „#ff4500“ verwendet, das orange-rot 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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the orange-red outline around the circle. It appears as we have applied the    <b>stroke</b> property and assigned it a hexadecimal color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "#ff4500",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe des 'rgba'-Werts an das Attribut lines

In diesem Beispiel sehen wir, wie man dem Strichattribut einen rgba-Wert zuweist. Anstelle von hexadezimalen Farbcodes können wir RGBA-Werte verwenden, die für Rot, Blau, Grün und Alpha stehen. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir den rgba-Wert (255,69,0,0,5) verwendet, der eine orangerote Farbe mit einer Deckkraft von 0,5 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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the outline around the circle. Here we have applied the <b>stroke</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "rgba(255,69,0,0.5)",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

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