想在画布上写字用 TextBlob 绘制自定义文本在 ArkUI 里显示文字一般用Text组件。但如果你在 Canvas 上画画想在图形旁边写个标题、给按钮加个标签怎么办这时候就需要TextBlob。TextBlob 是什么TextBlob翻译过来就是文本块——由一个或多个相同字体的字符组成的字块。你可以把它理解成已经排好版的文字字体、大小、内容都确定了随时可以画到画布上。下面是 TextBlob 文本绘制的整体流程普通文字自定义排版创建 Font 设置字体大小选择创建方式makeFromString 从字符串创建makeFromPosText 指定每个字位置获得 TextBlob 对象创建 Brush 设置文字颜色attachBrush 到 Canvascanvas.drawTextBlob 绘制文字detachBrush 释放创建 TextBlob方式一从字符串创建最常用import{drawing}fromkit.ArkGraphics2D;letfontnewdrawing.Font();font.setSize(48);// 字体大小 48 像素lettextBlobdrawing.TextBlob.makeFromString(Hello HarmonyOS,font);makeFromString接收三个参数text要绘制的文字fontFont 对象控制字体大小、样式等encoding编码类型可选默认 UTF-8目前只有 UTF-8 生效方式二指定每个字的位置如果你想让每个字出现在不同的位置比如沿着一条曲线排列用makeFromPosTextletfontnewdrawing.Font();font.setSize(48);lettextHello;letpoints:common2D.Point[][{x:0,y:0},{x:40,y:10},{x:80,y:0},{x:120,y:-10},{x:160,y:0}];lettextBlobdrawing.TextBlob.makeFromPosText(text,points.length,points,font);每个Point对应一个字的位置。上面这段代码让 “Hello” 的每个字母在 y 方向上有轻微的上下波动做出手写体的感觉。注意points数组的长度必须等于字形个数用font.countText(text)获取。在 Canvas 上绘制canvas.drawTextBlob(textBlob,100,200);drawTextBlob的后两个参数是绘制的起始坐标 (x, y)。Font控制字体样式Font 对象控制文字的大小、样式等属性letfontnewdrawing.Font();font.setSize(48);// 字体大小单位是物理像素countText方法可以计算文本的字形数量letcountfont.countText(Hello);// 返回 5完整示例在画布上画文字import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classTextRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 画一个红色矩形constbrushnewdrawing.Brush();brush.setColor(255,255,80,80);canvas.attachBrush(brush);canvas.drawRect(50,50,300,150);canvas.detachBrush();// 在矩形上方写文字consttextBrushnewdrawing.Brush();textBrush.setColor(255,255,255,255);// 白色文字canvas.attachBrush(textBrush);letfontnewdrawing.Font();font.setSize(36);lettextBlobdrawing.TextBlob.makeFromString(点击按钮,font);canvas.drawTextBlob(textBlob,100,120);canvas.detachBrush();}}这段代码画了一个红色矩形然后在矩形上面写了白色的文字点击按钮。给文字添加特效时可以按下面的流程操作阴影效果普通文字需要绘制带特效的文字创建 TextBlob需要什么特效?创建 ShadowLayer直接设置颜色设置模糊半径设置偏移方向设置阴影颜色brush.setShadowLayerbrush.setColorattachBrush drawTextBlob给文字加阴影还记得上一篇提到的ShadowLayer吗它目前只在绘制文字时生效。配合 TextBlob 就能做出文字阴影效果import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classShadowTextRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 创建阴影层模糊半径5向右偏移3向下偏移3黑色阴影letshadowColor:common2D.Color{alpha:128,red:0,green:0,blue:0};letshadowLayerdrawing.ShadowLayer.create(5,3,3,shadowColor);constbrushnewdrawing.Brush();brush.setColor(255,50,50,200);// 蓝色文字brush.setShadowLayer(shadowLayer);canvas.attachBrush(brush);letfontnewdrawing.Font();font.setSize(60);lettextBlobdrawing.TextBlob.makeFromString(阴影文字,font);canvas.drawTextBlob(textBlob,50,150);canvas.detachBrush();}}ShadowLayer.create的四个参数blurRadius阴影模糊半径越大越散xx 方向偏移正值向右yy 方向偏移正值向下color阴影颜色这段代码画出了带阴影的蓝色文字看起来有立体感。小结TextBlob文本块用makeFromString创建用drawTextBlob绘制。Font控制字体大小用countText计算字形数。makeFromPosText可以指定每个字的位置适合做特殊排版。ShadowLayer给文字加阴影目前只对文字生效。下一篇我们来看 PathEffect——怎么画虚线、用自定义形状做虚线效果。
鸿蒙开发-想在Canvas上写字？TextBlob文本绘制详解
想在画布上写字用 TextBlob 绘制自定义文本在 ArkUI 里显示文字一般用Text组件。但如果你在 Canvas 上画画想在图形旁边写个标题、给按钮加个标签怎么办这时候就需要TextBlob。TextBlob 是什么TextBlob翻译过来就是文本块——由一个或多个相同字体的字符组成的字块。你可以把它理解成已经排好版的文字字体、大小、内容都确定了随时可以画到画布上。下面是 TextBlob 文本绘制的整体流程普通文字自定义排版创建 Font 设置字体大小选择创建方式makeFromString 从字符串创建makeFromPosText 指定每个字位置获得 TextBlob 对象创建 Brush 设置文字颜色attachBrush 到 Canvascanvas.drawTextBlob 绘制文字detachBrush 释放创建 TextBlob方式一从字符串创建最常用import{drawing}fromkit.ArkGraphics2D;letfontnewdrawing.Font();font.setSize(48);// 字体大小 48 像素lettextBlobdrawing.TextBlob.makeFromString(Hello HarmonyOS,font);makeFromString接收三个参数text要绘制的文字fontFont 对象控制字体大小、样式等encoding编码类型可选默认 UTF-8目前只有 UTF-8 生效方式二指定每个字的位置如果你想让每个字出现在不同的位置比如沿着一条曲线排列用makeFromPosTextletfontnewdrawing.Font();font.setSize(48);lettextHello;letpoints:common2D.Point[][{x:0,y:0},{x:40,y:10},{x:80,y:0},{x:120,y:-10},{x:160,y:0}];lettextBlobdrawing.TextBlob.makeFromPosText(text,points.length,points,font);每个Point对应一个字的位置。上面这段代码让 “Hello” 的每个字母在 y 方向上有轻微的上下波动做出手写体的感觉。注意points数组的长度必须等于字形个数用font.countText(text)获取。在 Canvas 上绘制canvas.drawTextBlob(textBlob,100,200);drawTextBlob的后两个参数是绘制的起始坐标 (x, y)。Font控制字体样式Font 对象控制文字的大小、样式等属性letfontnewdrawing.Font();font.setSize(48);// 字体大小单位是物理像素countText方法可以计算文本的字形数量letcountfont.countText(Hello);// 返回 5完整示例在画布上画文字import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classTextRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 画一个红色矩形constbrushnewdrawing.Brush();brush.setColor(255,255,80,80);canvas.attachBrush(brush);canvas.drawRect(50,50,300,150);canvas.detachBrush();// 在矩形上方写文字consttextBrushnewdrawing.Brush();textBrush.setColor(255,255,255,255);// 白色文字canvas.attachBrush(textBrush);letfontnewdrawing.Font();font.setSize(36);lettextBlobdrawing.TextBlob.makeFromString(点击按钮,font);canvas.drawTextBlob(textBlob,100,120);canvas.detachBrush();}}这段代码画了一个红色矩形然后在矩形上面写了白色的文字点击按钮。给文字添加特效时可以按下面的流程操作阴影效果普通文字需要绘制带特效的文字创建 TextBlob需要什么特效?创建 ShadowLayer直接设置颜色设置模糊半径设置偏移方向设置阴影颜色brush.setShadowLayerbrush.setColorattachBrush drawTextBlob给文字加阴影还记得上一篇提到的ShadowLayer吗它目前只在绘制文字时生效。配合 TextBlob 就能做出文字阴影效果import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classShadowTextRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 创建阴影层模糊半径5向右偏移3向下偏移3黑色阴影letshadowColor:common2D.Color{alpha:128,red:0,green:0,blue:0};letshadowLayerdrawing.ShadowLayer.create(5,3,3,shadowColor);constbrushnewdrawing.Brush();brush.setColor(255,50,50,200);// 蓝色文字brush.setShadowLayer(shadowLayer);canvas.attachBrush(brush);letfontnewdrawing.Font();font.setSize(60);lettextBlobdrawing.TextBlob.makeFromString(阴影文字,font);canvas.drawTextBlob(textBlob,50,150);canvas.detachBrush();}}ShadowLayer.create的四个参数blurRadius阴影模糊半径越大越散xx 方向偏移正值向右yy 方向偏移正值向下color阴影颜色这段代码画出了带阴影的蓝色文字看起来有立体感。小结TextBlob文本块用makeFromString创建用drawTextBlob绘制。Font控制字体大小用countText计算字形数。makeFromPosText可以指定每个字的位置适合做特殊排版。ShadowLayer给文字加阴影目前只对文字生效。下一篇我们来看 PathEffect——怎么画虚线、用自定义形状做虚线效果。
