Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?

Wie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?

PHPznach vorne: 2023-09-10 14:45:141463Durchsuche

如何使用 FabricJS 在移动对象上创建带有等待光标的三角形？

In diesem Tutorial erstellen wir mit FabricJS ein Dreieck mit einem Objekt, das darauf wartet, dass sich der Cursor bewegt. „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., die den nativen Cursor unter der Haube wiederverwenden. Die Eigenschaft

moveCursor legt den Stil des Cursors fest, wenn sich das Objekt auf der Leinwand bewegt.

Syntax

new fabric.Triangle({ moveCursor: String }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das moveCursor ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionstaste

moveCursor – Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, den Standard-Cursorwert festzulegen, wenn dieses Dreiecksobjekt auf der Leinwand bewegt wird. Dieser Wert bestimmt den Typ des Cursors, der beim Verschieben von Canvas-Objekten verwendet wird.

Beispiel 1

Standardcursorwert, wenn sich ein Objekt auf der Leinwand bewegt

Wenn wir uns standardmäßig um ein dreieckiges Objekt auf der Leinwand bewegen, ist der Cursortyp Bewegen. Sehen wir uns ein Codebeispiel an, um dies zu verstehen.

<!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>Default cursor value when object is moved around the canvas</h2>
   <p>You can move around the triangle to see that the default cursor type is "move"</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#eedc82",
         stroke: "#bcb88a",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Beispiel 2

Übergabe der moveCursor-Eigenschaft als Schlüssel zum Wert

In diesem Beispiel übergeben wir den moveCursor-Schlüssel an die Dreiecksklasse mit dem Wert „await“. Dadurch wird sichergestellt, dass der Cursorwert wartet, während wir uns um das Objekt im Canvas bewegen. Das folgende Codebeispiel veranschaulicht dies.

<!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>Passing the moveCursor property as key with a value</h2>
   <p>You can move around the triangle to see that the cursor type is "wait"</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#eedc82",
         stroke: "#bcb88a",
         strokeWidth: 5,
         moveCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

字符串对象 ul

Stellungnahme：

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

Vorheriger Artikel：Wie erhalte ich mit FabricJS die linke Grenze eines Wortes in IText?Nächster Artikel：Wie erhalte ich mit FabricJS die linke Grenze eines Wortes in IText?

In Verbindung stehende Artikel

Mehr sehen