Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan oleh Textbox menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan oleh Textbox menggunakan FabricJS?

WBOY

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

ke hadapan

1053 orang telah melayarinya

Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan oleh Textbox menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan bahagian minimum Kotak Teks yang dibenarkan menggunakan FabricJS. Kami boleh menyesuaikan, meregangkan atau mengalihkan teks yang ditulis dalam kotak teks. Untuk mencipta kotak teks, kita perlu mencipta contoh kelas fabric.Textbox dan menambahkannya pada kanvas. Begitu juga, kita juga boleh menggunakan atribut minScaleLimit untuk menetapkan skala minimum yang dibenarkan.

Tatabahasa

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

Salin selepas log masuk

Parameter

teks - Parameter ini menerima String iaitu rentetan teks yang ingin kami paparkan dalam kotak teks.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada kotak teks kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan objek yang minScaleLimit ialah hartanya.

Kunci pilihan

minScaleLimit - Hartanah ini menerima Nombor sebagai nilai yang membolehkan kami mengawal nilai skala minimum yang dibenarkan untuk kotak teks.

Contoh 1

Kemunculan lalai objek kotak teks

Mari kita lihat contoh kod untuk melihat rupa objek kotak teks kita apabila tidak menggunakan sifat minScaleLimit. Dalam kes ini kita akan dapat menskalakan objek secara bebas kerana tiada had minimum ditetapkan.

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

Salin selepas log masuk

Contoh 2

Lulus atribut minScaleLimit sebagai kunci dengan nilai tersuai

Dalam contoh ini, kita akan melihat cara memberikan nilai pada sifat minScaleLimit mengubah nilai skala minimum yang dibenarkan bagi objek kotak teks dalam kanvas. Di sini kita menggunakan 0.8 sebagai nilai, yang bermaksud kita tidak akan dapat mengecilkan objek kepada lebar lebih kecil daripada 240 piksel, lebar dikira dengan lebar * had (0.8 *300 = 240 piksel).

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan oleh Textbox menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!