Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan faktor skala mendatar bulatan menggunakan FabricJS?

Bagaimana untuk menetapkan faktor skala mendatar bulatan menggunakan FabricJS?

王林ke hadapan: 2023-08-24 09:41:121238semak imbas

如何使用 FabricJS 设置圆的水平比例因子？

Dalam tutorial ini, kita akan belajar cara menetapkan faktor skala mendatar 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. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek bulat dalam kanvas, kita juga boleh menetapkan skala mendatar objek bulat. Ini boleh dilakukan menggunakan atribut scaleX.

Syntax

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

Parameter

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

Kunci Pilihan

scaleX - Hartanah ini menerima nilai numeric. Nilai yang ditetapkan menentukan faktor skala objek mendatar. Nilai lalainya ialah 1.

Contoh 1

Penampilan lalai apabila scaleX tidak digunakan

Mari kita lihat kod yang memaparkan rupa objek bulat apabila atribut tidak digunakan Secara lalai, objek bulat mempunyai faktor skala mendatar 1. scaleX menentukan penjelmaan yang mengubah saiz objek di sepanjang paksi X.

<!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 horizontal scale factor of circle using FabricJS</h2>
      <p>This is the default horizontal scale factor. We have not used the <b>scaleX</b> property, but by default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Melepasi atribut scaleX sebagai kunci

Dalam contoh ini, kami menghantar atribut scaleX sebagai kunci dengan nilai 2. Ini bermakna faktor skala objek bulat digandakan dalam arah mendatar.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan faktor skala mendatar bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi