Bagaimana untuk menetapkan padding segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan padding segi empat tepat menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-02 16:49:13

ke hadapan

1255 orang telah melayarinya

如何使用 FabricJS 设置矩形的填充？

Dalam tutorial ini, kita akan belajar cara menetapkan pelapik segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas.

Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi empat tepat dalam kanvas, kita juga boleh menetapkan isian objek segi empat tepat. Ini boleh dilakukan menggunakan atribut padding.

Syntax

new fabric.Rect({ padding : Number }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang padding ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci Pilihan

Padding - Hartanah ini menerima nilai numeric. Nilai yang ditentukan menentukan jarak antara objek segi empat tepat dan kotak sempadan kawalannya.

Contoh 1

Penampilan Lalai Tanpa padding

Mari kita lihat contoh kod yang menunjukkan rupa objek segi empat tepat apabila atribut padding tidak digunakan Seperti yang kita dapat lihat, tiada ruang antara objek dan sempadan kawalan sekelilingnya. Ini bermakna tiada pelapik antara segi empat tepat dan sempadan kawalannya.

<!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>Default appearance when padding is not used</h2>
   <p>You can select the rectangle to see there is no space between the object and its controlling borders.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Meluluskan harta padding sebagai kunci

Dalam contoh ini, kita menghantar harta padding sebagai kunci dengan nilai 7. ini Menunjukkan bahawa jarak antara objek segi empat tepat dan semua objeknya ialah 7px Kawal sempadan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan padding segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!