Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-14 19:37:02

ke hadapan

1200 orang telah melayarinya

如何使用 FabricJS 设置椭圆从左侧的位置？

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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> 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>  <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>
Salin selepas log masuk
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.
rreeee
Atas 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!