1. 程式人生 > >Android 學習 之 圖形繪製篇 獲取要繪製的文字的寬度/長度

Android 學習 之 圖形繪製篇 獲取要繪製的文字的寬度/長度

android自定義View繪製的時候,會有很多情況下要與字型打交道,涉及到字型寬度、高度的時候要特別注意一下幾個概念,見圖:

baseLine:一行文字的底線。

Ascent: 字元頂部到baseLine的距離。

Descent: 字元底部到baseLine的距離。

Leading: 字元行間距。

Java程式碼 複製程式碼 收藏程式碼
  1. publicclass TestOnDraw extends Activity {   
  2. @Override
  3. protectedvoid onCreate(Bundle savedInstanceState) {   
  4. // TODO Auto-generated method stub 
  5. super.onCreate(savedInstanceState);   
  6.         MyView v = new MyView(this);   
  7. this.setContentView(v);   
  8.     }   
  9. }   
  10. class MyView extends View   
  11. {   
  12. public MyView(Context context) {   
  13. super(context);   
  14.     }   
  15. @Override
  16. protectedvoid onDraw(Canvas canvas) {   
  17. super.onDraw(canvas);   
  18.         Paint p = new Paint();   
  19.         p.setColor(Color.WHITE);   
  20.         p.setTextSize(50);   
  21.         p.setAntiAlias(true);   
  22.         FontMetrics fm = p.getFontMetrics();   
  23.         System.out.println("top = "+ fm.top);   
  24.         System.out.println("ascent = "+ fm.ascent);   
  25.         System.out.println(
    "descent = "+ fm.descent);   
  26.         System.out.println("bottom = "+ fm.bottom);   
  27.         System.out.println("leading = "+ fm.leading);   
  28. int textHeight = (int) (Math.ceil(fm.descent - fm.ascent) + 2);   
  29.         System.out.println("textHeight = "  + textHeight);   
  30. float width =500;   
  31. float baseline = 100f;   
  32. float offsetAscent = baseline + fm.ascent;   
  33. float offsetDescent = baseline +fm.descent;   
  34. float offsetTop = baseline + fm.top;   
  35. float offsetBottom = baseline + fm.bottom;   
  36.         canvas.drawText("中國 bp Android"0, baseline, p);   
  37.         canvas.drawLine(0, baseline, width, baseline, p);//baseline 
  38.         canvas.drawLine(0, offsetAscent, width, offsetAscent, p);//ascent 
  39.         canvas.drawLine(0, offsetDescent, width, offsetDescent, p);//descent 
  40.         canvas.drawLine(0, offsetTop, width, offsetTop, p);//top 
  41.         canvas.drawLine(0, offsetBotton, width, offsetBottom, p);//bottom 
  42.     }   
  43. }  
  1. publicclass TestOnDraw extends Activity {  
  2.     @Override
  3.     protectedvoid onCreate(Bundle savedInstanceState) {  
  4.         // TODO Auto-generated method stub
  5.         super.onCreate(savedInstanceState);  
  6.         MyView v = new MyView(this);  
  7.         this.setContentView(v);  
  8.     }  
  9. }  
  10. class MyView extends View  
  11. {  
  12.     public MyView(Context context) {  
  13.         super(context);  
  14.     }  
  15.     @Override
  16.     protectedvoid onDraw(Canvas canvas) {  
  17.         super.onDraw(canvas);  
  18.         Paint p = new Paint();  
  19.         p.setColor(Color.WHITE);  
  20.         p.setTextSize(50);  
  21.         p.setAntiAlias(true);  
  22.         FontMetrics fm = p.getFontMetrics();  
  23.         System.out.println("top = "+ fm.top);  
  24.         System.out.println("ascent = "+ fm.ascent);  
  25.         System.out.println("descent = "+ fm.descent);  
  26.         System.out.println("bottom = "+ fm.bottom);  
  27.         System.out.println("leading = "+ fm.leading);  
  28.         int textHeight = (int) (Math.ceil(fm.descent - fm.ascent) + 2);  
  29.         System.out.println("textHeight = "  + textHeight);  
  30.         float width =500;  
  31.         float baseline = 100f;  
  32.         float offsetAscent = baseline + fm.ascent;  
  33.         float offsetDescent = baseline +fm.descent;  
  34.         float offsetTop = baseline + fm.top;  
  35.         float offsetBottom = baseline + fm.bottom;  
  36.         canvas.drawText("中國 bp Android"0, baseline, p);  
  37.         canvas.drawLine(0, baseline, width, baseline, p);//baseline
  38.         canvas.drawLine(0, offsetAscent, width, offsetAscent, p);//ascent
  39.         canvas.drawLine(0, offsetDescent, width, offsetDescent, p);//descent
  40.         canvas.drawLine(0, offsetTop, width, offsetTop, p);//top
  41.         canvas.drawLine(0, offsetBotton, width, offsetBottom, p);//bottom
  42.     }  
  43. }  
 

執行效果:


 

這是程式的輸出結果:


得出結論: canvas drawText() 的startX是從左下角的baseline的底線開始繪畫的,如果我們要得到字型的高度需要關注descent - ascent (ascent線在baseline上面,所以是負數)