suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich den von Textbox zulässigen Mindestskalierungswert mithilfe von FabricJS fest?

Wie lege ich den von Textbox zulässigen Mindestskalierungswert mithilfe von FabricJS fest?

WBOY
WBOYnach vorne
2023-08-24 13:09:031073Durchsuche

Wie lege ich den von Textbox zulässigen Mindestskalierungswert mithilfe von FabricJS fest?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den minimal zulässigen Anteil der Textbox festlegen. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Um ein Textfeld zu erstellen, müssen wir eine Instanz der Klasse fabric.Textbox erstellen und sie der Leinwand hinzufügen. Ebenso können wir auch das Attribut minScaleLimit verwenden, um die minimal zulässige Skalierung festzulegen.

Grammatik

new fabric.Textbox(text: String, { minScaleLimit : Number }: Object)

Parameter

  • text – Dieser Parameter akzeptiert einen String, der die Textzeichenfolge ist, die wir im Textfeld anzeigen möchten.

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Textfeld zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft minScaleLimit ist.

Wahltaste

  • minScaleLimit – Diese Eigenschaft akzeptiert Number als Wert, der es uns ermöglicht, den minimal zulässigen Skalierungswert für das Textfeld zu steuern.

Beispiel 1

Standarddarstellung von Textfeldobjekten

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Textbox-Objekt 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>Default appearance of the Textbox object</h2>
	<p>You can scale the textbox object to see that there is no minimum limit set</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 textbox object
		var textbox = new fabric.Textbox("That which does not kill us makes us stronger.", {
			backgroundColor: "#e5e4e2",
			width: 400,
			left: 50,
			top: 70,
			fill: "#e1a95f",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

Beispiel 2

Übergeben Sie das Attribut 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 Textfeldobjekts im Canvas ändert. Hier verwenden wir 0,8 als Wert, was bedeutet, dass wir das Objekt nicht auf eine Breite kleiner als 240 Pixel verkleinern können. Die Breite wird durch Breite * Limit (0,8 *300 = 240 Pixel) berechnet. 

<!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 scale the textbox object to see that there is a minimum limit set</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 textbox object
		var textbox = new fabric.Textbox("That which does not kill us makes us stronger.", {
			backgroundColor: "#e5e4e2",
			width: 400,
			left: 50,
			top: 70,
			fill: "#e1a95f",
			minScaleLimit: 0.8,
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

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

String 字符串 number 对象 fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Der Unterschied zwischen Function.prototype.apply und Function.prototype.call in JavaScriptNächster Artikel：Der Unterschied zwischen Function.prototype.apply und Function.prototype.call in JavaScript

In Verbindung stehende Artikel

Mehr sehen