Comment faire réagir un objet polygone aux événements sélectionnés et désélectionnés à l'aide de FabricJS ?-js tutoriel-php.cn

Comment faire réagir un objet polygone aux événements sélectionnés et désélectionnés à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-21 09:41:11

avant

1373 Les gens l'ont consulté

如何使用 FabricJS 使多边形对象对选定和取消选定事件做出反应？

Nous pouvons créer un objet Polygon en créant une instance 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 utilisons les événements selected et deselected pour démontrer comment faire réagir un objet polygone à la sélection et à la désélection d'objets par l'utilisateur.

Grammaire

polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);

Copier après la connexion

Exemple 1 : Montrez comment un objet réagit aux événements sélectionnés

Regardons un exemple de code montrant comment faire réagir un objet polygone à l'événement selected. Cliquer sur l'objet déclenchera l'événement selected qui exécute la fonction de rappel. Dans ce cas, chaque fois que nous cliquons sur l'objet polygone, sa couleur de remplissage change et la sortie enregistrée s'affiche.

<!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>Displaying how the object reacts to the selected event</h2>
   <p>Select the object to see the event callback function fired</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 instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "black",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the selected event
      polygon.on("selected", () => {
         polygon.fill = "blue";
         canvas.renderAll();
         console.log("The polygon object is selected");
      });
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : Montrez comment un objet réagit aux événements de désélection

Regardons un exemple de code pour comprendre comment faire réagir un objet Polygon à l'événement Deselect. Ici, une fois l'objet polygone désélectionné, l'événement est déclenché, modifiant ainsi également la couleur de remplissage.

<!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>Displaying how the object reacts to the deselected event</h2>
   <p>Deselect the object to see the event callback function fired</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 instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
      
      // Using the deselected event
      polygon.on("deselected", () => {
         polygon.fill = "black";
         canvas.renderAll();
         console.log("The polygon object is deselected");
      });
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment faire réagir un objet polygone aux événements sélectionnés et désélectionnés à l'aide de FabricJS.

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!