Android之文字轉圖片（輸入文字，轉成聊天氣泡形式圖片，並存入sd卡）

需求：

1. 實現將文字轉換爲圖片。
2. 圖片爲聊天框形式。
3. 用戶可以選擇文字字體，選擇顏色。
4. 聊天框自適應文字。

實現方法:

1. 方案一：使用canvas繪製圖片，使用staticLayout自動換行繪製文字，聊天框採取canvas畫一個矩形，讓矩形自適應文字
2. 方案二：使用canvas繪製圖片，使用StaticLayout自動換行繪製文字，聊天框採取氣泡形狀圖片背景，圖片自適應文字。

方案一

1.學習canvans

首先放幾個寫的很好的博客

1. canvans之繪製基本形狀。其中包括用canvans去繪製顏色，用畫筆繪製點，線，形狀。介紹的十分詳細。
2. Canvans的畫布操作 。這裏主要講解了canvans的兩個函數：translate（位移）與scale(縮放)。
3. Canvans之文字圖片
4. 在Canvans上繪製圓角矩形並添加文字
5. Android字體度量(FontMetrics)

需求中需要繪製矩形，所以詳細寫一下繪製圓角矩形。首先是繪製矩形，其中包含五個參數，分別是矩形的左右上下與繪製所用的畫筆。這裏的左右的基準是以左上角原點爲基準的，遇到了一個坑，之後會說。簡單說一下rect和rectf的區別，精度不同，rect是int型，rectf是float型。

        // 第一種
        canvas.drawRect(100,100,800,400,mPaint);

        // 第二種
        Rect rect = new Rect(100,100,800,400);
        canvas.drawRect(rect,mPaint);

        // 第三種
        RectF rectF = new RectF(100,100,800,400);
        canvas.drawRect(rectF,mPaint);

接下來是圓角矩形的繪製。這裏主要復現了第四個博客做的事情，然後查閱了第五個博客FontMetrics類的參數。我實現的是繪製一個在屏幕中居中的矩形，然後文字在矩形上下左右居中，同時矩形大小要隨文字的多少變換。整體效果見下圖。

圓角矩形的繪製代碼如下，代碼很好理解，與矩形相似，只不過圓角矩形多一個20，可以簡單理解爲圓角的半徑，其實畫的應該是一個橢圓形。下述代碼是在ondraw()方法中，所以可以獲取佈局的寬度，以保持矩形始終居中對齊。這裏的startX與endX是爲了讓矩形適配文字。

	int width=getWidth();
    int textsize=40;  
    String text = "哈哈啊哈哈哈哈哈哈哈";  
    int textwidth=text.length()*textsize;  
    float startX = width/2-textwidth/2 ;
    float startY = 100 ;
    float endX = width/2+textwidth/2 ;
    float endY = 200 ;
    RectF rectF = new RectF(startX, startY, endX, endY);
    //20是圓角半徑
    canvas.drawRoundRect(rectF, 20, 20, paint);

接下來要用畫筆Paint使用drawText()函數來繪製文字，代碼如下：

	paint.setTextSize(textsize);//設置畫筆的大小
 	Paint.FontMetrics fontMetrics=paint.getFontMetrics();
	float baseline = (rectF.bottom + rectF.top -fontMetrics.bottom - fontMetrics.top) / 2;
	canvas.drawText(text,(endX-startX)/2+startX-textwidth/2,baseline,paint);  

這裏要說的比較多，首先是Paint.FontMetrics,它可以理解爲一個字體度量。通過getFontMetrics()方法獲取，其包含幾個字符屬性參數（top,ascent,descent,bottom）。這幾個屬性參數都是距離baseline的距離。
值得一提的是，我閱讀源碼時，有這樣一段話，大概意思是值向下增加，值向上減少。其實就是說，ascent與top的值是負的，descent與bottom的值是正的。ascent和descent是一個字體的建議距離（最高，最低）。

這裏即將講到**第一個坑**，很多新手在使用drawText的時候會遇到問題。首先，我們看下這個方法參數的含義：canvas.drawText(text, x, y, paint)，第一個參數是我們需要繪製的文本，第四個參數是我們的畫筆，這兩個不用多說，主要是第二和第三個參數的含義，這兩個參數在不同的情況下的值還是不一樣的，x是這個字符串的左邊在屏幕的位置,如果設置了**paint.setTextAlign(Paint.Align.CENTER)**;那就是字符的中心;y是指定這個字符**baseline**在屏幕上的位置，大家記住了，不要混淆，y不是這個字符中心在屏幕上的位置，而是baseline在屏幕上的位置。 那麼baseline的位置要如何設定呢，首先要獲取你要居中的位置，比如上述的(rectF.bottom+rectF.top)/2,也就是**150**，要文字中間在150的位置。即以150畫一條橫線，文字上下的距離相等。那麼就要獲取top與buttom的差了,獲取差之後除二，讓baseline與150的距離爲差/2。那麼top距離150的距離=top-差/2，bottom距離150的距離爲descent+差/2。這樣二者就相等了，需要注意的就是正負要考慮。最後可以看到，成功將文字居中與圓角方框中間。 想詳細瞭解可以看如下博客。 [https://blog.csdn.net/flyeek/article/details/43934945](https://blog.csdn.net/flyeek/article/details/43934945)， [https://blog.csdn.net/lovexieyuan520/article/details/43153275](https://blog.csdn.net/lovexieyuan520/article/details/43153275) ## 2.使用StaticLayout