Heim > Artikel > Web-Frontend > Wie stelle ich die Strichstärke eines Leinwandkreises mit Fabric.js ein?

Wie stelle ich die Strichstärke eines Leinwandkreises mit Fabric.js ein?

WBOYnach vorne: 2023-08-28 13:53:05709Durchsuche

如何使用 Fabric.js 设置画布圆的描边宽度？

Die Eigenschaften „Strich“ und „Strichbreite“ werden verwendet, um die Strichfarbe und Strichstärke des Leinwandkreises festzulegen. Die Kreisklasse enthält verschiedene Eigenschaften, aber um die Strichfarbe und -breite festzulegen, verwenden wir die Eigenschaften „Strich“ und „Strichbreite“. Die Eigenschaft „StrokeWidth“ wird verwendet, um die Breite des Leinwandkreises anzugeben.

Die Circle-Klasse von Fabric.js wird verwendet, um kreisförmige Formen durch Fabric.Circle-Objekte bereitzustellen. Das Kreisobjekt wird verwendet, um eine kreisförmige Form bereitzustellen. Der Kreis ist beweglich und kann je nach Anforderung gestreckt werden. Der Strich, die Farbe, die Breite, die Höhe und die Füllfarbe des Kreises sind alle anpassbar. Im Vergleich zur Canvas-Klasse bietet die Circle-Klasse umfangreiche Funktionen.

Grammatik

Das Folgende ist die Syntax für Textobjekte -

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

Parameter

Radius – wird verwendet, um den Radius eines Kreises anzugeben

Stroke – Geben Sie die Farbe des Strichs an.

Strichbreite – Wird verwendet, um die Breite des Strichs anzugeben

Schritte

Befolgen Sie die unten aufgeführten Schritte, um die horizontale Neigung des Leinwandkreises mithilfe von Fabric.js festzulegen -

Schritt 1 – Fabric.js-Bibliothek in die HTML-Datei einbinden

Schritt 2 – Erstellen Sie ein neues Canvas-Element in der HTML-Datei

Schritt 3 – Initialisieren Sie das Canvas-Element im JavaScript-Code

Schritt 4 – Erstellen Sie ein neues Fabric.js Circle-Klassenobjekt und setzen Sie die skewX-Eigenschaft auf den gewünschten Kreiswert

Schritt 5 – Kreisobjekt zur Leinwand hinzufügen

Beispiel

Sehen wir uns an, wie Sie mit Fabric.js die Strichfarbe und Strichbreite eines Leinwandkreises festlegen -

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

Dieser Code erstellt ein neues Canvas-Kreiselement mit der angegebenen ID, erstellt ein neues Circle-Klassenobjekt von Fabric.js und legt die Strichfarbe und Strichbreite des Kreises mithilfe der Strich- und Strichbreiteneigenschaften fest. Ein kreisförmiges Objekt ist der Leinwand hinzugefügt. Der Kreis erscheint horizontal geneigt auf der Leinwand.

Beispiel

Sehen wir uns ein weiteres Beispiel an: Wir können die Strichfarbe und Strichbreite des Leinwandkreises festlegen, indem wir die Strich- und Strichbreitenmethoden und Eigenschaften wie links, oben, Füllung, Radius usw. verwenden.

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

Dieser Code erstellt ein neues Leinwandkreiselement mit der angegebenen ID und Größe, erstellt ein neues Fabric.js-Kreisklassenobjekt und verwendet die Eigenschaft „StrokeWidth“, um den Leinwandkreis auf die Strichfarbe und Strichbreite festzulegen und das Klassenobjekt festzulegen Zur Leinwand hinzufügen. Der Kreis wird mit den im Beispiel definierten Abmessungen auf der Leinwand angezeigt.

Fazit

In diesem Artikel zeigen wir anhand von Beispielen, wie Sie die Strichstärke und Strichfarbe eines Leinwandkreises festlegen. Wir sehen hier zwei verschiedene Beispiele, in denen wir die Eigenschaften „Stroke“ und „StrokeWidth“ verwenden, um die Strichstärke und die Farbe einer kreisförmigen Leinwand festzulegen. Im ersten Beispiel verwenden wir die Eigenschaften Stroke und StrokeWidth, um die Farbe und Breite des Leinwandkreises festzulegen. Für das zweite Beispiel haben wir die Eigenschaftenmethoden „Stroke“ und „StrokeWidth“ mit verschiedenen Größenparametern (z. B. „Links“, „Oben“, „Füllung“ usw.) verwendet, um die Breite und den Farbstrich der kreisförmigen Leinwand festzulegen.

Das obige ist der detaillierte Inhalt vonWie stelle ich die Strichstärke eines Leinwandkreises mit Fabric.js ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html JS 对象 canvas fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich eine Funktion aus einer Zeichenfolge in JavaScript?Nächster Artikel：Wie erstelle ich eine Funktion aus einer Zeichenfolge in JavaScript?

In Verbindung stehende Artikel

Mehr sehen