Heim >Web-Frontend >js-Tutorial >Wie erstelle ich mit FabricJS eine Leinwand mit einem Kreis?

Wie erstelle ich mit FabricJS eine Leinwand mit einem Kreis?

WBOYnach vorne: 2023-09-09 23:05:031299Durchsuche

如何使用 FabricJS 创建带有 Circle 的画布？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Leinwand mit einem Circle-Objekt erstellt. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen.

Syntax

new fabric.Circle({ radius: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter ist es möglich, Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften zu ändern, die sich auf einen Kreis beziehen, dessen Radius das Attribut ist.

Optionstaste

Radius – Diese Eigenschaft akzeptiert eine Zahl, um den Radius des Kreises zu bestimmen. Wenn wir keinen Radius angeben, wird der Kreis nicht auf der Leinwand angezeigt.

Beispiel 1

Erstellen Sie eine Instanz von Fabric.Circle() und fügen Sie sie unserer Leinwand hinzu.

Sehen wir uns ein Beispiel an, wie Sie der Leinwand einen Kreis hinzufügen. Hier erstellen wir einen Kreis mit einem Radius von 50 Pixel. Das Strichattribut stellt die Rahmenfarbe dar und die Strichstärke gibt deren Breite an. Wir füllen unser Objekt mit einer himmelblauen Farbe, deren Hexadezimalwert #80daeb 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>Creating a canvas with circle using FabricJS</h2>
         <p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Creating an instance of the fabric.Circle class
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#80daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Verwenden Sie die Set-Methode, um das Kreisobjekt zu bedienen.

In diesem Beispiel verwenden wir die Set-Methode, um den Wert festzulegen. Alle Eigenschaften im Zusammenhang mit Strich, Strichbreite, Radius, Skalierung, Drehung usw. können mit dieser Methode geändert werden.

<!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>Creating a canvas with circle using FabricJS</h2>
      <p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle();
         canvas.add(circle);
         
         // Use set to set the properties
         circle.set("radius", 40);
         circle.set("fill", "green");
         circle.set({
            stroke: "rgba(133, 187, 101, 0.7)",
            strokeWidth: 4
         });
         circle.set("left", 50);
         circle.set("top", 50);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

number 对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Statische Typprüfung in JavaScript mit TypeScriptNächster Artikel：Statische Typprüfung in JavaScript mit TypeScript

In Verbindung stehende Artikel

Mehr sehen