In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem Fortschrittscursor. Der Fortschrittscursor zeigt an, dass das Programm im Hintergrund aktiv ist, ermöglicht dem Benutzer jedoch die Interaktion mit der Benutzeroberfläche. Progress 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 im Hintergrund wiederverwenden. Je nach Betriebssystem sieht jeder Cursor etwas anders aus. Zur Grammatik
new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Element – Dies ist das Element selbst. Sie können
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.
, der den Namen des Cursors bestimmt, der auf der Leinwand verwendet werden soll. Wir setzen es auf Progress, um den ProgressCursor zu verwenden. Werfen wir einen Blick auf den Code zum Erstellen einer Leinwand mit einem Fortschrittscursor in FabricJS. Beispiel 2<!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 progress 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: "progress"
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Nach dem Login kopieren
<!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 progress cursor using FabricJS</h2>
<p>Here we have added a circle to the canvas along with a progress cursor</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
defaultCursor: "progress"
});
// 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 Fortschrittscursor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
