Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 18:05:08

ke hadapan

601 orang telah melayarinya

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

Salin selepas log masuk

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. < /p>

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>

Salin selepas log masuk

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!