Bagaimana untuk menetapkan warna isian elips menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan warna isian elips menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 14:37:14

ke hadapan

1368 orang telah melayarinya

Bagaimana untuk menetapkan warna isian elips menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menukar rupa objek Ellipse dengan menukar warna isiannya menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh menukar warna isian menggunakan sifat isi, yang membolehkan kita menentukan warna isian objek.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek< /em> menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang isi adalah hartanya.

Option Key

Padding - Hartanah ini menerima nilai String yang membolehkan kita menukar warna objek Nilai lalainya ialah rgb(0,0,0), iaitu hitam. . Jika kita melangkau sepenuhnya sifat
fill

semasa mencipta objek elips, ia akan menjadi hitam.

<!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 set the fill color of Ellipse using FabricJS?</h2>
      <p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill 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,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

Salin selepas log masuk

Contoh 2

Melalukan atribut isian sebagai kunciKami juga boleh menetapkan sebarang nama warna atau nilai RGBA pada atribut fill. Dalam contoh ini, kami memberikannya nilai "skyBlue", menukar warna isian dengan sewajarnya.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna isian elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!