Inhaltsverzeichnis
Grammatik
Parameter
Beispiel 2
Using the getCompleteStyleDeclaration method
Using the getCompleteStyleDeclaration method for comparison
Heim Web-Frontend js-Tutorial Wie erhalte ich mit FabricJS die vollständige Stildeklaration eines Zeichens in IText?

Wie erhalte ich mit FabricJS die vollständige Stildeklaration eines Zeichens in IText?

Sep 17, 2023 am 11:57 AM

Wie erhalte ich mit FabricJS die vollständige Stildeklaration eines Zeichens in IText?

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die vollständige Stildeklaration eines Zeichens in IText erhalten. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ​​ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir die vollständige Stildeklaration eines Zeichens mithilfe der Methode getCompleteStyleDeclaration abrufen.

Grammatik

getCompleteStyleDeclaraction(lineIndex: Number, charIndex: Number): Object
Nach dem Login kopieren

Parameter

  • lineIndex – Dieser Parameter akzeptiert eine Number , die die Zeilennummer der gewünschten Zeichen angibt.

  • charIndex – Dieser Parameter akzeptiert eine Zahl, die die Position des Zeichens in der Zeile darstellt.

Beispiel 1

Verwenden Sie die getCompleteStyleDeclaration-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die Methode getCompleteStyleDeclaration verwendet wird. In diesem Fall geben wir die vollständige Stildeklaration für das zweite Zeichen von Zeile 0 zurück. Dem Zeichen wurde eine hellgelbe Texthintergrundfarbe zugewiesen.

<!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 id="Using-the-getCompleteStyleDeclaration-method">Using the getCompleteStyleDeclaration method</h2>
   <p>You can open console from dev tools and see the style declaration for 2nd character of the first line</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit ametconsectetur adipiscing elit.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(253,255,214,0.9)",
                  },
               },
            },
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
   </script>
</body>
</html>
Nach dem Login kopieren

Beispiel 2

Verwenden Sie zum Vergleich die Methode getCompleteStyleDeclaration

Sehen wir uns ein Codebeispiel zum Vergleichen von Stildeklarationen für zwei Zeichen mit demselben Index in zwei verschiedenen Zeilen an. In diesem Beispiel haben wir das zweite Zeichen in Zeile 1 und Zeile 2 ausgewählt, sodass diese mit unterschiedlichen Texthintergrundfarben hervorgehoben wurden. Da wir für diese beiden Zeichen unterschiedliche Füllfarben, textBackgroundColor und fontSize angegeben haben, werden diese Werte in unserer Konsole angezeigt und wir können die Änderungen vergleichen.

<!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 id="Using-the-getCompleteStyleDeclaration-method-for-comparison">Using the getCompleteStyleDeclaration method for comparison</h2>
   <p>You can open console from dev tools and see the style declaration for both lines</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(130,111,201,0.6)",
                     fontSize: 30,
                     fill: "black",
                  },
               },
               1: {
                  1: {
                     textBackgroundColor: "rgba(52,235,189,0.5)",
                     fontSize: 90,
                     fill: "green",
                  },
               },
            },
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object for 2nd character of 1st line is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
      console.log(
         "The style object for 2nd character of 2nd line is as follows: ",
         itext.getCompleteStyleDeclaration(1, 1)
      );
   </script>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS die vollständige Stildeklaration eines Zeichens in IText?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

Beispielfarben JSON -Datei Beispielfarben JSON -Datei Mar 03, 2025 am 12:35 AM

Beispielfarben JSON -Datei

Erstellen Sie Ihre eigenen AJAX -Webanwendungen Erstellen Sie Ihre eigenen AJAX -Webanwendungen Mar 09, 2025 am 12:11 AM

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

8 atemberaubende JQuery -Seiten -Layout -Plugins 8 atemberaubende JQuery -Seiten -Layout -Plugins Mar 06, 2025 am 12:48 AM

8 atemberaubende JQuery -Seiten -Layout -Plugins

Was ist ' this ' in JavaScript? Was ist ' this ' in JavaScript? Mar 04, 2025 am 01:15 AM

Was ist ' this ' in JavaScript?

Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter Mar 05, 2025 am 12:54 AM

Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter

10 Mobile Cheat Sheets für die mobile Entwicklung 10 Mobile Cheat Sheets für die mobile Entwicklung Mar 05, 2025 am 12:43 AM

10 Mobile Cheat Sheets für die mobile Entwicklung

See all articles