Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 12:29:02

ke hadapan

971 orang telah melayarinya

如何使用 FabricJS 垂直翻转圆？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Bulatan secara menegak menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh membalikkan objek bulat secara menegak menggunakan sifat flipY.

Syntax

new fabric.Circle({ flipY: Boolean }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak lagi sifat lain yang dikaitkan dengan objek yang flipY ialah sifatnya.

Kunci Pilihan

flipY - Hartanah ini menerima nilai Boolean. Ia membolehkan kita membalikkan objek secara menegak.

Contoh 1

Melepasi flipY sebagai kunci dengan nilai 'palsu'

Mari kita lihat contoh yang menunjukkan kepada kita orientasi lalai objek bulat dalam FabricJS. Memandangkan kami memberikan nilai palsu kepada sifat flipY, objek bulat 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>How to flip a Circle vertically using FabricJS?</h2>
      <p>This is the default orientation of the object. We have set <b>flipY</b> as False, but even if we don&#39;t use it, <b>flipY</b> will be by default set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 50,
            fill: "green",
            radius: 80,
            stroke: "#228b22",
            strokeWidth: 2,
            flipY: false
         });

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

         // Adding them to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Melalui sifat FlipY sebagai kunci dengan nilai "benar"

Dalam contoh ini kita mempunyai objek bulat dengan jejari 80px dengan isian kecerunan linear menegak. Apabila kita menggunakan sifat flipY pada objek bulatan, ia terbalik secara menegak, jadi kita melihat kecerunan terbalik juga.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!