Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?
Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?
- 王林ke hadapan
- 2023-09-14 15:17:161379semak imbas
Dalam tutorial ini, kita akan belajar cara mencari ketinggian kotak teks dalam IText menggunakan FabricJS. Kelas IText telah diperkenalkan dalam FabricJS versi 1.4, yang memanjangkan Fabric.Text dan digunakan untuk mencipta kejadian IText. Kejadian IText memberi kita kebebasan untuk memilih, memotong, menampal atau menambah teks baharu tanpa konfigurasi tambahan. Terdapat juga pelbagai kombinasi kekunci yang disokong dan kombinasi tetikus/sentuh untuk menjadikan teks interaktif yang tidak tersedia dalam Teks.
Namun, Textbox berdasarkan IText membolehkan kami mengubah saiz segi empat tepat teks dan membalutnya secara automatik. Ini tidak berlaku untuk IText, kerana ketinggian tidak melaras berdasarkan pemisah baris. Kita boleh memanipulasi objek IText dengan menggunakan pelbagai sifat. Begitu juga, kita boleh mengira ketinggian kotak teks menggunakan kaedah calcTextHeight.
Tatabahasa
calcTextHeight()
Contoh 1
Guna kaedah calcTextHeight
Mari lihat contoh kod untuk melihat rupa objek IText apabila menggunakan kaedah calcTextHeight. Dalam kes ini, ketinggian teks akan dikembalikan.
<!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>Using the calcTextHeight method</h2>
<p> You can open console from dev tools and see that the text height value is being displayed in the console </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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using calcTextHeight method
console.log("The text height is: ", itext.calcTextHeight());
</script>
</body>
</html>
Contoh 2
Gunakan kaedah calcTextHeight untuk mengira ketinggian kotak teks yang meningkat
Dalam contoh ini, kami sengaja meningkatkan ketinggian kotak teks dengan menambah baris teks tambahan. Oleh itu, kaedah calcTextHeight mengembalikan ketinggian kotak teks yang meningkat, yang dalam kes ini adalah lebih kurang 97.632.
<!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>Using the calcTextHeight method to calculate increased text box height
<p> You can open console from dev tools and see that the text height value being displayed in the console has increased </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 an itext object
var itext = new fabric.IText("Add sample text here.Lorem ipsum dolor
sit amet", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using calcTextHeight method
console.log("The new text height is: ", itext.calcTextHeight());
</script>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!