Wie erstelle ich mit FabricJS eine Leinwand mit Fortschrittscursor?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine Leinwand mit Fortschrittscursor?

王林

Freigeben： 2023-08-24 14:53:08

nach vorne

639 Leute haben es durchsucht

如何使用 FabricJS 创建带有进度光标的画布？

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)

Nach dem Login kopieren

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>  <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
Beispiel 2
In diesem Beispiel fügen wir der Leinwand einen Kreis zusammen mit einem Fortschrittscursor hinzu.
<!DOCTYPE html> <html> <head>  <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>
Nach dem Login kopieren
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!