Wie legt man mit FabricJS den minimal zulässigen Proportionswert einer Ellipse fest?-js-Tutorial-php.cn

Wie legt man mit FabricJS den minimal zulässigen Proportionswert einer Ellipse fest?

PHPz

Freigeben： 2023-09-08 16:25:02

nach vorne

574 Leute haben es durchsucht

如何使用 FabricJS 设置椭圆的最小允许比例值？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den minimal zulässigen Anteil 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 anpassen, indem wir eine Füllfarbe hinzufügen, seine Ränder entfernen und sogar seine Abmessungen ändern. Ebenso können wir die Eigenschaft minScaleLimit verwenden, um den minimal zulässigen Maßstab festzulegen.

Syntax

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

Nach dem Login kopieren

Parameter

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

Optionsschlüssel

minScaleLimit – Diese Eigenschaft akzeptiert eine Zahl als Wert, mit dem wir den für die Ellipse zulässigen Mindestmaßstab steuern können.

Beispiel 1

So sieht das Standardellipsenobjekt aus

Lassen Sie uns ein Beispiel nehmen, um zu sehen, wie das Ellipsenobjekt aussieht, ohne das Attribut minScaleLimit zu verwenden. In diesem Fall können wir das Objekt frei skalieren, da keine Mindestgrenze festgelegt 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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // 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 minScaleLimit als Schlüssel mit einem benutzerdefinierten Wert

In diesem Beispiel sehen wir, wie das Zuweisen eines Werts zur Eigenschaft minScaleLimit den minimal zulässigen Skalierungswert eines Ellipsenobjekts ändert die Leinwand. Hier verwenden wir 0,8 als Wert, was bedeutet, dass wir das Objekt nicht kleiner als den horizontalen Radius von 64 Pixeln und den vertikalen Radius von 40 Pixeln verkleinern können, berechnet als radius*limit (0,8 * 80 = 64 Pixel). , 0,8 * 50 = 40 Pixel).

<!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 minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            minScaleLimit: 0.8,
         });

         // 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 legt man mit FabricJS den minimal zulässigen Proportionswert einer Ellipse fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!