Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan lebar segitiga menggunakan FabricJS?

Bagaimana untuk menetapkan lebar segitiga menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-25 13:05:10644semak imbas

如何使用 FabricJS 设置三角形的宽度?

Dalam tutorial ini, kita akan belajar cara menetapkan lebar segitiga 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.

Kita boleh memanipulasi objek segi tiga dengan menukar kedudukannya, kelegapan, lejang dan saiznya. FabricJS membolehkan kami mengawal saiz objek menggunakan sifat lebar dan ketinggian.

Syntax

new Fabric.Triangle({ width: Number }: Object)

Parameter

  • Pilihan (pilihan) Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi tiga kami. Menggunakan parameter ini, adalah mungkin untuk menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang lebar merupakan atribut.
  • Option Key

    • Width - Hartanah ini menerima nilai nombor yang membolehkan kita menentukan lebar objek. Nilai lalainya ialah 100.

    Contoh 1

    lebarGelagat Lalai Harta Lebar

    Mari kita lihat contoh kod untuk memahami gelagat lalai sifat lebar.

    
    
    
    
    
    
    宽度属性的默认行为
    可以看到三角形的宽度默认为100
    
    
    // 启动画布实例
    var canvas = new Fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    画布.setHeight(250);
    
    // 初始化一个三角形对象
    var triangle = new Fabric.Triangle({
    左:60,
    顶部:50,
    填写:“#b0e0e6”,
    身高:90,
    });
    
    // 将其添加到画布中
    canvas.add(三角形);
    
    
    

    Contoh 2

    Melalui atribut width sebagai kunci

    Sekarang kita telah menetapkan atribut width nilai 180px, kita dapat melihat perubahan lebarnya.

    rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar segitiga 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