Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat segitiga tidak kelihatan menggunakan FabricJS?

Bagaimana untuk membuat segitiga tidak kelihatan menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-17 23:41:10669semak imbas

如何使用 FabricJS 使三角形不可见?

Dalam tutorial ini, kita akan belajar cara membuat segitiga tidak kelihatan menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.

Objek segi tiga kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menjadikannya kelihatan atau tidak kelihatan. Kita boleh melakukan ini dengan menggunakan atribut visible.

Syntax

 new Fabric.Triangle( {visible: Boolean }: Object)

Parameter

  • #🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat objek yang berkaitan dengan sifat

    visible
  • , seperti warna, kursor, lebar lejang dan banyak sifat lain.

      Kunci Pilihan
    • kelihatan#🎜 Harta ini diterima 🎜#Boolean nilai yang membolehkan kami memaparkan objek pada kanvas. Nilai lalainya adalah benar.

    Contoh 1

    Lulus terlihat#🎜🎜 dengan nilai "# atribut" sebagai nilai

    Mari lihat contoh kod untuk memahami perkara yang berlaku apabila kita memberikan nilai sebenar kepada harta

    terlihat. Dengan menentukan nilai "benar" kami memastikan bahawa objek segi tiga diberikan kepada kanvas. Ini juga merupakan tingkah laku lalai dalam FabricJS.

    
    
    
    
    
    
    将可见属性作为具有“true”值的键传递
    您可以看到三角形对象已渲染到画布上
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:60,
    顶部:80,
    填写:“#b0e0e6”,
    身高:90,
    宽度:100,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    

    Contoh 2

    Melepasi atribut kelihatan sebagai kunci dengan nilai "#palsu" ##🎜 Dalam contoh ini, kami menghantar atribut visible sebagai kunci dengan nilai palsu. Menetapkan nilai palsu akan memastikan objek segitiga kami tidak dipaparkan ke kanvas. Ia hanya tidak menjadikan objek "tidak kelihatan" tetapi menyingkirkannya sepenuhnya. Ia boleh digunakan untuk mengalih keluar objek daripada kanvas tanpa mengalih keluar kodnya.

    
    
    
    
    
    
    将可见属性作为带有“false”值的键传递
    您可以看到三角形对象尚未渲染到画布上。
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:60,
    顶部:80,
    填写:“#b0e0e6”,
    身高:90,
    宽度:100,
    可见:假,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    

Atas ialah kandungan terperinci Bagaimana untuk membuat segitiga tidak kelihatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam