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:08674Durchsuche

如何使用 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)

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.

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich die Randdeckkraft eines Kreises beim Verschieben mit FabricJS ein?Nächster Artikel：Wie stelle ich die Randdeckkraft eines Kreises beim Verschieben mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen