cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat elips dengan warna sempadan menggunakan FabricJS?

Bagaimana untuk membuat elips dengan warna sempadan menggunakan FabricJS?

王林
王林ke hadapan
2023-09-02 16:53:021176semak imbas

如何使用 FabricJS 创建带有边框颜色的椭圆？

Dalam tutorial ini, kami akan mencipta elips dengan warna sempadan 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. Memandangkan FabricJS sangat fleksibel, kami boleh menyesuaikan objek elips dengan cara yang kami suka. Salah satu sifat yang disediakan oleh FabricJS ialah borderColor, yang membolehkan kita memanipulasi warna sempadan apabila objek itu aktif.

Syntax

new fabric.Ellipse({ borderColor: String }: Object)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang borderColor ialah sifat.

Kekunci Pilihan

  • borderColor - Sifat ini menerima String yang menentukan warna sempadan apabila objek dipilih secara aktif. Nilai lalainya ialah rgb(178,204,255).

Contoh 1

Melalui kekunci borderColor menggunakan nilai rentetan

Mari kita lihat contoh cara untuk menetapkan nilai pada sifat borderColor. Kami telah memberikan nilai "biru" kepada kekunci borderColor, yang membantu mencipta sempadan biru apabila objek elips dipilih. 

<!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 create an Ellipse with a border color using FabricJS?</h2>
      <p>Select the object to see the "blue" border color.</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: 215,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "red",
            borderColor: "blue",
         });

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

Contoh 2

Hantar nilai rgba ke kunci borderColor

Daripada menghantar nama warna ringkas sebagai rentetan, kita juga boleh menggunakan nilai RGBA dengan komponen dan menentukan jumlah merah, hijau, biru di mana alfa mewakili kelegapan. Dalam contoh ini kami menggunakan rgb(128,0,128) iaitu nilai rgb untuk ungu.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk membuat elips dengan warna sempadan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String 字符串 值传递 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan padding segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan padding segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi