Bagaimana untuk menetapkan warna isian segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan warna isian segi empat tepat menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-21 08:13:24

ke hadapan

1284 orang telah melayarinya

如何使用 FabricJS 设置矩形的填充颜色？

Dalam tutorial ini kita akan belajar cara menukar rupa segi empat tepat Tukar warna isian objek dengan menggunakan FabricJS. Segi empat tepat adalah salah satu daripada banyak bentuk Dikuasakan oleh FabricJS. Untuk membuat segi empat tepat kita perlu mencipta contoh Fabric.Rect kelas dan tambahkannya pada kanvas.

Kita boleh menukar warna isian menggunakan atribut isian yang membolehkan kita menentukan Warna isian objek.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang diisi sebagai sifat.

Option Key

fill - Hartanah ini menerima String yang membolehkan kita menukar warna isian objek. Nilai lalainya ialah rgb(0,0,0), iaitu hitam.

Contoh 1

Warna isian lalai bagi objek segi empat tepat

Mari kita lihat contoh kod yang menunjukkan kepada kita warna isian lalai bagi objek segi empat tepat FabricJS. Jika kita melangkau sifat isian sepenuhnya semasa mencipta objek segi empat tepat, ia akan berlaku Semasa rendering, warna isian adalah 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>Default fill colour of a rectangle object</h2>
   <p>You can click on the rectangle and interact with it</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Melalukan atribut fill sebagai kunci

Kami juga boleh menetapkan sebarang nama warna atau nilai RGBA kepada atribut isian. Dalam contoh ini, Kami memberikannya nilai "kelabu", menukar warna isian dengan sewajarnya.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna isian segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!