FabricJS - Semak sama ada cache kotor dan poligon memerlukan pemapar?-tutorial js-php.cn

FabricJS - Semak sama ada cache kotor dan poligon memerlukan pemapar?

王林

Lepaskan： 2023-08-25 15:17:10

ke hadapan

1108 orang telah melayarinya

FabricJS – 检查缓存是否脏并且多边形是否需要渲染器？

Kita boleh mencipta objek Poligon dengan mencipta contoh fabrik.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.

Kita boleh menggunakan kaedah isCacheDirty untuk menyemak sama ada cache kotor dan jika pemapar diperlukan. Kaedah ini menyemak sama ada cache kotor, memberitahu FabricJS bahawa sesuatu dalam kanvas telah berubah dan perlu dipaparkan semula.

Tatabahasa

isCacheDirty( skipCanvas: Boolean )

Salin selepas log masuk

Parameter

skipCanvas (pilihan) - Parameter ini menerima nilai Boolean yang, apabila ditetapkan kepada benar, melangkau semakan kanvas kerana objek dilukis pada kanvas induk.

Contoh 1: Menggunakan kaedah isCacheDirty

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah isCacheDirty. Dalam kes ini, warna isian asal objek poligon ialah biru. Walau bagaimanapun, FabricJS menandakan objek sebagai kotor dan menyegarkannya pada paparan seterusnya secara lalai. Oleh itu, warna akhir objek kami adalah kelabu dan output yang direkodkan adalah benar.

<!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 isCacheDirty method</h2>
   <p> 
      You can open console from dev tools to see that a true value is returned
   </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 polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "blue",
            strokeWidth: 3,
            stroke: "black",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Applying a different fill colour
      polygon.fill = "grey";
      
      // Using isCacheDirty method
      console.log("Is cache dirty? : ", polygon.isCacheDirty());
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Menggunakan kaedah isCacheDirty dan atribut kotor

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah isCacheDirty digunakan bersama dengan atribut dirty. Apabila ditetapkan kepada "true", sifat kotor memaparkan semula cache objek pada panggilan pemaparan seterusnya. Memandangkan kami telah memberikan nilai "false" kotor, cache objek tidak akan dipaparkan semula, jadi kaedah isCacheDirty mengembalikan nilai palsu dalam konsol.

<!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 isCacheDirty method along with the dirty property</h2>
   <p>You can open console from dev tools to see that a false value is returned  </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 polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "blue",
            strokeWidth: 3,
            stroke: "black",
            dirty: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using isCacheDirty method
      console.log("Is cache dirty? : ", polygon.isCacheDirty());
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara menggunakan FabricJS untuk menyemak sama ada cache kotor dan jika poligon memerlukan pemapar.

Atas ialah kandungan terperinci FabricJS - Semak sama ada cache kotor dan poligon memerlukan pemapar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!