Heim > Artikel > Web-Frontend > Wie kann ich mit FabricJS ein Objekt hervorheben, wenn sich die Maus darüber befindet?
Wie kann ich mit FabricJS ein Objekt hervorheben, wenn sich die Maus darüber befindet?
- 王林nach vorne
- 2023-08-29 11:21:16792Durchsuche
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 ): SelfParameter
- 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
mouseover
undmouseout 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>
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>
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!