Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit Fortschrittscursor?
Wie erstelle ich mit FabricJS eine Leinwand mit Fortschrittscursor?
- 王林nach vorne
- 2023-08-24 14:53:08611Durchsuche
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)Parameter
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.
Beispiel 1
defaultCursor-Eigenschaft akzeptiert einen
String, 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. <!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>Beispiel 2
In diesem Beispiel fügen wir der Leinwand einen Kreis zusammen mit einem Fortschrittscursor 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 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!