cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta kanvas dengan Segitiga menggunakan FabricJS?

Bagaimana untuk mencipta kanvas dengan Segitiga menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-15 12:33:03735semak imbas

如何使用 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)

Parameter

  • Pilihan (pilihan)− Parameter ini ialah objek 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 strong>

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>

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!

number 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Program JavaScript untuk mencari purata julat dalam tatasusunanArtikel seterusnya：Program JavaScript untuk mencari purata julat dalam tatasusunan

Artikel berkaitan

Lihat lagi