Heim > Artikel > Web-Frontend > Wie lege ich mit FabricJS den zulässigen Mindestskalierungswert für einen Kreis fest?

Wie lege ich mit FabricJS den zulässigen Mindestskalierungswert für einen Kreis fest?

WBOYnach vorne: 2023-09-05 15:25:09948Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS das minimal zulässige Verhältnis eines Kreises 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 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.Circle({ minScaleLimit : Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen minScaleLimit eine Eigenschaft ist.

Optionsschlüssel

minScaleLimit – Diese Eigenschaft akzeptiert eine Zahl strong> als Wert, mit dem wir den minimal zulässigen Maßstab des Kreises steuern können.

Beispiel 1

So sieht das Standardkreisobjekt aus

Sehen wir uns den Code an, um zu sehen, wie ein Kreisobjekt aussieht, wenn die Eigenschaft minScaleLimit nicht verwendet wird. 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>Setting the minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

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

Beispiel 2

Übergabe der Eigenschaft minScaleLimit als Schlüssel mit benutzerdefiniertem Wert

In diesem Beispiel werden wir sehen, wie die Zuweisung eines Werts zur Eigenschaft

minScaleLimitden minimal zulässigen Proportionalwert für kreisförmige Objekte in der Leinwand ändert. Hier verwenden wir 0,8 als Wert, was bedeutet, dass wir das Objekt nicht auf einen Radius kleiner als 64 Pixel verkleinern können, der durch den Radius * Grenzwert (0,8 * 80 = 64 Pixel) berechnet 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 minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 80,
            fill: "#ff1493",
            minScaleLimit: 0.8
         });

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

Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS den zulässigen Mindestskalierungswert für einen Kreis fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Wie kann ich eine Funktion in JavaScript auf Tiefe n rekursieren?Nächster Artikel：Wie kann ich eine Funktion in JavaScript auf Tiefe n rekursieren?

In Verbindung stehende Artikel

Mehr sehen