Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?

WBOY

Freigeben： 2023-08-24 15:05:07

nach vorne

957 Leute haben es durchsucht

如何使用 FabricJS 设置椭圆的高度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Höhe einer Ellipse 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. Mit FabricJS können wir die Größe von Objekten mithilfe der Eigenschaften width und height steuern.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen height die Eigenschaft ist.

Optionstaste

Height – Diese Eigenschaft akzeptiert Zahlen, sodass wir die Höhe des Objekts angeben können. Der zugewiesene Wert bestimmt die Höhe.

Beispiel 1

heightStandardverhalten der Eigenschaft< /strong>

Nehmen wir ein Beispiel, um das Standardverhalten der Eigenschaft height zu verstehen.

<!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 height of an Ellipse using FabricJS?</h2>
      <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</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({
            left: 100,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // 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

Übergabe der Eigenschaft height als Schlüssel

Da die Größe der Ellipse durch ihren horizontalen und vertikalen Radius bestimmt wird, ändert sich ihre Größe nicht.

<!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 height of an Ellipse using FabricJS?</h2>
      <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </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({
            top: 100,
            left: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            height: 90,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // 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 stelle ich die Höhe einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!