Rumah > Artikel > hujung hadapan web > Bagaimana untuk membalikkan segitiga secara menegak menggunakan FabricJS?

Bagaimana untuk membalikkan segitiga secara menegak menggunakan FabricJS?

王林ke hadapan: 2023-08-23 20:29:131107semak imbas

如何使用 FabricJS 垂直翻转三角形？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Segitiga secara menegak 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. Kita boleh membalikkan objek segi tiga secara menegak menggunakan sifat flipY.

Syntax

new fabric.Triangle({ flipY: Boolean }: 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 yang flipY ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Option Key

flipY - Sifat ini menerima nilai Boolean yang membolehkan kita membalikkan objek secara menegak.

Contoh 1

Melalukan FlipY sebagai kunci dengan nilai "palsu" p>

Mari kita lihat contoh kod yang menunjukkan kepada kita orientasi lalai objek segi tiga dalam FabricJS. Memandangkan kami memberikan nilai Palsu kepada sifat flipY, objek segi tiga tidak akan terbalik secara menegak.

<!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>Passing flipY as key with a &#39;false&#39; value</h2>
   <p>You can see that the triangle object has not been flipped vertically.</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: 75,
         top: 45,
         width: 180,
         height: 109,
         stroke: "#e3f988",
         strokeWidth: 5,
         flipY: false,
      });

      // Create gradient fill
      triangle.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
                  { offset: 0, color: "#545a2c" },
                  { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Contoh 2

Meluluskan sifat FlipY sebagai kunci dengan nilai "benar"

Dalam contoh ini kita mempunyai objek segi tiga dengan lebar 180px dan ketinggian 109px dengan isian kecerunan linear menegak. Apabila kita menggunakan sifat flipY pada objek segi tiga, ia terbalik secara menegak, jadi kita melihat segitiga itu terbalik juga.

Atas ialah kandungan terperinci Bagaimana untuk membalikkan segitiga secara menegak menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menghentikan kaedah forEach() dalam JavaScript?Artikel seterusnya：Bagaimana untuk menghentikan kaedah forEach() dalam JavaScript?

Artikel berkaitan

Lihat lagi