Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit einem unzulässigen Cursor?
Wie erstelle ich mit FabricJS eine Leinwand mit einem unzulässigen Cursor?
- WBOYnach vorne
- 2023-09-08 10:21:03847Durchsuche
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) 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>
<!-- 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 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>🎜Beispiel 2🎜🎜In diesem Beispiel fügen wir zusammen mit dem unzulässigen Cursor einen Kreis zur Leinwand 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 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>🎜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!