Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencari koordinat pusat sebenar objek Line menggunakan FabricJS?
Bagaimana untuk mencari koordinat pusat sebenar objek Line menggunakan FabricJS?
- 王林ke hadapan
- 2023-09-16 12:09:031192semak imbas
Dalam tutorial ini, kita akan belajar cara mencari koordinat tengah garis menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mencari koordinat tengah sebenar objek Line, kami menggunakan kaedah getCenterPoint.
Syntax
getCenterPoint(): fabric.Point
Menggunakan kaedah getCenterPoint
Contoh
Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getCenterPoint digunakan. Kaedah getCenterPoint mengembalikan koordinat pusat sebenar objek. Dalam contoh ini, output yang direkodkan ialah x= 110.5 dan y= 150.5, yang merupakan titik tengah.
<!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 getCenterPoint method</h2>
<p>
You can open console from dev tools and see that the logged output contains the center points
</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 Line object
var line = new fabric.Line([70, 100, 150, 200], {
stroke: "blue",
});
// Add it to the canvas
canvas.add(line);
// Using the getCenterPoint method
console.log(
"The center point of Line object is: ",
line.getCenterPoint()
);
</script>
</body>
</html>
Gunakan kaedah getCenterPoint dengan koordinat mula dan akhir baris yang berbeza
Contoh
Dalam contoh ini, kami menggunakan kaedah getCenterPoint i> untuk mendapatkan koordinat mula dan akhir bagi contoh Garisan, sebagai (25000 ) dan (250, 40). Titik tengah ialah 175.5 dan 145.5.
<!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 getCenterPoint method with different starting and ending coordinates of line
</h2>
<p>
You can open console from dev tools and see that the logged output contains the center points
</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 Line object
var line = new fabric.Line([100, 250, 250, 40], {
stroke: "blue",
});
// Add it to the canvas
canvas.add(line);
// Using the getCenterPoint method
console.log(
"The center point of Line object is: ",
line.getCenterPoint()
);
</script>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk mencari koordinat pusat sebenar objek Line menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!