Rumah > Artikel > hujung hadapan web > FabricJS - Tentukan sama ada isian atau lejang perlu dilukis terlebih dahulu untuk objek poligon?

FabricJS - Tentukan sama ada isian atau lejang perlu dilukis terlebih dahulu untuk objek poligon?

王林ke hadapan: 2023-08-24 17:01:101361semak imbas

FabricJS – 确定对于多边形对象应该首先绘制填充还是描边？

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk menentukan sama ada isian atau strok perlu dicat dahulu, kami menggunakan sifat paintFirst.

Tatabahasa

new fabric.Polygon( points: Array, { paintFirst: String }: Object )

Parameter

points - Parameter ini menerima Array yang mewakili tatasusunan titik yang membentuk objek poligon, di mana setiap titik berada dalam objek dengan x dan y .
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar asalan, lebar lejang dan banyak sifat lain yang berkaitan dengan objek Poligon, dengan paintFirst ialah sifat objek itu.

Kunci pilihan

paintFirst - Hartanah ini menerima nilai String yang menentukan sama ada isian atau lejang dilukis dahulu. Nilai lalai ialah "isi".

Contoh 1: Rupa lalai bagi objek poligon

Mari kita lihat contoh kod untuk melihat cara objek poligon dipaparkan apabila atribut paintFirst tidak digunakan. Dalam contoh ini, gunakan nilai lalai "fill". Ini bermakna apabila objek dilukis, warna isian dilukis dahulu, diikuti dengan warna lejang.

<!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 appearance of polygon object</h2>
   <p>You can see the default appearance of polygon object</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

Contoh 2: Menggunakan atribut paintFirst

Mari kita lihat contoh kod tentang cara menukar kelakuan lalai objek poligon menggunakan sifat paintFirst. Di sini kita menghantar nilai "garisan" kepada atribut paintFirst. Ini memastikan bahawa pukulan dilukis terlebih dahulu dan bukan isian.

<!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>Using the paintFirst property</h2>
   <p>You can see that the stroke is painted first now</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            paintFirst: "stroke",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara menggunakan FabricJS untuk menentukan sama ada isian atau lejang perlu dilukis terlebih dahulu untuk poligon.

Atas ialah kandungan terperinci FabricJS - Tentukan sama ada isian atau lejang perlu dilukis terlebih dahulu untuk objek poligon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String Array 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Program JavaScript: Kira bilangan set 1 dan 0 dalam matriks binariArtikel seterusnya：Program JavaScript: Kira bilangan set 1 dan 0 dalam matriks binari

Artikel berkaitan

Lihat lagi