Erstellen und Anzeigen von Text

Flash Player 10 und höher, Adobe AIR 1.5 und höher

Die Klassen in der Flash Text Engine ermöglichen Ihnen, Text zu erstellen, zu formatieren und zu steuern. Die folgenden Klassen stellen die Grundbausteine für das Erstellen und Anzeigen von Text mit der Flash Text Engine dar:

  • TextElement/GraphicElement/GroupElement – Diese Klassen enthalten den Inhalt einer TextBlock-Instanz.

  • ElementFormat – Diese Klasse gibt Formatierungsattribute für den Inhalt einer TextBlock-Instanz an.

  • TextBlock – Diese Klasse dient zum Erstellen eines Textabsatzes.

  • TextLine – Dies ist eine aus der TextBlock-Klasse erstellte Textzeile.

Um Text anzuzeigen, erstellen Sie ein TextElement-Objekt aus einem String. Die Formatierungsmerkmale legen Sie dabei mit einem ElementFormat-Objekt fest. Weisen Sie das TextElement der content -Eigenschaft eines TextBlocks zu. Erstellen Sie die anzuzeigenden Textzeilen, indem Sie die TextBlock.createTextLine() -Methode aufrufen. Die createTextLine() -Methode gibt ein TextLine-Objekt zurück, das den Teil des Strings enthält, der in die angegebene Breite passt. Rufen Sie die Methode wiederholt auf, bis der gesamte String in Zeilen formatiert wurde. Wenn keine weiteren Zeilen erstellt werden müssen, wird der textLineCreationResult-Eigenschaft des TextBlock-Objekts der folgende Wert zugewiesen: TextLineCreationResult.COMPLETE . Um die Zeilen anzuzeigen, fügen Sie sie der Anzeigeliste hinzu (mit den entsprechenden Werten für die x - und y -Position).

Der folgende Code verwendet beispielsweise diese FTE-Klassen, um „Hello World! This is Flash Text Engine!“ mit dem Standardformat und den standardmäßigen Schriftartwerten anzuzeigen. In diesem einfachen Beispiel wird nur eine einzelne Textzeile erstellt.

package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
     
    public class HelloWorldExample extends Sprite 
    { 
        public function HelloWorldExample() 
        { 
            var str = "Hello World! This is Flash Text Engine!"; 
            var format:ElementFormat = new ElementFormat(); 
            var textElement:TextElement = new TextElement(str, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = textElement; 
             
            var textLine1:TextLine = textBlock.createTextLine(null, 300); 
            addChild(textLine1); 
            textLine1.x = 30; 
            textLine1.y = 30; 
        } 
    } 
}

Die Parameter für createTextLine() geben die Zeile an, ab der mit einer neuen Zeile begonnen wird, sowie die Breite der Zeile in Pixel. Die neue Zeile wird im Allgemeinen bei der vorherigen Zeile begonnen, im Falle der ersten Zeile ist der Zeilenanfang jedoch null .

Hinzufügen von GraphicElement- und GroupElement-Objekten

