自定義控制項詳解（七）：drawText()

比較基礎的一個方法。即繪製文本

使用如下：

Paint paint = new Paint();   

paint.setColor(Color.RED);   // 紅色字體
paint.setStyle(Paint.Style.FILL); // 類型
paint.setStrokeWidth(1);       // 畫筆線條寬度
paint.setTextSize(60);         // 繪製文本大小

// 繪製內容
canvas.drawText("聽著music睡 ' blogs" , 100 , 200 , paint);

效果;

  可以看下方法：

 這篇只討論第三個方法。

　可以看到 4個參數，第二個、第三個參數 是float類型，實際上就是 繪製的文本的繪製參考坐標。註意這個坐標 不是文本的左上角的那個點，float y 代表 基線的Y位置。

 驗證一下：

 繪製一條藍色的基線，繪製一個文本。

        Paint paint = new Paint();
 
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        paint.setTextSize(60);

        int baseLine = 100 ;// 基線的Y坐標
        canvas.drawText("abcdefghi",30 , baseLine , paint);  // 繪製 (30,baseLine) 為參考點的文本
        paint.setColor(Color.BLUE);
        canvas.drawLine(30,baseLine ,300,baseLine,paint); // 繪製基線

 可以看到，繪製文本的參數(floatx , floaty) 指的是基線的左起點坐標而不是左上角。

擴展：

drawtext除了基線還有另外4條線，稱為4格線。

分別是ascent,descent,top,bottom

• ascent: 系統建議的，繪製單個字元時，字元應當的最高高度所線上
• descent:系統建議的，繪製單個字元時，字元應當的最低高度所線上
• top: 可繪製的最高高度所線上
• bottom: 可繪製的最低高度所線上

怎麼獲取這4個線的y軸坐標呢，有一個類 FontMetrics

這些屬性的值即 與基線的相對y軸距離(可能為負值)

示例：

        int baseLineY = 100 ;

        Paint.FontMetrics fm = paint.getFontMetrics();
        float ascent = baseLineY + fm.ascent ; // 制頂線
        float descent = baseLineY+fm.descent ; //制低線
        float top = baseLineY + fm.top ; // 最頂線
        float bottom = baseLineY + fm.bottom ; // 最低限

        // 基線
        paint.setColor(Color.RED);
        canvas.drawLine(baseLineX , baseLineY , 1000 , baseLineY , paint);

        // 制頂線
        paint.setColor(Color.BLUE);
        canvas.drawLine(baseLineX,ascent , 1000 , ascent , paint);

        // 制底線
        paint.setColor(Color.GREEN);
        canvas.drawLine(baseLineX,descent , 1000 , descent , paint);

        // 最頂線
        paint.setColor(Color.YELLOW);
        canvas.drawLine(baseLineX,top,1000,top  , paint);

        // 最底線
        paint.setColor(Color.MAGENTA);
        canvas.drawLine(baseLineX  , bottom  , 1000 , bottom ,paint);

        //寫文字
        paint.setColor(Color.BLACK);
        canvas.drawText("聽著music睡 ' blogs" ,baseLineX,baseLineY , paint);

可以看到：

黃色的最頂線top

藍色的制頂線ascent

紅色的基線baseline

綠色的制低線descent

粉色的最低限bottom