Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?
Wie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?
- PHPznach vorne
- 2023-09-10 14:45:141419Durchsuche
In diesem Tutorial erstellen wir mit FabricJS ein Dreieck mit einem Objekt, das darauf wartet, dass sich der Cursor bewegt. „wait“ ist einer der verfügbaren nativen Cursorstile und kann auch im FabricJS-Canvas verwendet werden. FabricJS bietet verschiedene Arten von Cursorn wie Standard, vollständiger Bildlauf, Fadenkreuz, Spaltengröße, Zeilengröße usw., die den nativen Cursor unter der Haube wiederverwenden. Die Eigenschaft
moveCursor legt den Stil des Cursors fest, wenn sich das Objekt auf der Leinwand bewegt.
Syntax
new fabric.Triangle({ moveCursor: String }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das moveCursor ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.
moveCursor – Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, den Standard-Cursorwert festzulegen, wenn dieses Dreiecksobjekt auf der Leinwand bewegt wird. Dieser Wert bestimmt den Typ des Cursors, der beim Verschieben von Canvas-Objekten verwendet wird.
Optionstaste
Beispiel 1
Standardcursorwert, wenn sich ein Objekt auf der Leinwand bewegt
Wenn wir uns standardmäßig um ein dreieckiges Objekt auf der Leinwand bewegen, ist der Cursortyp Bewegen. Sehen wir uns ein Codebeispiel an, um dies zu verstehen.
<!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>Default cursor value when object is moved around the canvas</h2>
<p>You can move around the triangle to see that the default cursor type is "move"</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Beispiel 2
Übergabe der moveCursor-Eigenschaft als Schlüssel zum Wert
In diesem Beispiel übergeben wir den moveCursor-Schlüssel an die Dreiecksklasse mit dem Wert „await“. Dadurch wird sichergestellt, dass der Cursorwert wartet, während wir uns um das Objekt im Canvas bewegen. Das folgende Codebeispiel veranschaulicht dies.
<!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>Passing the moveCursor property as key with a value</h2>
<p>You can move around the triangle to see that the cursor type is "wait"</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
moveCursor: "wait",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!