1# Drawing TextBlobs (ArkTS) 2 3 4## When to Use 5 6A TextBlob is a set of texts. Both a single text and a large text block can be drawn by using a TextBlob. 7 8 9This section focuses on the text drawing effect. In addition to the basic TextBlob drawing, you can add various drawing effects to the text. Common TextBlob drawing scenarios include [text stroke](#text-stroke) and [text gradient](#text-gradient). For more effects, see [Drawing Effects](drawing-effect-overview.md). 10 11 12## Basic TextBlob Drawing 13 14Canvas uses drawTextBlob() to draw TextBlobs. The function takes three arguments: a TextBlob object, and the x-coordinate and y-coordinate of the left endpoint of the text baseline. 15 16 17For details about the canvas object, see [Obtaining a Canvas and Displaying Drawing Results (ArkTS)](canvas-get-result-draw-arkts.md). 18 19 20A TextBlob object can be created in multiple ways. For details about how to create a TextBlob and how to use the API, see [TextBlob](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#textblob). 21 22 23The following uses the makeFromString() API as an example to describe how to create a TextBlob. The API accepts the following three parameters: 24 25 26- Character string text to be displayed. 27 28- Font object. font is used to set and obtain font attributes, such as the font size, text style, font alignment mode, font rendering mode, and font stroke mode. For details about the APIs, see [Font](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#font). 29 30- Text encoding mode. Currently, the following text encoding modes are supported: 31 - TEXT_ENCODING_UTF8: One byte is used to indicate UTF-8 or ASCII characters. 32 - TEXT_ENCODING_UTF16: Two bytes are used to indicate most Unicode characters. 33 - TEXT_ENCODING_UTF32: Four bytes are used to indicate all Unicode characters. 34 - TEXT_ENCODING_GLYPH_ID: Two bytes are used to indicate the glyph index. 35 36 37The sample code and effect drawing of the basic effect are as follows: 38 39 40```ts 41// Create a font object. 42const font = new drawing.Font(); 43// Set the font scale. 44font.setSize(100); 45// Create a TextBlob object. 46const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 47// Draw a TextBlob. 48canvas.drawTextBlob(textBlob, 200, 300); 49``` 50 51 52 53 54 55## Text Stroke 56 57You can also use a pen to implement the text stroke effect based on the basic TextBlob drawing. For details about the stroke effect, see [Stroke Effects](basic-drawing-effect-arkts.md#stroke-effects). 58 59The following figure shows a brief example of text strokes. 60 61```ts 62// Create a pen. 63let pen = new drawing.Pen(); 64// Set the anti-aliasing function. 65pen.setAntiAlias(true); 66// Set the stroke width. 67pen.setStrokeWidth(3.0); 68// Set the stroke color. 69pen.setColor(0xFF, 0xFF, 0x00, 0x00); 70// Create a font object. 71const font = new drawing.Font(); 72// Set the font scale. 73font.setSize(100); 74// Add the stroke effect. 75canvas.attachPen(pen); 76// Create a TextBlob object. 77const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 78// Draw a TextBlob. 79canvas.drawTextBlob(textBlob, 200, 300); 80// Remove the stroke effect. 81canvas.detachPen(); 82``` 83 84 85 86 87## Text Gradient 88 89You can also use a shader to implement the text gradient effect. For details about the shader, see [Shader Effects](complex-drawing-effect-arkts.md#shader-effects). 90 91The following is a brief example and schematic diagram of adding a linear gradient shader effect to the text: 92 93```ts 94let startPt: common2D.Point = { x: 100, y: 100 }; 95let endPt: common2D.Point = { x: 900, y: 900 }; 96let colors = [0xFFFFFF00, 0xFFFF0000, 0xFF0000FF]; 97// Create a linear gradient shader. 98let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, colors, drawing.TileMode.CLAMP); 99// Create a brush. 100let brush = new drawing.Brush(); 101// Set the shader. 102brush.setShaderEffect(shaderEffect); 103// Add the brush filling effect. 104canvas.attachBrush(brush); 105// Create a font. 106const font = new drawing.Font(); 107// Set the font scale. 108font.setSize(200); 109// Create a TextBlob. 110const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 111// Draw a TextBlob. 112canvas.drawTextBlob(textBlob, 100, 300); 113// Remove the padding effect. 114canvas.detachBrush(); 115``` 116 117 118
