关闭

android|图形图像 fontmetrics 文本绘制

标签: androidCanvasFontMetricsAscentDescent
146人阅读 评论(0) 收藏 举报
分类:

`有不少同学对Android 中的文本绘制的相关知识不了解,或者每次当自己想绘制文本时,总是画不出自己想要的效果,根本原因就是对FontMetrics不甚了解,今天就来给大家普及下相关的知识,让大家彻底弄明白文本是如何绘制,以及相关的基础知识,首先看一张图:




大家只用看三个地方,ascent,descent,baseline,其实最重要的就是baseline,如果确认了baseline,我们就能确认文本在垂直方向上的位置。

而baseline的计算需要依赖ascent和descent。大家看的时候,是不是不知道ascent,descent,baseline是什么鬼,那我们来看看FontMetrics,这个类,我们可以通过

Paint.getFontMetrics()接口来获取,先看看源码:

/**
 * Class that describes the various metrics for a font at a given text size.
 * Remember, Y values increase going down, so those values will be positive,
 * and values that measure distances going up will be negative. This class
 * is returned by getFontMetrics().
 */
public static class FontMetrics {
    /**
     * The maximum distance above the baseline for the tallest glyph in
     * the font at a given text size.
     */
    public float   top;
    /**
     * The recommended distance above the baseline for singled spaced text.
     */
    public float   ascent;
    /**
     * The recommended distance below the baseline for singled spaced text.
     */
    public float   descent;
    /**
     * The maximum distance below the baseline for the lowest glyph in
     * the font at a given text size.
     */
    public float   bottom;
    /**
     * The recommended additional space to add between lines of text.
     */
    public float   leading;
}

看Android 对FontMetrics的描述,(这里我们不说top和bottom, 因为我么基本上用不着,leading就是每行文本之间的间距)我用刚过四级的英语水平给大家翻译下:用来描述指定文本大小的字体的多个尺寸信息,在Y轴方向,向下,值越大,从某个值开始变成正值,则相反方向的值就是负值(fuck!,我自己都说不清楚了),还是说人话吧,就是从baseline开始,向下就是正值(ascent),向上就是负值(descent), 这里的正值(ascent),负值(descent)都是相对于baseline的,而且大家注意了,这些值与文本内容是没有关系的,跟textsize 是相关的,那么这又绕回来了,baseline是什么鬼呢,baseline是文本绘制的基线,是文本绘制在垂直方向上的基准点,再看一张截图:




图中我把baseline,asent,descent的位置用线画出来了,大家可以对比下我上面说的,但是大家看到了,为什么我画了两个“愚蠢,bankle stupid”,我也不知道,呵呵。其实大家仔细看(红色的方框是View的边界),就知道,第一个“愚蠢,bankle stupid”(等会我会用左边的文本这个说法来代替) 在View中是偏上的,而第二个"愚蠢,bankle stupid”(等会我会用右边的文本这个说法来替代)在View中是居中的,这是怎么回事呢?左边的文本,他的baselise 给的就是 View.getHeight()/2,也就是View的高度的一半,而大家看右边的文本它居中显示了,但是baseline其实是在中线下方的,那么问题来了,baseline的位置如何计算呢,其实也就是图中中线移动到baseline的距离,具体的计算方法是:文本高度的一半减去sescent


 canvas.drawText(content, 0, canvas.getHeight() / 2, paint);

        float contentWidth = paint.measureText(content);

        Paint.FontMetrics fontMetrics = paint.getFontMetrics();

        //开始计算基线的位置
        int baseLine = (int) (canvas.getHeight() / 2 + ((fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent));


        canvas.drawText(content, contentWidth, baseLine, paint);


        //绘制中线
        canvas.drawLine(0, canvas.getHeight() / 2, canvas.getWidth(), canvas.getHeight() / 2, paint);


        paint.setColor(Color.BLUE);
        canvas.drawLine(contentWidth, baseLine, canvas.getWidth(), baseLine, paint);
        //绘制ascent
        int ascentY = (int) (baseLine + fontMetrics.ascent);
        //绘制sescent
        int descentY = (int) (baseLine + fontMetrics.descent);

        canvas.drawLine(contentWidth, ascentY, canvas.getWidth(), ascentY, paint);
        canvas.drawLine(contentWidth, descentY, canvas.getWidth(), descentY, paint);


        rangeRect.set(0, 0, canvas.getWidth(), canvas.getHeight());

        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(rangeRect, paint);


        Log.v(TAG, "fontMetrics.top " +(fontMetrics.top));
        Log.v(TAG, "fontMetrics.ascent "+(fontMetrics.ascent));

        Log.v(TAG, "fontMetrics.descent " + (fontMetrics.descent));
        Log.v(TAG, "fontMetrics.bottom " + ( fontMetrics.bottom));

图画的有点丑,凑合用大笑





0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

浅谈android中的图片处理之基本绘图(一)

从今天开始我来聊下关于android中的图片处理以及android中绘图的基本用法。大家都知道android中的图片的巧妙使用会给UI得到一个很好的用户体验。所以掌握处理图片的基本技巧很是重要。那就开...
  • u013064109
  • u013064109
  • 2016-05-15 00:41
  • 2060

Android官方开发文档Training系列课程中文版:OpenGL绘图之图形绘制

原文地址:http://android.xsoftlab.net/training/graphics/opengl/draw.html如果你还不清楚如何定义图形及坐标系统,请移步:Android官方开...
  • u011064099
  • u011064099
  • 2016-05-23 08:22
  • 3832

android之各种图形绘制

Android中绘制图片或形状是我们常遇到的事情,通过最近的学习与在网上学习的案例与资料那么我今天就总结一下android中绘制用到的一些类和方法,其中其中主要包括3个类Canvas,Paint,Bi...
  • mxcsdn
  • mxcsdn
  • 2016-05-07 11:04
  • 1551

【Android开发】图形图像处理技术-绘制几何图形

常见的几何图形包括点、线、弧、矩形等。在Android中,Canvas类提供了丰富的绘制几何图形的方法,通过这些方法,可以绘制出各种几何图形。常用的几何图形的绘制方法如下所示: 1. 画一个圆使用的是...
  • u013517797
  • u013517797
  • 2015-04-21 22:14
  • 1798

【Android LibGDX游戏引擎开发教程】第06期:图形图像的绘制(下)图片整合工具的使用

在上一篇文章中,我们提到了图片必须是2的n次方的问题。但是随着Libgdx的不断完善和发展,使用一些工具就 可以很好的解决了这样一个问题,但是它的功能又不仅仅只限于此,那么下面就来让我们看看Text...
  • yangyu20121224
  • yangyu20121224
  • 2013-06-25 13:07
  • 4230

【Android LibGDX游戏引擎开发教程】第05期:图形图像的绘制(上)基础类的使用和详解

由于平常工作和生活琐事的种种原因,所以这个系列的教程更新的有点慢,还请大家见谅。在这期的主题中,博 主给大家来的教学是关于图形图像的绘制,要知道一个最基本的应用程序都会有一个精美的图像,那么就更别说...
  • yangyu20121224
  • yangyu20121224
  • 2013-06-23 16:07
  • 5583

【Android开发】图形图像处理技术-绘制图片

在Android中,Canvas类不仅可以绘制几何图形、文件和路径,还可以用来绘制图片。想要使用Canvas类绘制图片,只需要使用Canvas类提供的如下表所示的方法将Bitmap对象中保存的图片绘制...
  • u013517797
  • u013517797
  • 2015-05-03 13:49
  • 1511

Android 基本属性绘制文本对象FontMetrics介绍

一、Android绘制文本对象FontMetrics介绍 FontMetrics对象 它以四个基本坐标为基准,分别为: ・FontMetrics.top ・FontMetrics....
  • lovoo
  • lovoo
  • 2016-04-23 16:02
  • 195

Android之图形图像之使用Path类总结

Path类可以预先在View上将N个点连成一条"路径",然后调用Canvas的drawPath(path,paint)即可沿着路径绘制图形 Android还为路径绘制提供了PathEffect来...
  • u011068702
  • u011068702
  • 2016-01-08 16:59
  • 596

【Android开发】图形图像处理技术-Bitmap和BitmapFactory类

一、Bitmap类 Bitmap类代表位图,是Android系统中图像处理的一个重要类。使用该类,不仅可以获取图像文件信息,进行图像剪切、旋转、缩放等操作,而且还可以指定格式保存图像文件。对于这些操作...
  • u013517797
  • u013517797
  • 2015-04-21 22:09
  • 1338
    个人资料
    • 访问:3190次
    • 积分:247
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:0篇
    • 译文:2篇
    • 评论:0条