Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan oleh Textbox menggunakan FabricJS?

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

WBOYke hadapan: 2023-08-24 13:09:031070semak imbas

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)

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>

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>

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!

String 字符串 number 对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Perbezaan antara Function.prototype.apply dan Function.prototype.call dalam JavaScriptArtikel seterusnya：Perbezaan antara Function.prototype.apply dan Function.prototype.call dalam JavaScript

Artikel berkaitan

Lihat lagi