Bagaimana untuk mencipta kanvas dengan Segitiga menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencipta kanvas dengan Segitiga menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-15 12:33:03

ke hadapan

712 orang telah melayarinya

如何使用 FabricJS 创建带有 Triangle 的画布？

Dalam tutorial ini, kita akan belajar cara mencipta kanvas dengan objek Segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.

Syntax

new fabric.Triangle({ width: Number, height: Number }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan)− Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek segi tiga seperti warna, kursor, lebar lejang dan lebar dan tinggi adalah sifatnya.

Option key

Width − Harta ini menerima nombor yang menentukan lebar objek. Nilai lalainya ialah 100.
Ketinggian - Sifat ini menerima Nombor yang menentukan ketinggian objek. Nilai lalainya ialah 100.

Contoh 1

Buat contoh Fabric.Triangle() dan tambahkannya pada kanvas

Mari kita lihat contoh kod untuk melihat cara menambah segitiga pada kanvas. Di sini kita mencipta objek dengan lebar 100px dan ketinggian 70px. Selain itu, kami menggunakan warna "Oren" sebagai warna isian.

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</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 triangle object
      var triangle = new fabric.Triangle({
         left: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

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

Salin selepas log masuk

Contoh 2

Menggunakan kaedah set untuk memanipulasi objek Segitiga

Dalam contoh ini, kita menggunakan kaedah set untuk menjadi penetap nilai. Sebarang sifat yang berkaitan dengan lejang, lebar lejang, sudut, skala, putaran, dsb. boleh ditukar menggunakan kaedah ini.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk mencipta kanvas dengan Segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!