FabricJS - Vérifier si le cache est sale et si le polygone nécessite un moteur de rendu ?-js tutoriel-php.cn

FabricJS - Vérifier si le cache est sale et si le polygone nécessite un moteur de rendu ?

王林

Libérer： 2023-08-25 15:17:10

avant

1107 Les gens l'ont consulté

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

Nous pouvons créer des objets Polygon en créant des instances de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc.

Nous pouvons utiliser la méthode isCacheDirty pour vérifier si le cache est sale et si un moteur de rendu est nécessaire. Cette méthode vérifie si le cache est sale, informant FabricJS que quelque chose dans le canevas a changé et doit être restitué.

Grammaire

isCacheDirty( skipCanvas: Boolean )

Copier après la connexion

Paramètres

skipCanvas (facultatif) - Ce paramètre accepte une valeur Boolean qui, lorsqu'elle est définie sur true, ignore la vérification du canevas puisque l'objet a été dessiné sur le canevas parent.

Exemple 1 : Utilisation de la méthode isCacheDirty

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode isCacheDirty. Dans ce cas, la couleur de remplissage d'origine de l'objet polygone est le bleu. Cependant, FabricJS marque les objets comme sales et les actualise par défaut lors du prochain rendu. Par conséquent, la couleur finale de notre objet est grise et la sortie enregistrée est vraie.

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

Copier après la connexion

Exemple 2 : Utilisation de la méthode isCacheDirty et de l'attribut dirty

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode isCacheDirty est utilisée en conjonction avec l'attribut dirty. Lorsqu'elle est définie sur "true", la propriété dirty restitue le cache de l'objet lors du prochain appel de rendu. Puisque nous avons attribué à dirty une valeur "false", le cache de l'objet ne sera pas restitué, donc la méthode isCacheDirty renvoie une fausse valeur dans la console.

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

Copier après la connexion

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment utiliser FabricJS pour vérifier si le cache est sale et si un polygone nécessite un moteur de rendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!