cari

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

Bagaimana untuk membalikkan segi empat tepat secara menegak menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-09-09 20:09:021037semak imbas

如何使用 FabricJS 垂直翻转矩形？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Segi Empat secara menegak 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 menegak menggunakan sifat FlipY.

Syntax

new fabric.Rect({ flipY: 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 FlipY sebagai atribut.

Option Key

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

Contoh 1

Melalui flipY sebagai kunci dengan nilai False

Mari kita lihat contoh kod yang menunjukkan kepada kita orientasi lalai objek segi empat tepat dalam FabricJS. Memandangkan kami memberikan nilai Palsu kepada sifat flipY, objek segi empat tepat 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 False value</h2>
   <p>You can see that the object has not 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipY: false,
      });

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

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

Contoh 2

Melalui flipY sifat sebagai kunci dengan nilai "benar"

Dalam contoh ini kita mempunyai objek segi empat tepat dengan lebar 170 px dan px menegak pengisian kecerunan linear. Apabila kita menggunakan sifat FlipY pada objek segi empat tepat, ia terbalik secara menegak, jadi kita melihat kecerunan terbalik juga.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk membalikkan segi empat tepat secara menegak 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 menggunakan JavaScript untuk menukar sempadan kotak input selepas mengisinya?Artikel seterusnya：Bagaimana untuk menggunakan JavaScript untuk menukar sempadan kotak input selepas mengisinya?

Artikel berkaitan

Lihat lagi