Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah pukulan pada bulatan menggunakan FabricJS?

Bagaimana untuk menambah pukulan pada bulatan menggunakan FabricJS?

PHPzke hadapan: 2023-08-24 17:57:131071semak imbas

如何使用 FabricJS 向圆添加描边？

Dalam tutorial ini, kita akan belajar cara menambah lejang pada bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kami akan mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Objek bulatan kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menukar warna garisan yang dilukis di sekeliling objek. Kita boleh melakukan ini dengan menggunakan sifat strok.

Syntax

new fabric.Circle({ stroke : String }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang Stroke ialah atribut.

Option Key

Stroke - Sifat ini menerima String dan menentukan warna sempadan objek ini.

Contoh 1

Melepasi Stroke sebagai kunci dengan nilai perenambelasan

Mari lihat contoh untuk memahami cara objek bulat dipaparkan apabila menggunakan atribut garis Kod warna heksadesimal bermula dengan "#" diikuti dengan nombor enam digit yang mewakili warna. Dalam contoh ini, kami menggunakan "#ff4500" yang berwarna jingga-merah.

<!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>Adding stroke to a circle using FabricJS</h2>
      <p>Notice the orange-red outline around the circle. It appears as we have applied the    <b>stroke</b> property and assigned it a hexadecimal color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#4169e1",
            stroke: "#ff4500",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Melalukan nilai 'rgba' kepada atribut garis

RGBA yang bermaksud: merah, biru, hijau dan alfa. Parameter alfa menentukan kelegapan warna. Dalam contoh ini, kami menggunakan nilai rgba (255,69,0,0.5), iaitu warna oren-merah dengan kelegapan 0.5. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menambah pukulan pada bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

字符串值传递对象 fabric

Kenyataan：

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

Artikel sebelumnya：Mengapa Posmen tidak mendapat ralat "'Access-ControlAllow-Origin' tidak wujud pada sumber yang diminta" dalam JavaScriptArtikel seterusnya：Mengapa Posmen tidak mendapat ralat "'Access-ControlAllow-Origin' tidak wujud pada sumber yang diminta" dalam JavaScript

Artikel berkaitan

Lihat lagi