suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich mit FabricJS den minimal zulässigen Skalierungswert eines Rechtecks ​​fest?

Wie lege ich mit FabricJS den minimal zulässigen Skalierungswert eines Rechtecks ​​fest?

王林
王林nach vorne
2023-08-27 12:21:03989Durchsuche

Wie lege ich mit FabricJS den minimal zulässigen Skalierungswert eines Rechtecks ​​fest?

In diesem Tutorial erfahren Sie, wie Sie die minimal zulässigen Proportionen eines Rechtecks ​​festlegen Verwenden Sie FabricJS. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. für Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und diese hinzufügen auf die Leinwand.

Wir können das rechteckige 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.Rect({ minScaleLimit : Number }: Object)

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, für das minScaleLimit ein Attribut ist.

Optionstaste

  • minScaleLimit – Mit dieser Eigenschaft können wir den minimal zulässigen Skalierungswert des Rechtecks ​​steuern. Es akzeptiert eine Zahl als Wert.

Beispiel 1

Standardaussehen eines rechteckigen Objekts strong>

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein rechteckiges Objekt aussieht, ohne die Eigenschaft 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>Default appearance of the rectangle object</h2>
   <p>You can try scaling the rectangle to see that there is no minimum allowed scale value.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

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 rechteckigen Objekts ändert die Leinwand. Hier verwenden wir 0,8 als Wert, was bedeutet, dass wir das Objekt nicht auf weniger als 136 Pixel Breite und 56 Pixel Höhe verkleinern können, was durch radius* limit (0,8 * 170 = 136 Pixel), 0,8 * 70, berechnet wird = 56 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>Passing the minScaleLimit property as key with a custom value</h2>
   <p>You can try scaling the rectangle and observer that it isn&#39;t possible to scale down the rectangle lesser than a width of 136px and height of 56px.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
         minScaleLimit: 0.8,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS den minimal zulässigen Skalierungswert eines Rechtecks ​​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 lösche ich den Cache mit JavaScript?Nächster Artikel：Wie lösche ich den Cache mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen