1# 字块绘制（ArkTS） 2 3 4## 场景介绍 5 6字块（TextBlob）是指文本的集合。无论是单个的文字还是大块的文本，都可以通过字块来绘制。 7 8 9本节聚焦于文字的绘制效果，除了基本的字块绘制之外，还可以给文字添加各种绘制效果。常见的字块绘制场景包括[文字描边](#文字描边)、[文字渐变](#文字渐变)等，更多效果请见[绘制效果](drawing-effect-overview.md)。 10 11 12## 基本字块绘制 13 14Canvas通过drawTextBlob()来绘制字块。函数接受三个参数：TextBlob字块对象，以及文字基线左端点的x坐标和y坐标。 15 16 17画布Canvas对象具体可见[画布的获取与绘制结果的显示（ArkTS）](canvas-get-result-draw-arkts.md)。 18 19 20字块对象可以通过多种方式创建得到，详细的字块创建方式和接口使用请参考[TextBlob](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#textblob)。 21 22 23此处以使用makeFromString()接口创建字块为例，接口接受3个参数，分别为： 24 25 26- 需要显示的字符串text。 27 28- font字型对象。其中font用于设置和获取字体的各种属性，如字体大小、文本样式、字体对齐方式、字体渲染方式、字体描边方式等，详细的API介绍请参考[Font](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#font)。 29 30- 文本编码方式。当前支持的文本编码方式如下： 31 - TEXT_ENCODING_UTF8：使用1个字节表示UTF-8或ASCII； 32 - TEXT_ENCODING_UTF16：使用2个字节表示大部分unicode； 33 - TEXT_ENCODING_UTF32：使用4个字节表示全部unicode； 34 - TEXT_ENCODING_GLYPH_ID：使用2个字节表示glyph index。 35 36 37基本效果的示例代码和效果图如下： 38 39 40```ts 41// 创建字型对象 42const font = new drawing.Font(); 43// 设置字体大小 44font.setSize(100); 45// 创建字块对象 46const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 47// 绘制字块 48canvas.drawTextBlob(textBlob, 200, 300); 49``` 50 51 52 53 54 55## 文字描边 56 57基于基本的字块绘制，还可以通过画笔实现文字描边效果，描边效果的更多介绍请参考[描边效果](basic-drawing-effect-arkts.md#描边效果)。 58 59文字描边的简要示例和示意图如下： 60 61```ts 62// 创建画笔 63let pen = new drawing.Pen(); 64// 设置抗锯齿 65pen.setAntiAlias(true); 66// 设置描边线宽 67pen.setStrokeWidth(3.0); 68// 设置描边颜色 69pen.setColor(0xFF, 0xFF, 0x00, 0x00); 70// 创建字型对象 71const font = new drawing.Font(); 72// 设置字体大小 73font.setSize(100); 74// 添加画笔描边效果 75canvas.attachPen(pen); 76// 创建字块对象 77const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 78// 绘制字块 79canvas.drawTextBlob(textBlob, 200, 300); 80// 去除描边效果 81canvas.detachPen(); 82``` 83 84 85 86 87## 文字渐变 88 89基于基本字块绘制，还可以通过着色器实现文字渐变的效果，着色器的更多介绍请参考[着色器效果](complex-drawing-effect-arkts.md#着色器效果)。 90 91以下为文字添加了线性渐变着色器效果的简要示例和示意图： 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// 创建线性渐变着色器 98let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, colors, drawing.TileMode.CLAMP); 99// 创建画刷 100let brush = new drawing.Brush(); 101// 设置着色器 102brush.setShaderEffect(shaderEffect); 103// 添加画刷填充效果 104canvas.attachBrush(brush); 105// 创建字型 106const font = new drawing.Font(); 107// 设置字体大小 108font.setSize(200); 109// 创建字块 110const textBlob = drawing.TextBlob.makeFromString("Hello world", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 111// 绘制字块 112canvas.drawTextBlob(textBlob, 100, 300); 113// 去除填充效果 114canvas.detachBrush(); 115``` 116 117 118
