Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kedudukan bulatan bermula dari kiri menggunakan FabricJS?

Bagaimana untuk menetapkan kedudukan bulatan bermula dari kiri menggunakan FabricJS?

WBOYke hadapan: 2023-09-01 13:25:02735semak imbas

如何使用 FabricJS 设置圆从左开始的位置？

Dalam tutorial ini, kita akan belajar cara menetapkan kedudukan bulatan dari kiri 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. Kita boleh memanipulasi objek bulat dengan menukar kedudukannya, kelegapan, lejang dan saiznya. Anda boleh menukar kedudukan bermula dari kiri menggunakan harta kiri.

Syntax

new fabric.Circle( { left: Number }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang kiri ialah atributnya, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci Pilihan

Kiri - Hartanah ini menerima Nombor untuk menetapkan kedudukan kiri objek. Nilai ini menentukan sejauh mana ke kiri objek akan diletakkan.

Contoh 1

Penempatan lalai objek bulat

Mari kita lihat contoh kod untuk memahami kedudukan lalai objek bulat dalam kanvas apabila kedudukannya tidak berubah.

<!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 Circle from left using FabricJS</h2>
      <p>This is the default placement of the circle. Here 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");
         var circle = new fabric.Circle({
            fill: "white",
            radius: 100,
            stroke: "yellow",
            strokeWidth: 3
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Melalukan atribut kiri sebagai kunci

Dalam contoh ini, kami menetapkan nilai tersuai pada atribut left. Memandangkan ia menerima nombor, anda perlu memberikannya nilai berangka yang mewakili kedudukannya dari kiri.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan bulatan bermula dari kiri menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

number 对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk pertanyaan jumlah julat yang memutar tatasusunan mengikut lawan jam oleh indeks KArtikel seterusnya：Program JavaScript untuk pertanyaan jumlah julat yang memutar tatasusunan mengikut lawan jam oleh indeks K

Artikel berkaitan

Lihat lagi