Comment mettre en évidence un objet lorsque la souris passe dessus à l'aide de FabricJS ?-js tutoriel-php.cn

Comment mettre en évidence un objet lorsque la souris passe dessus à l'aide de FabricJS ?

王林

Libérer： 2023-08-29 11:21:16

avant

875 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. FabricJS nous fournit un ensemble complet d'événements que nous pouvons utiliser pour créer différents effets.

Puisque nous voulons que les changements se produisent au survol de la souris, nous utiliserons l'événement mouse:move qui se déclenche lorsque la souris bouge. Notre deuxième exigence est de mettre en évidence un objet, cela peut être réalisé en utilisant la propriété opacity, cependant, lorsqu'il y a beaucoup d'objets sur le canevas et que nous voulons mettre en évidence l'objet qui survole celui-ci, nous devons utiliser forEachObject méthode. Cette méthode exécute une boucle for-each pour la fonction donnée, l'exécutant ainsi pour chaque objet.

Grammaire

forEachObject( callback: function, context: object ): Self

Copier après la connexion

Paramètres

callback - Cette propriété accepte une fonction qui prend l'objet actuel comme premier argument, l'index comme deuxième argument et un tableau de tous les objets comme troisième.
context - Cette propriété accepte un Object qui représente le contexte dans lequel la fonction de rappel est appelée.

Exemple 1 : Afficher l'effet de surbrillance avec un seul objet

Regardons un exemple de code pour voir comment ajouter un effet de surbrillance lorsqu'il n'y a qu'un seul objet sur le canevas. Nous avons attaché les événements mouseover et mouseout à l'objet polygone (dans ce cas, le triangle). mouseover est exécuté lorsque la souris se déplace sur l'objet, mouseout est exécuté lorsque la souris survole l'objet. Dès que l'on déplace le curseur sur l'élément, son opacité passera de 0,5 à 1 et vice versa.

<!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 highlight effect with only one object</h2>
   <p>
      You can see that the object is being highlighted when the cursor is moved onto the element
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2, 
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using mouseover event
      triangle.on("mouseover", () => {
         triangle.set("opacity", 1);
         canvas.renderAll();
      });
      
      // Using mouseout event
      triangle.on("mouseout", () => {
         triangle.set("opacity", 0.5);
         canvas.renderAll();
      });
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : Afficher l'effet de surbrillance de plusieurs objets

Dans cet exemple, nous verrons comment mettre en évidence un objet lorsque la souris le survole. Chaque fois que la souris bouge, l'événement mouse:move est déclenché. Ici, nous utilisons la formule mathématique de distance pour calculer la distance entre deux points dans le plan de coordonnées via les positions « x » et « y » du pointeur de la souris. Cette distance est ensuite divisée par 50, qui est un nombre arbitraire qui rend la fraction (dist/50) plus petite (nous savons que plus le dénominateur grandit, plus la fraction diminue), de sorte que lorsqu'elle est divisée par 1, nous obtenons a La valeur est plus grande et l'opacité augmente.

<!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 highlight effect with multiple objects</h2>
   <p>
      You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2,
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 500,
               top: 79,
               angle: 15,
               scaleX: 0.7,
               scaleY: 0.7,
               fill: "red",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 340,
               top: 90,
               angle: -15,
               scaleX: 2,
               scaleY: 2,
               fill: "black",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 280,
               top: 190,
               angle: 21,
               scaleX: 0.9,
               scaleY: 0.9,
               fill: "#ffa500",
            })
         );
      });
      
      // Using mouse:move event
      canvas.on("mouse:move", (options) => {
        
        // Get the mouse coordinates
         var p = canvas.getPointer(options.e);
         canvas.forEachObject(function (obj) {
            
            // Get distance between objects and mouse pointer
            var distX = Math.abs(p.x - obj.left),
            distY = Math.abs(p.y - obj.top),
            dist = Math.round(
               Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2))
            );
            
            // Update the opacity as a proportion of distance
            obj.set("opacity", 1 / (dist / 50));
         });
         canvas.renderAll();
      });
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment mettre en évidence des objets au survol 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!