suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit FabricJS eine Leinwand mit Textcursor?

Wie erstelle ich mit FabricJS eine Leinwand mit Textcursor?

WBOY
WBOYnach vorne
2023-08-23 13:25:181066Durchsuche

Wie erstelle ich mit FabricJS eine Leinwand mit Textcursor?

In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem Textcursor. Der Textcursor stellt Text dar, der ausgewählt werden kann. Text ist einer der nativen Cursorstile, die für FabricJS Canvas verfügbar sind. 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. Diese Cursor sehen je nach Betriebssystem etwas anders aus.

Syntax

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

Parameter

  • element − Dieser Parameter ist das Element selbst, Sie können document.getElementById() oder Element selbst id Komm und hol es dir. Der FabricJS-Canvas wird auf diesem Element initialisiert.

  • options (optional) − Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die Leinwand bereitstellt. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften im Zusammenhang mit der Leinwand zu ändern, wobei defaultCursor eine Eigenschaft ist, mit der wir den Cursortyp festlegen können.

Beispiel 1

Die Eigenschaft defaultCursor akzeptiert einen string, der den Namen des Cursors bestimmt, der auf der Leinwand verwendet werden soll. Wir setzen es auf „Text“, um den Textcursor zu verwenden. Schauen wir uns einen Code an, der FabricJS verwendet, um eine Leinwand mit TextCursor zu erstellen. 

<!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 text 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: "text"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Beispiel 2

In diesem Beispiel fügen wir zusammen mit dem Textcursor 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 text cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with a text cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "text"
      });
      // 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 Textcursor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Zwei-Zeiger-Trick-JavaScript-ProgrammNächster Artikel：Zwei-Zeiger-Trick-JavaScript-Programm

In Verbindung stehende Artikel

Mehr sehen