自定义View之绘图篇（三）：文字（Text）

顺境也好，逆境也好，人生就是一场对种种困难无尽无休的斗争，一场以寡敌众的战斗。——泰戈尔

相关文章：

自定义View之绘图篇（一）：基础图形的绘制

自定义View之绘图篇（二）：路径（Path）

一、文字

相关方法预览：

//普通设置
paint.setAntiAlias(true); //指定是否使用抗锯齿功能  如果使用会使绘图速度变慢 默认false
setStyle(Paint.Style.FILL);//绘图样式  对于设文字和几何图形都有效
setTextAlign(Align.LEFT);//设置文字对齐方式  取值：align.CENTER、align.LEFT或align.RIGHT 默认align.LEFT
paint.setTextSize(12);//设置文字大小

//样式设置
paint.setFakeBoldText(true);//设置是否为粗体文字
paint.setUnderlineText(true);//设置下划线
paint.setTextSkewX((float) -0.25);//设置字体水平倾斜度  普通斜体字是-0.25
paint.setStrikeThruText(true);//设置带有删除线效果 

//其它设置
paint.setTextScaleX(2);//只会将水平方向拉伸  高度不会变

setAntiAlias(boolean var1)这个方法这里就不再累诉了。

1、文本绘图样式

先来看看下面这个例子：

        mPaint.setStrokeWidth(5);
        mPaint.setTextSize(80);
        //设置绘图样式 为填充
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText("我是一颗小小的石头", 100,100, mPaint);

        //设置绘图样式 为描边
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawText("我是一颗小小的石头", 100,300, mPaint);

        //设置绘图样式 为填充且描边
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawText("我是一颗小小的石头", 100,500, mPaint);

效果图：

2、setTextAlign(Paint.Align align) 文字的对齐方式

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(80);
        //设置对齐方式  左对齐
        mPaint.setTextAlign(Paint.Align.LEFT);
        canvas.drawText("小小的石头", 500,100, mPaint);//点（500,100）在文本的左边

        //设置对齐方式  中间对齐
        mPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText("小小的石头", 500,200, mPaint);//点（500,100）在文本的中间

        //设置对齐方式  右对齐
        mPaint.setTextAlign(Paint.Align.RIGHT);
        canvas.drawText("小小的石头", 500,300, mPaint);//点（500,100）在文本的右边

3、文字样式设置

        canvas.drawText("小小的石头", 200, 100, mPaint); //不带任何效果

        mPaint.setFakeBoldText(true);//是否粗体文字
        mPaint.setUnderlineText(true);//设置下划线
        mPaint.setStrikeThruText(true);//设置删除线效果
        canvas.drawText("小小的石头", 200, 200, mPaint);

4、文字倾斜度设置

        mPaint.setTextSkewX(-0.25f);
        canvas.drawText("小小的石头", 100, 100, mPaint);

        mPaint.setTextSkewX(0.25f);
        canvas.drawText("小小的石头", 100, 200, mPaint);

        mPaint.setTextSkewX(-0.5f);
        canvas.drawText("小小的石头", 100, 300, mPaint);

可见普通斜体字是-0.25f，大于-0.25f 向左倾斜，小于 -0.25f 向右倾斜。

5、水平拉伸设置

        mPaint.setTextScaleX(1);//不拉伸
        canvas.drawText("小小的石头", 100, 100, mPaint);

        mPaint.setTextScaleX(2);//水平方向拉伸2倍
        canvas.drawText("小小的石头", 100, 200, mPaint);

        mPaint.setTextScaleX(3);//水平方向拉伸3倍
        canvas.drawText("小小的石头", 100, 300, mPaint);

由上可以发现，仅是水平方向拉伸，高度并未改变。

canvas绘制文字

1、drawText

方法预览：

drawText(String text, float x, float y, Paint paint)

drawText(char[] text, int index, int count, float x, float y, Paint paint)

drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

drawTextRun(char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, Paint paint)

drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)

第一个构造函数 ： 是最普通的。

第二个构造函数 ： text 字节数组；index 表示第一个要绘制的文字索引；count 需要绘制的文字个数。

第三个构造函数 ： text 表示字符 （注意与上面比较）；start 开始截取字符的索引号；end 结束截取字符的索引号。（注意和上面的区别） [start , end ) 包含 start 但不包含 end

