Comment définir la valeur d'échelle minimale autorisée par Textbox à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la valeur d'échelle minimale autorisée par Textbox à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 13:09:03

avant

1053 Les gens l'ont consulté

Comment définir la valeur déchelle minimale autorisée par Textbox à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la proportion minimale autorisée de Textbox à l'aide de FabricJS. Nous pouvons personnaliser, étirer ou déplacer le texte écrit dans la zone de texte. Afin de créer une zone de texte, nous devons créer une instance de la classe fabric.Textbox et l'ajouter au canevas. De même, nous pouvons également utiliser l'attribut minScaleLimit pour définir son échelle minimale autorisée.

Grammaire

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

Copier après la connexion

Paramètres

text - Ce paramètre accepte une String qui est la chaîne de texte que nous voulons afficher dans la zone de texte.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre zone de texte. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont minScaleLimit est la propriété.

Touche d'option

minScaleLimit - Cette propriété accepte Number comme valeur qui nous permet de contrôler la valeur d'échelle minimale autorisée pour la zone de texte.

Exemple 1

Apparence par défaut des objets de zone de texte

Regardons un exemple de code pour voir à quoi ressemble notre objet zone de texte lorsque nous n'utilisons pas la propriété minScaleLimit. Dans ce cas, nous pourrons redimensionner l'objet librement puisqu'aucune limite minimale n'est définie.

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

Copier après la connexion

Exemple 2

Passez l'attribut minScaleLimit comme clé avec une valeur personnalisée

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété minScaleLimit modifie la valeur d'échelle minimale autorisée d'un objet zone de texte dans le canevas. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à une largeur inférieure à 240 pixels, la largeur est calculée par largeur * limite (0,8 *300 = 240 pixels).

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!