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 selected und deselected, um zu demonstrieren, wie ein Polygonobjekt auf die Auswahl und Aufhebung der Auswahl von Objekten durch den Benutzer reagieren kann.
polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);
Schauen wir uns ein Codebeispiel an, wie man ein Polygonobjekt auf das ausgewählte-Ereignis reagieren lässt. Durch Klicken auf das Objekt wird das selected-Ereignis ausgelöst, das die Callback-Funktion ausführt. In diesem Fall ändert sich jedes Mal, wenn wir auf das Polygonobjekt klicken, seine Füllfarbe und die aufgezeichnete Ausgabe wird angezeigt.
<!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 selected event</h2>
<p>Select the object to see the event callback function fired</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: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "black",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
console.log("The polygon object is selected");
});
</script>
</body>
</html>
Sehen wir uns ein Codebeispiel an, um zu sehen, wie man ein Polygon-Objekt auf das Deselect-Ereignis reagieren lässt. Hier wird das Ereignis ausgelöst, sobald die Auswahl des Polygonobjekts aufgehoben wird, wodurch sich auch die Füllfarbe ä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 deselected event</h2>
<p>Deselect the object to see the event callback function fired</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: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
console.log("The polygon object is deselected");
});
</script>
</body>
</html>
In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lässt.
Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
