Wie erstelle ich mit FabricJS eine Leinwand mit einem unzulässigen Cursor?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine Leinwand mit einem unzulässigen Cursor?

WBOY

Freigeben： 2023-09-08 10:21:03

nach vorne

854 Leute haben es durchsucht

如何使用 FabricJS 创建带有不允许的光标的画布？

In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem unzulässigen Cursor. Ein nicht zulässiger Cursor kann verwendet werden, um anzuzeigen, dass eine angeforderte Operation nicht ausgeführt wird. not-allowed 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 zugrunde liegenden nativen Cursor wiederverwenden. Je nach Betriebssystem sieht jeder Cursor etwas anders aus. Zur Grammatik

new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)

Nach dem Login kopieren

Parameter

Element - Dieser Parameter ist Element selbst, Sie können

🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜 🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 🎜🎜🎜 des 🎜🎜🎜 Elements selbst ist 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 Eigenschaften im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite. DefaultCursor ist eine Eigenschaft, mit der wir den gewünschten Cursortyp festlegen können. 🎜🎜 🎜🎜Beispiel 1🎜🎜Die Eigenschaft defaultCursor akzeptiert eine Zeichenfolge, die den Namen des Cursors bestimmt, der auf der Leinwand verwendet werden soll. Wir setzen es auf „nicht erlaubt“, um Cursor zu verwenden, die nicht erlaubt sind. Schauen wir uns ein Beispiel für die Erstellung einer Leinwand mit einem unzulässigen Cursor in 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 not-allowed 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: "not-allowed" }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Nach dem Login kopieren
🎜Beispiel 2🎜🎜In diesem Beispiel fügen wir zusammen mit dem unzulässigen Cursor einen Kreis zur Leinwand hinzu🎜
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Canvas with not-allowed cursor using FabricJS</h2> <p>Here we have added a circle to the canvas along with the not-allowed cursor</p> <canvas id="canvas"></canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { defaultCursor: "not-allowed" }); // 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 unzulässigen Cursor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!