Bagaimana untuk membuat elips tidak kelihatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat elips tidak kelihatan menggunakan FabricJS?

王林

Lepaskan： 2023-09-01 23:53:02

ke hadapan

858 orang telah melayarinya

如何使用 FabricJS 使椭圆不可见？

Dalam tutorial ini, kita akan belajar cara membuat elips tidak kelihatan menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Objek elips kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menjadikannya kelihatan atau tidak kelihatan. Kita boleh melakukannya dengan menggunakan atribut visible.

Syntax

new fabric.Ellipse( { visible: Boolean }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek< /em> menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain objek yang berkaitan dengan atribut visible.

Kunci Pilihan

Visible - Sifat ini menerima nilai Boolean yang membolehkan kita memaparkan objek pada kanvas. Nilai lalainya ialah Benar.

Contoh 1

Meluluskan kelihatan atribut sebagai kunci dengan nilai "benar"

Mari kita ambil contoh untuk memahami perkara yang berlaku apabila kita menghantar nilai "benar" kepada atribut boleh dilihat. Dengan menentukan nilai "benar" kami memastikan bahawa objek Ellipse dipaparkan ke kanvas. Ini juga merupakan tingkah laku lalai dalam FabricJS.

<!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 make an Ellipse invisible using FabricJS?</h2>
      <p>The object is visible on the canvas because we have set the <b>visible</b> property to True. This is the default behavior. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            visible: true,
         });

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

Salin selepas log masuk

Contoh 2

Melepasi atribut visible sebagai kunci dengan nilai "false"
Dalam contoh ini, kita menghantar atribut
visible sebagai kunci dengan nilai "false". Menetapkan nilai palsu akan memastikan objek elips kami tidak dipaparkan pada kanvas. Ia hanya tidak menjadikan objek "tidak kelihatan" tetapi menyingkirkannya sepenuhnya. Ia boleh digunakan untuk mengalih keluar objek daripada kanvas tanpa mengalih keluar kodnya. rreeee
Atas ialah kandungan terperinci Bagaimana untuk membuat elips tidak kelihatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!