Wie kann ich mit FabricJS ein Objekt hervorheben, wenn sich die Maus darüber befindet?-js-Tutorial-php.cn

Wie kann ich mit FabricJS ein Objekt hervorheben, wenn sich die Maus darüber befindet?

王林

Freigeben： 2023-08-29 11:21:16

nach vorne

875 Leute haben es durchsucht

如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象？

Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz 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. FabricJS stellt uns einen umfangreichen Satz an Ereignissen zur Verfügung, mit denen wir unterschiedliche Effekte erzeugen können.

Da wir möchten, dass die Änderungen bei Mouseover wirksam werden, verwenden wir das Ereignis mouse:move, das ausgelöst wird, wenn sich die Maus bewegt. Unsere zweite Anforderung besteht darin, ein Objekt hervorzuheben. Dies kann durch die Verwendung der Eigenschaft „opacity“ erreicht werden. Wenn sich jedoch viele Objekte auf der Leinwand befinden und wir das Objekt hervorheben möchten, das darüber schwebt, müssen wir „forEachObject“ verwenden Methode. Diese Methode führt eine for-each-Schleife für die angegebene Funktion aus und führt sie dadurch für jedes Objekt aus. Grammatik

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

Nach dem Login kopieren

Parameter

callback
– Diese Eigenschaft akzeptiert eine Funktion, die das aktuelle Objekt als erstes Argument, den Index als zweites Argument und ein Array aller Objekte als drittes verwendet.
context
– Diese Eigenschaft akzeptiert ein Object, das den Kontext darstellt, in dem die Callback-Funktion aufgerufen wird.
Beispiel 1: Hervorhebungseffekt mit nur einem Objekt anzeigen

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man einen Hervorhebungseffekt hinzufügt, wenn sich nur ein Objekt auf der Leinwand befindet. Wir haben die Ereignisse

mouseover

und

mouseout an das Polygonobjekt (in diesem Fall das Dreieck) angehängt. mouseover wird ausgeführt, wenn sich die Maus über das Objekt bewegt, mouseout wird ausgeführt, wenn die Maus außerhalb des Objekts schwebt. Sobald wir den Cursor über das Element bewegen, ändert sich seine Deckkraft von 0,5 auf 1 und umgekehrt.

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

Nach dem Login kopieren

Beispiel 2: Hervorhebungseffekt mehrerer Objekte anzeigen

In diesem Beispiel sehen wir, wie man ein Objekt hervorhebt, wenn die Maus darüber fährt. Jedes Mal, wenn sich die Maus bewegt, wird das Ereignis

mouse:move

ausgelöst. Hier verwenden wir die mathematische Abstandsformel, um den Abstand zwischen zwei Punkten in der Koordinatenebene durch die „x“- und „y“-Positionen des Mauszeigers zu berechnen. Dieser Abstand wird dann durch 50 dividiert, was eine beliebige Zahl ist, die den (dist/50)-Bruch kleiner macht (wir wissen, dass der Bruch kleiner wird, wenn der Nenner größer wird), so dass wir bei Division durch 1 erhalten a Der Wert ist größer und die Deckkraft nimmt zu.

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

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie Sie mit FabricJS Objekte beim Mouseover hervorheben.

Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS ein Objekt hervorheben, wenn sich die Maus darüber befindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!