How to set the minimum scale value allowed by Textbox using FabricJS?-JS Tutorial-php.cn

How to set the minimum scale value allowed by Textbox using FabricJS?

WBOY

Release： 2023-08-24 13:09:03

forward

1106 people have browsed it

How to set the minimum scale value allowed by Textbox using FabricJS?

In this tutorial, we will learn how to set the minimum allowed proportion of a Textbox using FabricJS. We can customize, stretch or move the text written in the text box. In order to create a textbox, we must create an instance of the fabric.Textbox class and add it to the canvas. Likewise, we can also use the minScaleLimit property to set its minimum allowed scale.

grammar

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

Copy after login

parameter

text - This parameter accepts a String which is the text string we want to display in the text box.
Options (optional) - This parameter is an object that provides additional customization to our text box. Using this parameter, you can change properties such as color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.

Option key

minScaleLimit - This property accepts Number as a value, which allows us to control the minimum scale value allowed for the text box.

Example 1

Default appearance of text box objects

Let's look at a code example to see what our text box object looks like when not using the minScaleLimit property. In this case we will be able to scale the object freely since no minimum limit is set.

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

Copy after login

Example 2

Pass the minScaleLimit property as a key with a custom value

In this example, we will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value for a textbox object in the canvas. Here we use 0.8 as the value, which means we will not be able to shrink the object to a width smaller than 240 pixels, the width is calculated by width * limit (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>

Copy after login

The above is the detailed content of How to set the minimum scale value allowed by Textbox using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!