Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyerlahkan objek apabila tetikus berada di atasnya menggunakan FabricJS?
Bagaimana untuk menyerlahkan objek apabila tetikus berada di atasnya menggunakan FabricJS?
- 王林ke hadapan
- 2023-08-29 11:21:16792semak imbas
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
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>
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>
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!