Drawing and Displaying Simple Text (ArkTS)

Overview

In a simple user interface, only a few lines of static text need to be displayed, such as the text on a label, button, menu item, or status bar. In this case, you only need to select a proper font, size, and color to complete the rendering.

Related Attributes

In this scenario, the following text style attributes are involved. For details, see TextStyle.

• color: font color. The default value is white. Note that the font color must be different from the canvas color to ensure that the text can be properly displayed.

• fontSize: font size, in units of px. The value is a floating point number. The default value is 14.0.

How to Develop

1. Obtain the canvas object through context.

   let canvas = context.canvas;
   

   Index.ets

2. Initialize the text style. Set the font color to red and font size to 50.

   // Obtain the text style.
   let myTextStyle: text.TextStyle = {
     // Text color.
     color: {
       alpha: 255,
       red: 255,
       green: 0,
       blue: 0
     },
     // Text size.
     fontSize: 100
   };
   

   Index.ets

3. Initialize the paragraph style.

   let myParagraphStyle: text.ParagraphStyle = {
     textStyle: myTextStyle,
   };
   

   Index.ets

4. Initialize the paragraph object and add text.

   let fontCollection = text.FontCollection.getGlobalInstance();
   let ParagraphGraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection);
   // Push the text style.
   ParagraphGraphBuilder.pushStyle(myTextStyle);
   // Add text.
   ParagraphGraphBuilder.addText("Hello World");
   

   Index.ets

5. Layout the paragraph and draw the text.

   // Generate a paragraph.
   let paragraph = ParagraphGraphBuilder.build();
   // Layout.
   paragraph.layoutSync(1250);
   // Draw the text.
   paragraph.paint(canvas, 0, 100);
   

   Index.ets

Effect