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

Bagaimana untuk membalikkan segi empat tepat secara menegak menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-09 20:09:02

ke hadapan

1055 orang telah melayarinya

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

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 FlipY sebagai atribut.

Option Key

flipY - Sifat ini menerima nilai boolean yang membolehkan kita membalikkan objek secara menegak. < /p>

Contoh 1

Melalui flipY sebagai kunci dengan nilai False

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

Salin selepas log masuk

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!