Wie erstelle ich mit FabricJS ein Dreieck mit wartendem Cursor auf einem sich bewegenden Objekt?-js-Tutorial-php.cn

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

PHPz

Freigeben： 2023-09-10 14:45:14

nach vorne

1462 Leute haben es durchsucht

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, 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.

< /ul>
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>  <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>
Nach dem Login kopieren
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>  <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>
Nach dem Login kopieren
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!