Android: 绘制的文本如何排版

Android: 绘制的文本如何排版

项目需求,在一个特定的矩形内绘制一段文本,并且要让文本处于矩形的正中间。


原来的方法:

先设置paint颜色,字体,字体大小等等

paint.setColor(Color.WHITE);
paint.setTextSize(fontSize);


Path textPath = new Path();

textPath.moveTo(rect_x1,textPontY);
textPath.cubicTo(rect_x1,textPontY, rect_x1,textPontY,  rect_x1+rect_width,textPontY);
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawTextOnPath(mailBox.getBoxNumber(), textPath, 0, 0, paint);


关键在于这个 textPontY 的值如何确定。如果定位不准,达到的效果就是在水平方向上它是居中的(3点一线),在垂直方向并不是


后来想到,通过path来设置,让path沿着一个封闭的矩形,如下:

    Path textPath = new Path();
        textPath.moveTo(rect_x1,rect_y1);
        textPath.lineTo(rect_x1 + rect_width, rect_y1);
        textPath.lineTo(rect_x1 + rect_width, rect_y1+rect_height);
        textPath.lineTo(rect_x1 , rect_y1+rect_height);
        textPath.lineTo(rect_x1,rect_y1);
        textPath.close();

然后 设置 paint.setTextAlign(Paint.Align.CENTER); ,然后再 canvas.drawTextOnPath(mailBox.getBoxNumber(), textPath, 0, 0, paint);

结果证明这个想法是错误的,它并不能智能定位到 矩形正中间的位置



如何 textPontY 的值如何确定 ?涉及到 “android 字体大小对应的高度”


下文来自: http://www.iteye.com/topic/474526

Canvas 作为绘制文本时,使用FontMetrics对象,计算位置的坐标

它的思路和java.awt.FontMetrics的基本相同。

 

FontMetrics对象

它以四个基本坐标为基准,分别为:

・FontMetrics.top
・FontMetrics.ascent
・FontMetrics.descent
・FontMetrics.bottom

 

该图片将如下

 

 

Java代码  收藏代码
  1. Paint textPaint = new Paint( Paint.ANTI_ALIAS_FLAG);  
  2. textPaint.setTextSize( 35);  
  3. textPaint.setColor( Color.WHITE);  
  4.   
  5. // FontMetrics对象  
  6. FontMetrics fontMetrics = textPaint.getFontMetrics();  
  7.   
  8. String text = "abcdefghijklmnopqrstu";  
  9.   
  10. // 计算每一个坐标  
  11. float baseX = 0;  
  12. float baseY = 100;  
  13. float topY = baseY + fontMetrics.top;  
  14. float ascentY = baseY + fontMetrics.ascent;  
  15. float descentY = baseY + fontMetrics.descent;  
  16. float bottomY = baseY + fontMetrics.bottom;  
  17.   
  18. // 绘制文本  
  19. canvas.drawText( text, baseX, baseY, textPaint);  
  20.   
  21. // BaseLine描画  
  22. Paint baseLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);>  
  23. baseLinePaint.setColor( Color.RED);  
  24. canvas.drawLine(0, baseY, getWidth(), baseY, baseLinePaint);  
  25.   
  26. // Base描画  
  27. canvas.drawCircle( baseX, baseY, 5, baseLinePaint);  
  28.   
  29. // TopLine描画  
  30. Paint topLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);  
  31. topLinePaint.setColor( Color.LTGRAY);  
  32. canvas.drawLine(0, topY, getWidth(), topY, topLinePaint);  
  33.   
  34. // AscentLine描画  
  35. Paint ascentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);  
  36. ascentLinePaint.setColor( Color.GREEN);  
  37. canvas.drawLine(0, ascentY, getWidth(), ascentY, ascentLinePaint);  
  38.   
  39. // DescentLine描画  
  40. Paint descentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);  
  41. descentLinePaint.setColor( Color.YELLOW);  
  42. canvas.drawLine(0, descentY, getWidth(), descentY, descentLinePaint);  
  43.   
  44. // ButtomLine描画  
  45. Paint bottomLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);  
  46. bottomLinePaint.setColor( Color.MAGENTA);  
  47. canvas.drawLine(0, bottomY, getWidth(), bottomY, bottomLinePaint); 
-------------------------------------
由上可得出一个常识:drawText 绘制文本时,是从 baseLine这个位置开始的,并不简单认为是从 文本的左下角开始绘制。

由上图可以分析出:

float temp = Math.abs(fontMetrics.top - fontMetrics.bottom);
float textPontY = rect_y1 + (rect_height - temp)/2.0f + temp - fontMetrics.bottom;


把 textPointY设置成这样的值,就对了!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值