本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接
我们在自定义View中有的时候会想自己绘制文字,自己绘制文字的时候,我们通常希望把文字精确定位,文字居中(水平、垂直)是普遍的需求,所以这里就以文字居中为例,看一下android中的文字应该如何绘制,它与Java又有什么区别。
先来看看我们的目标,见下图
上图是我打开了“显示布局边界”后截的图,所有会有好多框框。
仔细观察上图文字区域,我们会发现文字区域中有5条颜色不同的线。其中红色的为baseline,其余的4条线按着从上到下的顺序分别是:
top:浅灰色
ascent:黄色
descent:蓝色
bottom:绿色
这4条线到底是什么?android开发文档中已经进行了解释。
top | The maximum distance above the baseline for the tallest glyph in the font at a given text size. |
ascent | The recommended distance above the baseline for singled spaced text. |
descent | The recommended distance below the baseline for singled spaced text. |
bottom | The maximum distance below the baseline for the lowest glyph in the font at a given text size. |
我们先稍微跑一下题
如果你尝试过将两个TextView上下排列,没有margin和padding,那么你一定会发现,两个TextView文字之间依然是有空隙的。首先我们需要设置includeFontPadding为false!但是依然有空隙,这时的空隙就是由top与ascent之间的空隙和bottom与descent直接的空隙造成的了。
那5条线的位置是由使用的字体和字号决定的。Paint提供了获取上面5条线位置的方法。
一般情况下,我们使用的字符是在ascent与descent之间的,所以我们让ascent与descent之间的部分相对我们的View居中即可。
以baseline为基准,向上为负,向下为正。ascent为负数,descent为正数。
Canvas中的drawText中的总坐标是baseline,所以我们这里要先算出baseline的位置才行。
baseline = (mHeight - (mFontMetricsInt.descent - mFontMetricsInt.ascent)) / 2 - mFontMetricsInt.ascent
使得ascent到View的是上边距与descent到View下边距距离一致即可,此段距离加上ascent的绝对值(-ascent)即为baseline的位置
private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setStrokeWidth(3); mPaint.setTextSize(60); mPaint.setTextAlign(Paint.Align.CENTER); mPaint.setStyle(Paint.Style.STROKE); mFontMetricsInt = mPaint.getFontMetricsInt(); } @Override public void onDraw(Canvas canvas) { int x; if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左 x = mWidth / 2 - (int) (mStringWidth / 2); } else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中 x = mWidth / 2; } else { //右 x = mWidth / 2 + (int) (mStringWidth / 2); } int xFrom = mWidth / 2 - (int) (mStringWidth / 2); int xTo = mWidth / 2 + (int) (mStringWidth / 2); // baseline = (mHeight - (mFontMetricsInt.descent - mFontMetricsInt.ascent)) / 2 - mFontMetricsInt.ascent // baseline = (mHeight - mFontMetricsInt.ascent - mFontMetricsInt.descent) / 2 int y = (mHeight - mFontMetricsInt.ascent - mFontMetricsInt.descent) / 2; Log.d(TAG, "ascent: " + mFontMetricsInt.ascent); Log.d(TAG, "descent: " + mFontMetricsInt.descent); Log.d(TAG, "top: " + mFontMetricsInt.top); Log.d(TAG, "bottom: " + mFontMetricsInt.bottom); Log.d(TAG, "baseline: " + y); // baseline mPaint.setColor(Color.RED); canvas.drawLine(xFrom, y, xTo, y, mPaint); // ascent mPaint.setColor(Color.YELLOW); canvas.drawLine(xFrom, y + mFontMetricsInt.ascent, xTo, y + mFontMetricsInt.ascent, mPaint); // descent mPaint.setColor(Color.BLUE); canvas.drawLine(xFrom, y + mFontMetricsInt.descent, xTo, y + mFontMetricsInt.descent, mPaint); // top mPaint.setColor(Color.LTGRAY); canvas.drawLine(xFrom, y + mFontMetricsInt.top, xTo, y + mFontMetricsInt.top, mPaint); // bottom mPaint.setColor(Color.GREEN); canvas.drawLine(xFrom, y + mFontMetricsInt.bottom, xTo, y + mFontMetricsInt.bottom, mPaint); mPaint.setColor(Color.BLACK); canvas.drawText(TEST_STRING, x, y, mPaint); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; } private int mWidth; private int mHeight; private float mStringWidth; private float measureText() { mStringWidth = mPaint.measureText(TEST_STRING); return mStringWidth; }
注意:上面的那几条线的位置和字体是有关的,比如,当你使用“方正姚体”的时候,会发现top和ascent重合了
private void init() { mTf = Typeface.createFromAsset(mContext.getAssets(), "fzyt.ttf"); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setTypeface(mTf); mPaint.setStrokeWidth(3); mPaint.setTextSize(60); mPaint.setTextAlign(Paint.Align.CENTER); mPaint.setStyle(Paint.Style.STROKE); // 画空心矩形 mFontMetricsInt = mPaint.getFontMetricsInt(); Log.d(TAG, "measureText: " + measureText()); }
垂直居中解决了,水平居中就容易了。因为……可以在Paint中直接设置。
mPaint.setTextAlign(Paint.Align.CENTER);
当然,这里的对其方式只有左中右,即使这里没有设置居中,我们也是可以手动居中文字的。
int x; if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左 x = mWidth / 2 - (int) (mStringWidth / 2); } else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中 x = mWidth / 2; } else { //右 x = mWidth / 2 + (int) (mStringWidth / 2); }
横纵坐标计算好了之后,我们就可以drawText了。
canvas.drawText(TEST_STRING, x, y, mPaint);
至此,问题全部解决,我们知道文字上面的那几条线的位置,就能随意放置我们的文字了。
绘制数字的时候,1明显比4瘦,但是我们可能会得到他们宽度相同的结果,也就没有办法“真正的居中”了。
附上layout文件,如果你设置了padding,记得把padding也计算进去。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <com.example.TextTest.TextView android:layout_width="250dip" android:layout_height="100dip" android:layout_marginTop="10dip" android:layout_marginBottom="20dip" android:layout_marginLeft="10dip" android:layout_marginRight="20dip"/> </LinearLayout>
最后我们来看看Java中的字体和Android的区别。
Java中字体的概念在这里:Font Concepts。可以看到,这里并没有Android中的top和bottom的概念。
在维基百科中也有baseline相关解释。这里也是没有提到Android中的top与bottom的概念
转贴请保留以下链接
本人blog地址
相关推荐
Android中使用Canvas和Paint绘制一个安卓机器人示例代码
Canvas饼状图、绘制文字、绘制图像
android利用Paint在Canvas上实现竖排写字
使用Canvas类绘制android机器人
android中canvas、paint绘图,主要用于学习canvas、paint绘图
自定义view:简单了解Paint常用设置,Canvas的常用方法;
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
最近学到自定义view,也是涉及到了canvas、paint、path的使用,此内容比较简单。 此三者一般会在自定义view的onDraw()中用到: canvas:决定view的布局(位置,画布颜色,形状) paint:决定view的属性(颜色,字体...
绘图基础,Canvas+Paint
Android 自定义Paint画笔 canvas绘图例子,本例子中所用到的方法继承自android.view.View,是一个自定义View的范例,同时可学习画笔的定义: Paint paint;//画笔 public MyView(Context context) {//构造器 ...
android 自定义view(Paint和Canvas),安卓自定义View,安卓自定义。
使用canvas绘制花朵
使用canvas绘制的实时时钟
Canvas绘制3D文字摇晃特效是一款基于HTML5 Canvas酷炫的3D文字摇晃动画特效。
主要介绍了canvas绘制文本内容自动换行的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用步骤: 1 创建本地的web服务,把文件移动到web服务的根目录。 2 访问createfont.html,F12切换到移动端模式。 2.1 【必要】 先点击创建字模,这时画布会出现方格(可以在源码里改变jg变量的大小),点击方格的...
Canvas绘制心电图
) { return < ReactCanvasPaint> }}道具财产类型默认描述width 数字400 帆布宽度height 数字400 画布高度viewOnly 布尔错误的设置为true禁用在画布上绘制data 目的不明确的可以放在画布上的初始
canvas绘制动态心电图,和监护仪上的一样,可参考使用!
网页热力图绘制,绘制在canvas上的 heatmap.js,包含源码和插件示例等。