Bagaimana untuk menambah pukulan pada bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah pukulan pada bulatan menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 17:57:13

ke hadapan

1091 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> 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< /strong> 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>

Salin selepas log masuk

Contoh 2

Melalukan nilai 'rgba' kepada atribut garis
Dalam contoh ini, kita akan melihat cara untuk menetapkan nilai rgba kepada atribut strok. Daripada kod warna heksadesimal, kita boleh menggunakan nilai
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!