Wie lege ich mit FabricJS den minimal zulässigen Skalierungswert eines Rechtecks fest?-js-Tutorial-php.cn

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

王林

Freigeben： 2023-08-27 12:21:03

nach vorne

970 Leute haben es durchsucht

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)

Nach dem Login kopieren

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

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>

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

Nach dem Login kopieren

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!