我是靠谱客的博主 如意铃铛,这篇文章主要介绍Android绘图之drawText绘制文本相关(4)Android 绘图学习1 Paint绘制文字相关:2 Canvas相关,现在分享给大家,希望可以做个参考。

Android 绘图学习

android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable

绘制文字相关:
Paint 相关设置,
Canvas相关设置。

1 Paint绘制文字相关:

相关函数说明:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mPaint.setStrokeWidth(10);//设置画笔宽度 mPaint.setColor(Color.BLUE);//设置画笔颜色 mPaint.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint.setTextSize();//字体大小 mPaint.setTextAlign();//对齐方式 mPaint.setShadowLayer();//阴影 mPaint.setUnderlineText();//是否显示下划线 mPaint.setFakeBoldText();//true 表示粗体,false表示正常 mPaint.setTextSkewX();//float,设置文本在水平方向上的倾斜,负数表示右斜,正数表示左斜 mPaint.setTextScaleX();//设置比例因子,默认为1,当大于1的时候表示横向拉伸, // 当小于1的时候表示横向压缩。该方法往往用于一些特效字体的显示场合。 mPaint.setStrikeThruText();//设置文本删除线 mPaint.setLetterSpacing();//设置行间距,默认是0. mPaint.setTypeface();//设置文本字体样式 **暂不讲解** mPaint.setLinearText();//设置是否打开线性文本标识 mPaint.setHinting();//设置画笔的隐藏模式 mPaint.setFontFeatureSettings();//设置字体的样式,这个样式和CSS样式很类似 mPaint.setStrokeMiter(float miter );//设置笔画的倾斜度

1.1 setStrokeWidth,setColor

画笔越宽字体越宽,画笔颜色决定了文字颜色。

实例代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(7);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint1.setTextSize(100); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint2.setTextSize(100);

在这里插入图片描述

1.2 setStyle 设置画笔样式

设置画笔样式:分别设置Paint Style 为FILL,FILL_AND_STROKE,STROKE的字体效果

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔样式 mPaint2.setTextSize(100); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint3.setTextSize(100);

STROKE会有镂空的效果,其他两种由于画笔宽度的不同也会导致绘制的问题粗细有很大差异。
在这里插入图片描述

1.3 setTextSize 设置字体大小

设置不同的字体大小,单位为px,如果使用dp记得转换。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔样式 mPaint2.setTextSize(130); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint3.setTextSize(150);

在这里插入图片描述

1.4 setTextAlign

设置文字对齐方式,取值:align.CENTER、align.LEFT或align.RIGHT三种

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setTextAlign(Paint.Align.LEFT); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setTextAlign(Paint.Align.CENTER); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint3.setTextSize(100); mPaint3.setTextAlign(Paint.Align.RIGHT); canvas.drawText("学习Android 绘图!",200,200, mPaint1); canvas.drawText("学习Android 绘图!",200,500, mPaint2); canvas.drawText("学习Android 绘图!",200,800, mPaint3);

在这里插入图片描述

根据绘制文字的结果,可以知道所谓对齐方式是以开始绘制点为相对的。

1.6 setShadowLayer 设置阴影

复制代码
1
2
3
4
5
6
7
8
9
10
11
public void setShadowLayer(float radius, float dx, float dy, int shadowColor) ; /** * 清除阴影 */ public void clearShadowLayer() { setShadowLayer(0, 0, 0, 0); } //判断是否有阴影 public boolean hasShadowLayer() ; setShadowLayer(float radius, float dx, float dy, int shadowColor)

参数说明:
radius:模糊半径,越大越模糊。
dx:阴影离开文字的x横向距离。
dy:阴影离开文字的Y横向距离。
shadowColor:阴影颜色。

阴影的方向可以通过dx,dy值得正负决定。

  • 如果阴影的颜色是不透明的,它的透明度将是paint的透明度,否则将是阴影颜色的透明度

  • radius为0时,shadowLayer会被清除,dx,dy可以控制显示的位置方向,可以在文字的上下左右等方向。

  • dx,dy为0是和文字重叠,dx>0 在文字右侧,dx<0在文字左侧,dy>0在文字下侧,dy<0在文字上面。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setShadowLayer(10,20,20,Color.GRAY); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setShadowLayer(10,-20,20,Color.GRAY); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100); mPaint3.setShadowLayer(10,-20,-20,Color.GRAY);

