FabricJS – Überprüfen Sie, ob der Cache verschmutzt ist und das Polygon einen Renderer erfordert?-js-Tutorial-php.cn

FabricJS – Überprüfen Sie, ob der Cache verschmutzt ist und das Polygon einen Renderer erfordert?

王林

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

nach vorne

1108 Leute haben es durchsucht

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

Wir können Polygonobjekte erstellen, indem wir Instanzen von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden.

Wir können die Methode isCacheDirty verwenden, um zu überprüfen, ob der Cache fehlerhaft ist und ob ein Renderer erforderlich ist. Diese Methode prüft, ob der Cache verschmutzt ist, und teilt FabricJS mit, dass sich etwas im Canvas geändert hat und neu gerendert werden muss.

Grammatik

isCacheDirty( skipCanvas: Boolean )

Nach dem Login kopieren

Parameter

skipCanvas (optional) – Dieser Parameter akzeptiert einen Boolean-Wert, der, wenn er auf „true“ gesetzt ist, die Leinwandprüfung überspringt, da das Objekt auf der übergeordneten Leinwand gezeichnet wurde.

Beispiel 1: Verwendung der isCacheDirty-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode isCacheDirty zu sehen. In diesem Fall ist die ursprüngliche Füllfarbe des Polygonobjekts Blau. Allerdings markiert FabricJS Objekte als schmutzig und aktualisiert sie standardmäßig beim nächsten Rendern. Daher ist die endgültige Farbe unseres Objekts grau und die aufgezeichnete Ausgabe ist wahr.

<!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>

Nach dem Login kopieren

Beispiel 2: Verwendung der isCacheDirty-Methode und des Dirty-Attributs

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die isCacheDirty-Methode in Verbindung mit dem dirty-Attribut verwendet wird. Wenn die Dirty-Eigenschaft auf „true“ festgelegt ist, rendert sie den Cache des Objekts beim nächsten Renderaufruf erneut. Da wir dirty einen „false“-Wert zugewiesen haben, wird der Cache des Objekts nicht erneut gerendert, sodass die Methode isCacheDirty in der Konsole einen falschen Wert zurückgibt.

<!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>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie Sie mit FabricJS prüfen, ob der Cache fehlerhaft ist und ob ein Polygon einen Renderer erfordert.

Das obige ist der detaillierte Inhalt vonFabricJS – Überprüfen Sie, ob der Cache verschmutzt ist und das Polygon einen Renderer erfordert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!