Bagaimana untuk menetapkan sudut putaran elips menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan sudut putaran elips menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-10 13:29:02

ke hadapan

1419 orang telah melayarinya

如何使用 FabricJS 设置椭圆的旋转角度？

Dalam tutorial ini, kami akan menetapkan sudut putaran elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Sifat sudut dalam FabricJS mentakrifkan sudut putaran 2D objek. Kami juga mempunyai sifat centeredRotation, yang membolehkan kami menggunakan titik tengah elips sebagai asal usul transformasi.

Syntax

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: 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 berkaitan dengan kanvas, yang mana sudut dan Putaran berpusat ialah sifat.

< h2>Kunci Pilihan
Sudut - Sifat ini menerima nombor< /em> yang menyatakan sudut putaran elips dalam darjah.
centeredRotation - Sifat ini menerima nilai Boolean yang menentukan sama ada pusat elips ialah asal usul transformasi.
Contoh 1
Lulus < em>sudut sebagai kunci dengan nilai tersuai dan lumpuhkan putaran berpusat elips
Mari kita ambil contoh menetapkan sudut putaran elips Fabric. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami memberikan nilai "false" kepada centeredRotation, elips akan berputar sambil menggunakan titik sudutnya sebagai pusat putaran.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to set the angle of rotation of an Ellipse using FabricJS?</h2> <p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></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({ left: 180, top: 180, rx: 90, ry: 50, fill: "green", stroke: "blue", strokeWidth: 2, angle: -40, centeredRotation: false }) // 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

Dayakan putaran berpusat elips

Dari contoh ini kita dapat melihat bahawa dengan menetapkan sifat centeredRotation kepada "benar", elips kita kini menggunakan pusatnya sebagai pusat putaran. Sebelum versi 1.3.4, centeredScaling dan centeredRotation terkandung dalam sifat yang dipanggil centerTransform.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut putaran elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!