Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit einem Wartecursor?
Wie erstelle ich mit FabricJS eine Leinwand mit einem Wartecursor?
- 王林nach vorne
- 2023-09-16 19:49:09998Durchsuche
In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem Wartecursor. Der Wartecursor kann verwendet werden, um ein ausgelastetes Programm im Hintergrund anzuzeigen, was den Benutzer auch daran hindern kann, mit der Schnittstelle zu interagieren. „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. Verwenden Sie native Cursor im Hintergrund wieder. Je nach Betriebssystem sieht jeder Cursor etwas anders aus.
Syntax
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Parameter
Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie viele Attribute im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite. Darunter ist „defaultCursor“ ein Attribut, mit dem wir den Cursortyp festlegen können Das Attribut akzeptiert eine Zeichenfolge, die den Cursortyp bestimmt, der auf der Leinwand verwendet werden soll. Wir stellen es so ein, dass es wartet, bis der Wartecursor verwendet wird. Schauen wir uns ein Beispiel für die Erstellung einer Leinwand mit einem Wartecursor mit FabricJS an:
<!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>Canvas with a wait cursor using FabricJS</h2> <p>Bring the cursor inside the canvas to see the changed shape of cursor</p> <canvas id="canvas"></canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { defaultCursor: "wait" }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>Beispiel 2 In diesem Beispiel fügen wir der Leinwand einen Kreis zusammen mit einem Wartecursor hinzu.
<!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>Canvas with a wait cursor using FabricJS</h2>
<p>Here we have added a circle to the canvas along with a wait cursor</p>
<canvas id="canvas"></canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
defaultCursor: "wait"
});
// Initiate a Circle instance
var circle = new fabric.Circle({
radius: 50,
fill: "green"
});
// Render the circle in canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Leinwand mit einem Wartecursor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!