suchen

Heim >Web-Frontend >js-Tutorial >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:091069Durchsuche

如何使用 FabricJS 创建带有等待光标的画布？

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 em> Element selbst, Sie können document.getElementById() oder verwenden id des Elements selbst Abgeleitet . Der FabricJS-Canvas wird auf diesem Element initialisiert.

  • 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!

字符串 对象
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich einen regulären Ausdruck, der nur spezielle Formeln akzeptiert?Nächster Artikel：Wie erstelle ich einen regulären Ausdruck, der nur spezielle Formeln akzeptiert?

In Verbindung stehende Artikel

Mehr sehen