Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Position einer Ellipse von links ein?

Wie stelle ich mit FabricJS die Position einer Ellipse von links ein?

WBOYnach vorne: 2023-09-14 19:37:021258Durchsuche

如何使用 FabricJS 设置椭圆从左侧的位置？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Position einer Ellipse von links festlegen. 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. Wir können das Ellipsenobjekt manipulieren, indem wir seine Position, Deckkraft, Kontur und Größe ändern. Die Position von links kann mit dem Attribut left geändert werden.

Syntax

new fabric.Ellipse( { left: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften zu ändern, die dem Objekt zugeordnet sind, dessen linke Eigenschaft die Eigenschaft ist.

Wahltaste

left – Diese Eigenschaft akzeptiert eine Zahl, die die linke Position des Objekts festlegt. Dieser Wert bestimmt, wie weit links das Objekt platziert wird.

Beispiel 1

Standardposition des Ellipsenobjekts

Lassen Sie uns ein Beispiel durchgehen, um die Standardposition des Ellipsenobjekts auf der Leinwand zu verstehen, wenn seine Position nicht geändert 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>Setting the position of an Ellipse from left using FabricJS</h2>
      <p>This is the default position, as we have not used the <b>left</b> property. </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({
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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

Beispiel 2

Übergabe des Attributs left als Schlüssel

In diesem Beispiel weisen wir dem Attribut left einen benutzerdefinierten Wert zu. Da es Zahlen akzeptiert, müssen Sie ihm einen numerischen Wert zuweisen, der seine Position von links darstellt.

<!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 set the position of Ellipse from left using FabricJS?</h2>
      <p>Notice that the circle is placed 135px away from the left, since we have used the <b>left</b> property with a custom value.</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: 135,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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

Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Position einer Ellipse von links ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 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 drehe ich ein Dreieck mit FabricJS horizontal um?Nächster Artikel：Wie drehe ich ein Dreieck mit FabricJS horizontal um?

In Verbindung stehende Artikel

Mehr sehen