Bagaimana untuk menyerlahkan objek apabila tetikus berada di atasnya menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menyerlahkan objek apabila tetikus berada di atasnya menggunakan FabricJS?

王林

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

ke hadapan

876 orang telah melayarinya

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

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. FabricJS menyediakan kami set acara yang luas yang boleh kami gunakan untuk mencipta kesan yang berbeza.

Memandangkan kami mahu perubahan berlaku pada tetikus, kami akan menggunakan acara mouse:move yang menyala apabila tetikus bergerak. Keperluan kedua kami adalah untuk menyerlahkan objek, ini boleh dicapai dengan menggunakan sifat opacity, namun, apabila terdapat banyak objek pada kanvas dan kami ingin menyerlahkan objek yang berlegar di atasnya, kami perlu menggunakan forEachObject kaedah. Kaedah ini menjalankan gelung untuk-setiap untuk fungsi yang diberikan, dengan itu melaksanakannya untuk setiap objek.

Tatabahasa

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

Salin selepas log masuk

Parameter

panggilan balik - Sifat ini menerima fungsi yang mengambil objek semasa sebagai argumen pertama, indeks sebagai argumen kedua dan tatasusunan semua objek sebagai ketiga.
konteks - Sifat ini menerima Objek yang mewakili konteks di mana fungsi panggil balik dipanggil.

Contoh 1: Paparkan kesan sorotan dengan hanya satu objek

Mari lihat contoh kod untuk melihat cara menambah kesan serlahan apabila hanya terdapat satu objek pada kanvas. Kami telah melampirkan peristiwa mouseover dan mouseout pada objek poligon (dalam kes ini, segi tiga). mouseover dilaksanakan apabila tetikus bergerak ke atas objek, mouseout dilaksanakan apabila tetikus melayang di luar objek. Sebaik sahaja kami menggerakkan kursor ke atas elemen, kelegapannya akan berubah daripada 0.5 kepada 1 dan sebaliknya.

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

Salin selepas log masuk

Contoh 2: Paparkan kesan sorotan berbilang objek

Dalam contoh ini, kita akan melihat cara untuk menyerlahkan objek apabila tetikus melayang di atasnya. Setiap kali tetikus bergerak, peristiwa mouse:move dicetuskan. Di sini kita menggunakan formula jarak matematik untuk mengira jarak antara dua titik dalam satah koordinat melalui kedudukan "x" dan "y" penunjuk tetikus. Jarak ini kemudiannya dibahagikan dengan 50, iaitu nombor arbitrari yang menjadikan (dist/50) pecahan lebih kecil (kita tahu bahawa apabila penyebut semakin besar, pecahan semakin kecil), supaya apabila ia dibahagikan dengan 1, kita mendapat a Nilai lebih besar dan kelegapan meningkat.

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

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara menyerlahkan objek pada tetikus menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk menyerlahkan objek apabila tetikus berada di atasnya menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!