cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?

Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-08-24 18:05:08627semak imbas

如何使用 FabricJS 水平翻转矩形？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Segi Empat secara mendatar 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. Kita boleh membalikkan objek segi empat tepat secara mendatar menggunakan sifat flipX.

Syntax

new fabric.Rect({ flipX: Boolean }: Object)

Parameter

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

Kunci Pilihan

  • flipX - Sifat ini menerima nilai Boolean yang membolehkan kita membalikkan objek secara mendatar.

Contoh 1

Melepasi flipX sebagai kunci dengan nilai "palsu"

Mari kita lihat contoh kod yang menunjukkan kepada kita orientasi lalai objek segi empat tepat dalam FabricJS Memandangkan kami memberikan nilai Palsu kepada sifat flipX, objek segi empat tepat tidak akan terbalik secara mendatar. 

<!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 flipX as key with a False value</h2>
   <p>You can see that the object is not flipped horizontally</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: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipX: false,
      });

      // Create gradient fill
         rect.set(
            "fill",
            new fabric.Gradient({
               type: "linear",
               coords: { x1: 0, y1: 0, x2: 50, y2: 0 },
               colorStops: [
                  { offset: 0, color: "pink" },
                  { offset: 1, color: "blue" },
               ],
            })
         );

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

Contoh 2

Melepasi atribut flipX sebagai kunci dengan nilai "benar"

Dalam contoh ini, kita mempunyai objek segi empat tepat dengan lebar 170 dan ketinggian linear 70 isian kecerunan. Apabila kita menggunakan sifat FlipX pada objek segi empat tepat, ia terbalik secara mendatar, jadi kita melihat kecerunan terbalik juga.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk membalikkan segi empat tepat secara mendatar 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 menyimpan fungsi JavaScript dalam baris gilir dan melaksanakannya secara berurutan?Artikel seterusnya：Bagaimana untuk menyimpan fungsi JavaScript dalam baris gilir dan melaksanakannya secara berurutan?

Artikel berkaitan

Lihat lagi