Sie können ein GraphicElement-Objekt zu einem TextBlock-Objekt zuweisen, um ein Bild oder ein grafisches Element anzuzeigen. Erstellen Sie hierzu einfach eine Instanz der GraphicElement-Klasse aus einer Grafik oder einem Bild, und weisen Sie der TextBlock.content -Eigenschaft diese Instanz zu. Erstellen Sie die Textzeile, indem Sie TextBlock.createTextline() wie gewohnt aufrufen. Im folgenden Beispiel werden zwei Textzeilen erstellt, eine mit einem GraphicElement-Objekt und eine mit einem TextElement-Objekt.
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
    import flash.display.Shape; 
    import flash.display.Graphics; 
 
    public class GraphicElementExample extends Sprite 
    { 
        public function GraphicElementExample() 
        { 
            var str:String = "Beware of Dog!"; 
     
            var triangle:Shape = new Shape(); 
            triangle.graphics.beginFill(0xFF0000, 1); 
            triangle.graphics.lineStyle(3); 
            triangle.graphics.moveTo(30, 0); 
            triangle.graphics.lineTo(60, 50); 
            triangle.graphics.lineTo(0, 50); 
            triangle.graphics.lineTo(30, 0); 
            triangle.graphics.endFill(); 
     
            var format:ElementFormat = new ElementFormat(); 
            format.fontSize = 20; 
             
            var graphicElement:GraphicElement = new GraphicElement(triangle, triangle.width, triangle.height, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = graphicElement; 
            var textLine1:TextLine = textBlock.createTextLine(null, triangle.width); 
            textLine1.x = 50; 
            textLine1.y = 110; 
            addChild(textLine1); 
     
            var textElement:TextElement = new TextElement(str, format); 
            textBlock.content = textElement; 
            var textLine2 = textBlock.createTextLine(null, 300); 
            addChild(textLine2); 
            textLine2.x = textLine1.x - 30; 
            textLine2.y = textLine1.y + 15; 
        } 
    } 
}
Sie können ein GroupElement-Objekt erstellen, um eine Gruppe von TextElement-, GraphicElement- oder anderen GroupElement-Objekten zu erstellen. Ein GroupElement kann der content -Eigenschaft eines TextBlock-Objekts zugewiesen werden. Der Parameter für den GroupElement() -Konstruktor ist ein Vektor, der auf die Text-, Grafik- und Gruppenelemente verweist, aus denen die Gruppe zusammengesetzt ist. Im folgenden Beispiel werden zwei grafische Elemente und ein Textelement gruppiert und als eine Einheit zu einem Textblock zugewiesen.
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
    import flash.display.Shape; 
    import flash.display.Graphics; 
     
    public class GroupElementExample extends Sprite 
    { 
        public function GroupElementExample() 
        { 
            var str:String = "Beware of Alligators!"; 
 
            var triangle1:Shape = new Shape(); 
            triangle1.graphics.beginFill(0xFF0000, 1); 
            triangle1.graphics.lineStyle(3); 
            triangle1.graphics.moveTo(30, 0); 
            triangle1.graphics.lineTo(60, 50); 
            triangle1.graphics.lineTo(0, 50); 
            triangle1.graphics.lineTo(30, 0); 
            triangle1.graphics.endFill(); 
             
            var triangle2:Shape = new Shape(); 
            triangle2.graphics.beginFill(0xFF0000, 1); 
            triangle2.graphics.lineStyle(3); 
            triangle2.graphics.moveTo(30, 0); 
            triangle2.graphics.lineTo(60, 50); 
            triangle2.graphics.lineTo(0, 50); 
            triangle2.graphics.lineTo(30, 0); 
            triangle2.graphics.endFill(); 
             
            var format:ElementFormat = new ElementFormat(); 
            format.fontSize = 20; 
            var graphicElement1:GraphicElement = new GraphicElement(triangle1, triangle1.width, triangle1.height, format); 
            var textElement:TextElement = new TextElement(str, format); 
            var graphicElement2:GraphicElement = new GraphicElement(triangle2, triangle2.width, triangle2.height, format); 
            var groupVector:Vector.<ContentElement> = new Vector.<ContentElement>(); 
            groupVector.push(graphicElement1, textElement, graphicElement2); 
            var groupElement = new GroupElement(groupVector); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = groupElement; 
            var textLine:TextLine = textBlock.createTextLine(null, 800); 
            addChild(textLine); 
            textLine.x = 100; 
            textLine.y = 200; 
        } 
    } 
}

Ersetzen von Text

Sie können Text in einer TextBlock-Instanz ersetzen, indem Sie die TextElement.replaceText() -Methode aufrufen. Hierdurch wird Text in dem TextElement-Objekt ersetzt, das Sie der TextBlock.content -Eigenschaft zugewiesen haben.

Im folgenden Beispiel wird die Methode replaceText() zunächst zum Einfügen von Text am Anfang der Zeile, dann zum Anhängen von Text am Ende der Zeile und schließlich zum Ersetzen von Text in der Mitte der Zeile verwendet.
package 
{ 
    import flash.text.engine.*; 
    import flash.display.Sprite; 
 
    public class ReplaceTextExample extends Sprite 
    { 
        public function ReplaceTextExample() 
        { 
     
            var str:String = "Lorem ipsum dolor sit amet"; 
            var fontDescription:FontDescription = new FontDescription("Arial"); 
            var format:ElementFormat = new ElementFormat(fontDescription); 
            format.fontSize = 14; 
            var textElement:TextElement = new TextElement(str, format); 
            var textBlock:TextBlock = new TextBlock(); 
            textBlock.content = textElement; 
            createLine(textBlock, 10); 
            textElement.replaceText(0, 0, "A text fragment: ");  
            createLine(textBlock, 30);  
            textElement.replaceText(43, 43, "...");   
            createLine(textBlock, 50);     
            textElement.replaceText(23, 28, "(ipsum)"); 
            createLine(textBlock, 70); 
        } 
             
        function createLine(textBlock:TextBlock, y:Number):void { 
            var textLine:TextLine = textBlock.createTextLine(null, 300); 
            textLine.x = 10; 
            textLine.y = y; 
            addChild(textLine); 
        } 
    } 
}

Mit der Methode replaceText() wird der durch die Parameter beginIndex und endIndex angegebene Text durch den Text ersetzt, der durch den Parameter newText angegeben wird. Die Werte der Parameter beginIndex und endIndex sind gleich, und die Methode replaceText() fügt den Text an dieser Position ein. Andernfalls würden die Zeichen, die durch die Parameter beginIndex und endIndex angegeben werden, durch den neuen Text ersetzt.