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

Comment faire réagir un objet polygone aux événements de la souris à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-31 14:37:08

avant

724 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 mouseup et mousedown pour démontrer comment les objets polygones réagissent aux événements de souris déclenchés par l'utilisateur.

Grammaire

polygon.on(“mouseup”, callbackFunction);
polygon.on(“mousedown”, callbackFunction);

Copier après la connexion

Exemple 1 : Montrez comment un objet répond aux événements mouseup

Regardons un exemple de code pour voir comment un objet polygone réagit lorsque l'événement mouseup est déclenché. L'événement mouseup se produit lorsque l'utilisateur relâche le bouton gauche de la souris. Ici, une fois l'événement mouseup déclenché, la largeur du trait deviendra 33.

<!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 mouseup event</h2>
   <p>
      You can select the object and release the left mouse button to see that the stroke width has changed
   </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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mouseup event
      polygon.on("mouseup", () => {
         polygon.set("strokeWidth", 33);
         canvas.renderAll();
      });
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : Montrez comment un objet répond à un événement mousedown

Regardons un exemple de code pour voir comment un objet polygone réagit lorsque l'événement mousedown est déclenché. Lorsque l'utilisateur appuie sur le bouton, l'événement mousedown se produit. Ici, nous pouvons voir que l'objet répond à l'événement mousedown en modifiant sa largeur de trait de 33 à 2.

<!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 mousedown event</h2>
   <p>
      You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
   </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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 33,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mousedown event
      polygon.on("mousedown", () => {
         polygon.set("strokeWidth", 2);
         canvas.renderAll();
      });
   </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 de la souris à 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!