在这里插入图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setShadowLayer(10,0,20,Color.GRAY); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setShadowLayer(10,20,0,Color.GRAY); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100); mPaint3.setShadowLayer(0,-20,-20,Color.GRAY);

在这里插入图片描述

1.7 下划线,粗体,删除线

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setUnderlineText(true);//下划线 mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setFakeBoldText(true);//粗体 mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100); mPaint3.setStrikeThruText(true);//删除线

在这里插入图片描述

1.8 setTextSkewX();

参数类型float,设置文本在水平方向上的倾斜,负数表示右斜,正数表示左斜,默认为0,一般斜体设置为-0.25

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setTextSkewX(1);//斜体 mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setTextSkewX(-1);//斜体 mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100);

在这里插入图片描述

默认为0,通常的斜体字为-0.25,向右倾斜。

1.9 setTextScaleX();

//设置比例因子,默认为1,当大于1的时候表示横向拉伸,小于1时横向压缩。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setTextScaleX(2); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setTextScaleX(0.5f); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100);

在这里插入图片描述

1.10 setLetterSpacing 字间距设置默认0,需要最低api21支持.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(3);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint1.setTextSize(100); mPaint1.setLetterSpacing(0.05f); mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint2.setStrokeWidth(3);//设置画笔宽度 mPaint2.setColor(Color.BLUE);//设置画笔颜色 mPaint2.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint2.setTextSize(100); mPaint2.setLetterSpacing(0.5f); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.FILL);//设置画笔样式 mPaint3.setTextSize(100);

在这里插入图片描述

1.11setTypeface 设置文本字体样式

可以设置系统中已有字体样式,也可以从文件中读取字体。

如何创建TypeFace:

根据系统存在的字体生成Typeface
//根据提供的字体名字和style创建typeFace,如果从名字获取的字体信息为null,将使用default字体。
//style包含四种样式:NORMAL,BOLD,ITALIC,BOLD_ITALIC

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
public static Typeface create(String familyName, @Style int style)//从已存在的TypeFace生成新的typeface public static Typeface create(Typeface family, @Style int style) ; public static @NonNull Typeface create(@Nullable Typeface family, @IntRange(from = 1, to = 1000) int weight, boolean italic); //默认字体样式 public static Typeface defaultFromStyle(@Style int style) { return sDefaults[style]; }

Style:
Typeface.NORMAL //正常体
Typeface.BOLD //粗体
Typeface.ITALIC //斜体
Typeface.BOLD_ITALIC //粗斜体

读取字体文件,生成TypeFace

复制代码
1
2
3
4
5
6
//从Asset文件中读取字体文件,创建TypeFace public static Typeface createFromAsset(AssetManager mgr, String path); //从file文件中读取文件创建typeface public static Typeface createFromFile(@Nullable File file) ;

利用TypeFace换系统支持的其他字体:

代码示例:

复制代码
1
2
3
4
5
6
7
Typeface typeface1 = Typeface.create("黑体",Typeface.NORMAL); Typeface typeface2 = Typeface.create("宋体",Typeface.NORMAL); Typeface typeface3 = Typeface.createFromAsset(getContext().getAssets(),"bijiben.TTF"); mPaint1.setTypeface(typeface1); mPaint2.setTypeface(typeface2); mPaint3.setTypeface(typeface3);

在这里插入图片描述

2 Canvas相关

2.1 简单函数

复制代码
1
2
3
4
5
6
7
8
9
10
public void drawText(@NonNull char[] text, int index, int count, float x, float y, @NonNull Paint paint)public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint)public void drawText(@NonNull String text, int start, int end, float x, float y, @NonNull Paint paint)public void drawText(@NonNull CharSequence text, int start, int end, float x, float y, @NonNull Paint paint)

上面四个函数时最简单的绘制text函数。
drawText(@NonNull char[] text, int index, int count, float x, float y, @NonNull Paint paint)
drawText(@NonNull String text, float x, float y,@NonNull Paint paint)

index,count: 表示text数组中从index开始,共count个数的文字绘制。
x,y: 表示在(x,y)的坐标绘制text,这里的x,y不是绘制文本左上角的坐标。
**注意:**这里的(x,y)坐标不是绘制文本时左上角的坐标,
详情请看drawText详述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
/** * Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted * based on the Align setting in the paint. * * @param text The text to be drawn * @param x The x-coordinate of the origin of the text being drawn * @param y The y-coordinate of the baseline of the text being drawn * @param paint The paint used for the text (e.g. color, size, style) */ public void drawText(@NonNull char[] text, int index, int count, float x, float y, @NonNull Paint paint);

看上面(x,y)坐标的解释,x是开始绘制的x轴坐标的原点,重点来了,y是文本的baseline(基准线)的开始坐标,看下图,后面会有文章专门讲解。
在这里插入图片描述

2.2drawTextOnPath

复制代码
1
2
3
4
5
6
7
8
9
10
public void drawTextOnPath(@NonNull char[] text, int index, int count, @NonNull Path path, float hOffset, float vOffset, @NonNull Paint paint) { super.drawTextOnPath(text, index, count, path, hOffset, vOffset, paint); } public void drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset, float vOffset, @NonNull Paint paint) { super.drawTextOnPath(text, path, hOffset, vOffset, paint); }

沿着路径绘制文字,参数解析:

float hOffset : 与路径起始点的水平偏移距离
float vOffset : 与路径中心的垂直偏移量

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint1.setStrokeWidth(70);//设置画笔宽度 mPaint1.setColor(Color.BLUE);//设置画笔颜色 mPaint1.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint1.setTextSize(100); mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint3.setStrokeWidth(3);//设置画笔宽度 mPaint3.setColor(Color.BLUE);//设置画笔颜色 mPaint3.setStyle(Paint.Style.STROKE);//设置画笔样式 mPaint3.setTextSize(100); path1 = new Path(); path1.addCircle(400,400,300, Path.Direction.CW); path2= new Path(); path2.addCircle(400,1200,300, Path.Direction.CCW); canvas.drawCircle(400,400,300,mPaint3); canvas.drawCircle(400,1200,300,mPaint3); canvas.drawPoint(400,400,mPaint1); canvas.drawPoint(400,1200,mPaint1); canvas.drawTextOnPath("学习Android 绘图!",path1,0,0, mPaint3); canvas.drawTextOnPath("学习Android 绘图!",path2,50,50, mPaint3);

在这里插入图片描述
首先可以看到一个文字顺时针,一个逆时针绘制,设置了偏移(0,0)的从0度开始绘制,沿着圆形外边缘绘制。
设置了(50,50)偏移的,开始绘制点离0度有一定距离,文字整体向园内偏。

注意:
hOffset The distance along the path to add to the text’s starting position
vOffset The distance above(-) or below(+) the path to position the text
float hOffset : 与路径起始点的水平偏移距离,正沿绘制方向,负沿绘制反方向
float vOffset : 与路径中心的垂直偏移量,正向外,负向内。

复制代码
1
2
canvas.drawTextOnPath("学习Android 绘图!",path2,-50,-50, mPaint3);

在这里插入图片描述

2.3 drawTextRun

复制代码
1
2
3
4
5
6
7
8
9
10
public void drawTextRun(@NonNull char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, @NonNull Paint paint) { super.drawTextRun(text, index, count, contextIndex, contextCount, x, y, isRtl, paint); } public void drawTextRun(@NonNull CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, @NonNull Paint paint) { super.drawTextRun(text, start, end, contextStart, contextEnd, x, y, isRtl, paint); }

drawTextRun 由于api等级较高,没有看具体用法,所以就不在这里讲了。

更多文字相关请看Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)

最后

以上就是如意铃铛最近收集整理的关于Android绘图之drawText绘制文本相关(4)Android 绘图学习1 Paint绘制文字相关:2 Canvas相关的全部内容,更多相关Android绘图之drawText绘制文本相关(4)Android内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(66)

评论列表共有 0 条评论

立即
投稿
返回
顶部