第四个构造函数和第五个构造函数 ： contextIndex 和 index 相同 ； contextCount 大于等于 count ； isRtl 表示排列顺序，true 表示正序，false 表示倒序（这里的倒是指第一个字符变到最后一个字符，最后一个字符变到第一个字符）。 注意了drawTextRun方法是在 skd23 才引入的方法。

       canvas.drawText("我是一颗小小的石头".toCharArray(), 1, 4, 100, 100, mPaint);

        canvas.drawText("我是一颗小小的石头", 1, 4, 100, 200, mPaint);

        //最小sdk23
        canvas.drawTextRun("我是一颗小小的石头".toCharArray(), 1, 4, 1, 4, 100, 300, true, mPaint);

        canvas.drawTextRun("我是一颗小小的石头".toCharArray(), 1, 4, 1, 4, 100, 400, false, mPaint);

2、drawPosText

方法预览：

drawPosText(String text, float[] pos, Paint paint)

drawPosText(char[] text, int index, int count, float[] pos, Paint paint)

这里的参数含义和 drawText 方法的参数一样。我们来看个简单的例子：

        float[] pos = {100, 100, 200, 200, 300, 300, 400, 400, 500, 500, 600, 600};
        canvas.drawPosText("我是一颗小小", pos, mPaint);

3、drawTextOnPath

方法预览：

drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)

drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

参数含义：

index，count ： 和上面截取参数含义一样，这里不再累诉。

hOffset ： 与路径起点的水平偏移量 ，正数向 X 轴正方

形移动（下移）；负数向 X 轴负方向移动

（上移） 如果是圆弧：正数是顺时针的偏移

量；反之是逆时针的偏移量

vOffset ： 与路径中心的垂直偏移量，正数向 Y 轴正方

形移动（右移）；负数向 Y 轴负方向移动

（左移）

        mPath.moveTo(100,100);
        mPath.lineTo(800,100);
        canvas.drawTextOnPath("我是一颗小小的石头",mPath,10,-10,mPaint);

路径为圆弧的例子：

        mPath.addCircle(500,500,200, Path.Direction.CW);
        canvas.drawTextOnPath("我是一颗小小的石头",mPath,40,-20,mPaint);

4、Typeface（字体样式设置）

方法预览：

setTypeface(Typeface typeface)

Typeface是用来设置字体样式的，通过paint.setTypeface()来指定。可以指定系统中的字体样式，也可以指定自定义的样式文件中获取。要构建Typeface时，可以指定所用样式的正常体、斜体、粗体等，如果指定样式中，没有相关文字的样式就会用系统默认的样式来显示，一般默认是宋体。

参数类型是枚举类型，枚举值如下：

  1. Typeface.NORMAL //正常体
  2. Typeface.BOLD //粗体
  3. Typeface.ITALIC //斜体
  4. Typeface.BOLD_ITALIC //粗斜体

a、系统字体

方法预览：

create(String familyName, int style) //字体名

create(Typeface family, int style)  //类型

defaultFromStyle(int style)       //默认类型

我们来看一个简单的例子：

        typeface = Typeface.create("宋体", Typeface.NORMAL);
        mPaint.setTypeface(typeface);
        canvas.drawText("我是一颗小小的石头", 100, 100, mPaint);

        typeface = Typeface.create("楷体", Typeface.NORMAL);
        mPaint.setTypeface(typeface);
        canvas.drawText("我是一颗小小的石头", 100, 200, mPaint);

从上图可以看出来，设置楷体根本没起作用，在系统的字体当中没有找到楷体。

b、自定义字体

方法预览：

createFromAsset(AssetManager mgr, String path) //Asset中获取

createFromFile(File path) //文件路径获取

createFromFile(String path) //外部路径获取

由于后面两个方法比较简单，主要来看一下第一个方法。

首先在main下创建assets文件夹，然后在assets文件夹创建fonts文件夹，最后在fonts文件夹下放入font1.ttf，如图：

        typeface = Typeface.createFromAsset(mContext.getAssets(), "fonts/font1.ttf");
        //Typeface.createFromFile(mContext.getFilesDir()+"/font1.ttf")
        mPaint.setTypeface(typeface);
        canvas.drawText("我是一颗小小的石头", 100, 100, mPaint);

        typeface = Typeface.createFromAsset(mContext.getAssets(), "fonts/font2.ttf");
        mPaint.setTypeface(typeface);
        canvas.drawText("我是一颗小小的石头", 100, 200, mPaint);

效果图：

好了，到这里就结束了。

时间： 2024-08-28 11:34:50

自定义View之绘图篇（三）：文字（Text）的相关文章

