Bagaimana untuk menetapkan lebar segitiga menggunakan FabricJS?

WBOY
Lepaskan: 2023-08-25 13:05:10
ke hadapan
666 orang telah melayarinya

如何使用 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)
Salin selepas log masuk

Parameter

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

  • < /ul>

    Option Key

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

    Contoh 1

    lebarGelagat Lalai Harta Lebar< /p>

    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(三角形);
    
    
    
    Salin selepas log masuk

    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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan