Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?
Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?
- 王林ke hadapan
- 2023-09-14 08:57:231470semak imbas
Dalam tutorial ini, kami akan menetapkan sudut putaran bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Sifat angle dalam FabricJS mentakrifkan sudut putaran 2D objek. Kami juga mempunyai sifat centeredRotation, yang membolehkan kami menggunakan titik tengah bulatan sebagai asal usul transformasi.
Syntax
new fabric.Circle({ angle: Number, centeredRotation: Boolean }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah objek menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain yang berkaitan dengan bulatan, dengan sudut dan Putaran berpusat ialah sifat. p>
Kunci Pilihan
Sudut - Sifat ini menerima nombor yang menentukan sudut putaran bulatan dalam darjah.
-
centeredRotation - Hartanah ini menerima nilai boolean yang menentukan sama ada pusat bulatan ialah asal usul transformasi.
Contoh 1
Sudut lulus sebagai kunci dengan nilai tersuai dan lumpuhkan putaran berpusat bulatan
Contoh berikut menunjukkan cara menetapkan sudut putaran bulatan dalam FabricJS. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami telah menetapkan nilai False untuk centeredRotation, bulatan akan berputar sambil menggunakan titik sudutnya sebagai pusat putaran. Contoh 2 Sebelum versi 1.3.4,
centeredScalingdan
centeredRotationterkandung dalam sifat yang dipanggil centerTransform.
<!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>Set the angle of rotation of a Circle using FabricJS</h2>
<p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -60,
centeredRotation: false,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!