自定义View之绘图篇（四）：baseLine和FontMetrics

乐观是一首激昂优美的进行曲,时刻鼓舞着你向事业的大路勇猛前进.--大仲马 相关文章: 自定义View之绘图篇(一):基础图形的绘制 自定义View之绘图篇(二):路径(Path) 自定义View之绘图篇(三):文字(Text) 了解baseLine和FontMetrics有助于我们理解drawText()绘制文字的原理,下面我们一起来看看呗. 一.baseLine 基线 记得小时候练习字母用的是四线格本,把字母写在四线格内,如下: 那么在canvas中drawText绘制文字时候,也是有规则的,

自定义View之绘图篇（六）：Canvas那些你应该知道的变换

来我的怀里 或者 让我住进你的心里 一仓央嘉措 一.什么是Canvas? 什么是Canvas?官方文档是这么介绍的: The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing

自定义View之绘图篇（一）：基础图形的绘制

生活是一面镜子,你对它笑,它就对你笑:你对它哭,它也对你哭.--萨克雷 在正文开始之前,我先抛一个脑洞大开的题目给大家:商人以45元一双进购了2双鞋子,然后亏本30一双出售.某个顾客给了他100买了2双鞋子,商人没零钱找于是拿着这100找邻居换了100的零钱,后来邻居发现这100是假的,商人只得陪了邻居100真的... 请问商人亏了多少?? 相关文章: Android自定义View之Path解析 一.Paint与Canvas 绘图需要两个工具,笔和纸.这里的 Paint相当于笔,而 Canvas

Android自定义view（初级篇）

Q1:为什么要自定义view? A:由于很多系统自带的view满足不了当前设计需求或者为了达到更良好的用户体验,增加UI的美化效果,就需要自定view Q2:自定义view有那几个步骤? A:>用户可根据需要extends View这个父类,然后重写父类的方法:如:onDraw();onMeasure()等: >如果用户在自定义View事需要添加属性,则必须在values文件夹下新建"attrs.xml"文件,在其中添加自定义属性. 下面来进行自定义view的学习. 一.最

自定义view(自定义view的时候，三个构造函数各自的作用)

package com.timeshare.tmband.Utils; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.gra

自定义View之案列篇（三）：仿QQ小红点

光棍节快到了,提前祝愿广大的单身猿猴,早日脱单,尽快找到另一半. 一直觉得 QQ 的小红点非常具有创新,新颖.要是自己也能实现类似的效果,那怎一个爽字了得. 先来看看它的最终效果: 效果图具有哪些效果: 在拉伸范围内的拉伸效果 未拉出拉伸范围释放后的效果 拉出拉伸范围再拉回的释放后的效果 拉出拉伸范围释放后的爆炸效果 涉及的相关知识点: onLayout 视图位置 saveLayer 图层相关知识 Path 的贝赛尔曲线 手势监听 ValueAnimator 属性动画 一.拉伸效果 我们先来讲解

Android自定义View的三种实现方式

在毕设项目中多处用到自定义控件,一直打算总结一下自定义控件的实现方式,今天就来总结一下吧.在此之前学习了郭霖大神博客上面关于自定义View的几篇博文,感觉受益良多,本文中就参考了其中的一些内容. 总结来说,自定义控件的实现有三种方式,分别是:组合控件.自绘控件和继承控件.下面将分别对这三种方式进行介绍. (一)组合控件 组合控件,顾名思义就是将一些小的控件组合起来形成一个新的控件,这些小的控件多是系统自带的控件.比如很多应用中普遍使用的标题栏控件,其实用的就是组合控件,那么下面将通过实现一个简单

Android进阶之绘制-自定义View完全掌握(三)

自定义View系列的第三篇博客,我们来学习如何实现自定义下拉框. 今天的程序,我们来实现这样的一个效果. 布局非常简单,我们直接开始编码. 修改activity_main.xml文件的代码. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:

android 自定义View【2】对话框取色&amp;色盘取色的实现

android 自定义View[2]对话框取色&色盘取色的实现    上一篇文章基本介绍了android自定义view的流程:继承view,复写view的一些方法.实现简单的自定义view.这篇文章主要介绍的是系统对话框取色功能,然后顺便介绍升级版,色盘取色[类似于ps中的吸管,对图片点击相应位置,获取那个位置的颜色]. 一.概述:通过该例子了解以下内容: 1.进一步了解android 自定义view. 2.知道如何获取图片上的颜色值. 3.监听屏幕touch,实现移动的时候自动取色.[onDr