Web-Frontend
js-Tutorial
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?
Aug 27, 2023 pm 12:21 PM
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
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 id="Default-appearance-of-the-rectangle-object">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 id="Passing-the-minScaleLimit-property-as-key-with-a-custom-value">Passing the minScaleLimit property as key with a custom value</h2>
<p>You can try scaling the rectangle and observer that it isn'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!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Ersetzen Sie Stringzeichen in JavaScript
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Benutzerdefinierte Google -Search -API -Setup -Tutorial
8 atemberaubende JQuery -Seiten -Layout -Plugins
Mar 06, 2025 am 12:48 AM
8 atemberaubende JQuery -Seiten -Layout -Plugins
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Mar 09, 2025 am 12:11 AM
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
10 JavaScript & JQuery MVC -Tutorials
Mar 02, 2025 am 01:16 AM
10 JavaScript & JQuery MVC -Tutorials
