Web-Frontend
js-Tutorial
Wie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?
Wie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?
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. Wir verwenden die Ereignisse mouseup und mousedown, um zu demonstrieren, wie Polygonobjekte auf vom Benutzer ausgelöste Mausereignisse reagieren.
Grammatik
polygon.on(“mouseup”, callbackFunction); polygon.on(“mousedown”, callbackFunction);
Beispiel 1: Zeigen Sie, wie ein Objekt auf Mouseup-Ereignisse reagiert
Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn das mouseup-Ereignis ausgelöst wird. Das mouseup-Ereignis tritt ein, wenn der Benutzer die linke Maustaste loslässt. Sobald das mouseup-Ereignis ausgelöst wird, beträgt die Strichstärke hier 33.
<!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 how the object reacts to the mouseup event</h2>
<p>
You can select the object and release the left mouse button to see that the stroke width has changed
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 50, y: 50 },
{ x: 50, y: 0 },
],
{
left: 100,
top: 30,
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the mouseup event
polygon.on("mouseup", () => {
polygon.set("strokeWidth", 33);
canvas.renderAll();
});
</script>
</body>
</html>
Beispiel 2: Zeigen Sie, wie ein Objekt auf ein Mousedown-Ereignis reagiert
Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn das Ereignis „mousedown“ ausgelöst wird. Wenn der Benutzer die Taste drückt, tritt das Ereignis „mousedown“ ein. Hier können wir sehen, dass das Objekt auf das Mousedown-Ereignis reagiert, indem es seine Strichstärke von 33 auf 2 ändert.
<!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 how the object reacts to the mousedown event</h2>
<p>
You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 50, y: 50 },
{ x: 50, y: 0 },
],
{
left: 100,
top: 30,
fill: "red",
stroke: "blue",
strokeWidth: 33,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the mousedown event
polygon.on("mousedown", () => {
polygon.set("strokeWidth", 2);
canvas.renderAll();
});
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS ein Polygonobjekt auf Mausereignisse reagieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Ersetzen Sie Stringzeichen in JavaScript
JQuery überprüfen, ob das Datum gültig ist
Mar 01, 2025 am 08:51 AM
JQuery überprüfen, ob das Datum gültig ist
HTTP-Debugging mit Knoten und HTTP-Konsole
Mar 01, 2025 am 01:37 AM
HTTP-Debugging mit Knoten und HTTP-Konsole
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Benutzerdefinierte Google -Search -API -Setup -Tutorial
JQuery fügen Sie Scrollbar zu Div hinzu
Mar 01, 2025 am 01:30 AM
JQuery fügen Sie Scrollbar zu Div hinzu
