FabricJS - Tentukan sama ada isian atau lejang perlu dilukis terlebih dahulu untuk objek poligon?-tutorial js-php.cn

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

王林

Lepaskan： 2023-08-24 17:01:10

ke hadapan

1408 orang telah melayarinya

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 )

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!