Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan corak sempang yang mengawal sudut Kotak Teks menggunakan FabricJS?

Bagaimana untuk menetapkan corak sempang yang mengawal sudut Kotak Teks menggunakan FabricJS?

WBOYke hadapan: 2023-08-25 12:05:04793semak imbas

Dalam tutorial ini, kita akan belajar cara menggunakan FabricJS untuk melaksanakan corak garis putus-putus yang mengawal penjuru Kotak Teks. Sudut kawalan objek membolehkan kita menskala, meregangkan atau menukar kedudukannya. Kami boleh menyesuaikan sudut kawalan dalam pelbagai cara, seperti menambah warna tertentu padanya, menukar saiznya, dsb. Kami juga boleh menentukan corak sempang untuk sudut kawalan menggunakan atribut cornerDashArray. p>

Tatabahasa

new fabric.Textbox(text: String, { cornerDashArray: Array }: Object)

Parameter

teks - Parameter ini menerima String, iaitu rentetan teks yang kita mahu Dipaparkan dalam kotak teks kami.
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 lejang dan banyak sifat lain yang dikaitkan dengan objek yang cornerDashArray ialah atribut.

Kunci pilihan

cornerDashArray: Hartanah ini menerima Array yang membolehkan kami menentukan corak sempang yang mengawal sudut. Contohnya, jika kita melepasi tatasusunan dengan nilai [2,3], ia mewakili corak sempang 2px sengkang dan 3px jurang, dan corak ini berulang tanpa had.

Contoh 1

Kawal penampilan lalai sudut

Mari kita lihat contoh kod yang menerangkan rupa lalai sudut kawalan objek kotak teks. Memandangkan kami tidak menggunakan atribut cornerDashArray, corak sempang tidak dipaparkan.

<!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 controlling corners</h2>
	<p>You can select the textbox to see the default appearance of controlling corners</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("How high you fly is derived from how big you think.", {
		backgroundColor: "rgba(204,255,0,0.2)",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "#87a96b",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

Contoh 2

Lepasi atribut cornerDashArray sebagai kunci

Dalam contoh ini, kami menghantar nilai [1,2,1] kepada sifat cornerDashArray. Ini bermakna corak putus-putus akan dibuat dengan garisan panjang 1 piksel diikuti dengan jurang 2 piksel, kemudian sekali lagi garisan panjang 1 piksel akan dilukis diikuti dengan jurang 1 piksel dan seterusnya.

<!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 cornerDashArray property as key</h2>
	<p>You can select the textbox to see the dash pattern of controlling corners</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("How high you fly is derived from how big you think.", {
			backgroundColor: "rgba(204,255,0,0.2)",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "#87a96b",
			cornerDashArray: [1, 2, 1],
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk menetapkan corak sempang yang mengawal sudut Kotak Teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String Array 字符串对象

Kenyataan：

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

Artikel sebelumnya：Cari pemadaman minimum dalam rentetan dalam JavaScriptArtikel seterusnya：Cari pemadaman minimum dalam rentetan dalam JavaScript

Artikel berkaitan

Lihat lagi