Wie legt man mit FabricJS die Position eines Kreises beginnend von links fest?-js-Tutorial-php.cn

Wie legt man mit FabricJS die Position eines Kreises beginnend von links fest?

WBOY

Freigeben： 2023-09-01 13:25:02

nach vorne

824 Leute haben es durchsucht

如何使用 FabricJS 设置圆从左开始的位置？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Position eines Kreises von links festlegen. 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. Wir können das kreisförmige Objekt manipulieren, indem wir seine Position, Deckkraft, Kontur und Größe ändern. Mit der Eigenschaft left können Sie die Position von links beginnend ändern.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Kreis zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen left das Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Option Key

Left – Diese Eigenschaft akzeptiert eine Number, um die linke Position des Objekts festzulegen. Dieser Wert bestimmt, wie weit links das Objekt platziert wird.

Beispiel 1

Standardplatzierung kreisförmiger Objekte

Sehen wir uns ein Codebeispiel an, um die Standardposition eines kreisförmigen Objekts auf der Leinwand zu verstehen, wenn sich seine Position nicht ändert.

<!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 Circle from left using FabricJS</h2>
      <p>This is the default placement of the circle. Here 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");
         var circle = new fabric.Circle({
            fill: "white",
            radius: 100,
            stroke: "yellow",
            strokeWidth: 3
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe des linken Attributs als Schlüssel

In diesem Beispiel weisen wir dem left-Attribut 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>Setting the position of Circle from left using FabricJS</h2>
      <p>Here we have used the <b>left</b> property and assigned it a custom value to set the position of the circle from left. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            fill: "white",
            radius: 100,
            stroke: "yellow",
            strokeWidth: 3,
         });

         // Adding it to the canvas
         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 legt man mit FabricJS die Position eines Kreises beginnend von links fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!