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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
