Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?
Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-14 19:37:021207semak imbas
Dalam tutorial ini, kita akan belajar cara menetapkan kedudukan elips dari kiri menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh memanipulasi objek elips dengan menukar kedudukannya, kelegapan, lejang dan dimensinya. Kedudukan dari kiri boleh ditukar menggunakan atribut left.
Syntax
new fabric.Ellipse( { left: Number }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah objek menyediakan penyesuaian tambahan pada elips kami. Gunakan parameter ini untuk menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang harta kirinya ialah harta itu.
kunci pilihan
kiri - Hartanah ini menerima nombor yang menetapkan kedudukan kiri objek. Nilai ini menentukan sejauh mana ke kiri objek akan diletakkan.
Contoh 1
Kedudukan lalai objek elips
Mari kita lihat contoh untuk memahami kedudukan lalai objek elips dalam kanvas apabila kedudukannya tidak diubah.
<!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>Setting the position of an Ellipse from left using FabricJS</h2>
<p>This is the default position, as we have not used the <b>left</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Melalui kiri atribut sebagai kunci
Dalam contoh ini, kami akan menetapkan atribut left dengan nilai tersuai. Memandangkan ia menerima nombor, anda perlu memberikannya nilai berangka yang mewakili kedudukannya dari kiri.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!