Heim > Web-Frontend > js-Tutorial > Wie erstelle ich mit FabricJS eine Ellipse mit Randfarbe?

Wie erstelle ich mit FabricJS eine Ellipse mit Randfarbe?

王林
Freigeben: 2023-09-02 16:53:02
nach vorne
1205 Leute haben es durchsucht

如何使用 FabricJS 创建带有边框颜色的椭圆?

In diesem Tutorial erstellen wir mit FabricJS eine Ellipse mit einer Randfarbe. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu. Da FabricJS so flexibel ist, können wir das Ellipsenobjekt nach Belieben anpassen. Eine der von FabricJS bereitgestellten Eigenschaften ist borderColor, die es uns ermöglicht, die Farbe des Rahmens zu manipulieren, wenn das Objekt aktiv ist.

Syntax

new fabric.Ellipse({ borderColor: String }: Object)
Nach dem Login kopieren

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die dem Objekt zugeordnet sind, dessen borderColor eine Eigenschaft ist.

Optionsschlüssel

  • borderColor – Diese Eigenschaft akzeptiert einen String, der die Farbe des Rahmens bestimmt, wenn das Objekt aktiv ausgewählt wird. Der Standardwert ist rgb(178.204.255).

Beispiel 1

Übergabe des borderColor-Schlüssels mithilfe eines Zeichenfolgenwerts

Sehen wir uns ein Beispiel an, wie der Eigenschaft borderColor ein Wert zugewiesen wird. Wir haben dem Schlüssel borderColor den Wert „blue“ zugewiesen, der dabei hilft, einen blauen Rand zu erstellen, wenn das Ellipsenobjekt ausgewählt wird.

<!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>How to create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "blue" border color.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "blue",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
Nach dem Login kopieren

Beispiel 2

Übergeben Sie den RGBA-Wert an den Schlüssel borderColor

Anstatt einen einfachen Farbnamen als Zeichenfolge zu übergeben, können wir auch den Wert RGBA mit Komponenten verwenden, die Rot, Grün, Blau und die Menge an Alpha angeben. wobei Alpha für Opazität steht. In diesem Beispiel haben wir rgb(128,0,128) verwendet, den RGB-Wert für Lila.

<!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>How to create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "purple" border color.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
Nach dem Login kopieren

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

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage