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

Wie erstelle ich mit FabricJS eine Leinwand mit einem Wartecursor?

王林

Freigeben： 2023-09-16 19:49:09

nach vorne

1095 Leute haben es durchsucht

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

Nach dem Login kopieren

Parameter

Element – Dieser Parameter ist das
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>
   
   <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>
```
Nach dem Login kopieren
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>

Nach dem Login kopieren

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!