android:照片涂畫功能實(shí)現(xiàn)過(guò)程及原理詳解

更新時(shí)間：2014年02月19日 14:50:28 作者：

這篇文章主要介紹了android:照片涂畫功能實(shí)現(xiàn)過(guò)程及原理,需要的朋友可以參考下

這個(gè)功能可以幫你實(shí)現(xiàn)，在圖片上進(jìn)行隨意的涂抹，可以用于SNS產(chǎn)品。

繪圖本身很簡(jiǎn)單，但是要實(shí)現(xiàn)在圖片上指定的部分精確（位置，縮放）的繪圖，就有點(diǎn)麻煩了。

下面講講實(shí)現(xiàn)過(guò)程及原理：

UI構(gòu)圖
這個(gè)UI，看似簡(jiǎn)單，還是有點(diǎn)復(fù)雜的，下面需要一個(gè)底圖，上面再來(lái)一個(gè)透明的圖片控件，畫圖的時(shí)候要同步兩個(gè)控件的變形。

UI層次簡(jiǎn)圖

為什么，需要上面一個(gè)Canvas Image與Back保持一致？因?yàn)?，Canvas Image會(huì)被畫到Canvas上，它是Canvas的宿主，即ImageView被變成了一塊畫布，原來(lái)ImageView上的內(nèi)容會(huì)被擦除。如果只有Back Image那么一旦開(kāi)啟畫布，你什么也看不到。

神奇的Matrix
ImageView控件是常用的Android控件之一，主要用于圖片展示?；旧纤械母呒?jí)語(yǔ)言中，都有類似控件。但是，有一樣?xùn)|西讓他化腐朽為神奇，那就是Matrix。有了Matrix我們就可以實(shí)現(xiàn)圖片平移、放大、旋轉(zhuǎn)、扭曲等常用的特效。Matrix本身是一個(gè)9*9的矩陣，里面存放的是平移坐標(biāo)、放大系數(shù)、sin/cos角度值。我們可以通過(guò)getMatrix()來(lái)獲取一個(gè)IV的矩陣，或者通過(guò)setMatrix()來(lái)設(shè)置它的值。

上面的東西拿來(lái)有什么用？試想一下，當(dāng)我們打開(kāi)相冊(cè)，查看一張照片的時(shí)候，可以通過(guò)觸摸，平移或者放大圖片。我們，要在上面繪圖，先把Canvas Image 變?yōu)镃anvas，但是，Canvas Image沒(méi)有經(jīng)過(guò)變化。必須，至少確保兩個(gè)Img控件擁有相同的變形，否則無(wú)法對(duì)齊畫的坐標(biāo)點(diǎn)。這個(gè)時(shí)候，要么當(dāng)Back Image變的時(shí)候，Canvas Image立即同步操作，要么，最畫到canvas上的時(shí)候，同步變形。前一種方案是沒(méi)有必要的，果斷使用后一種。這個(gè)時(shí)候你就要問(wèn)，怎么得到IV的變形參數(shù)？IV提供了一些方法來(lái)單獨(dú)的獲取和設(shè)置某種變形，當(dāng)時(shí)折騰了很久，不但繁瑣，而且達(dá)不到效果。這時(shí)候，上面的Matrix就派上用場(chǎng)了。當(dāng)時(shí)，可沒(méi)人這么愉快的告訴我這個(gè)。

坐標(biāo)映射
上面完成了圖形的變換，現(xiàn)在終于可以再上面作畫了。但是一畫，你就會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，畫不到指定位置上。這是什么問(wèn)題呢？坐標(biāo)系偏移。（0,0）點(diǎn)默認(rèn)為屏幕的左上角。但是，想一下當(dāng)我們的圖片不滿一個(gè)屏幕，很小的時(shí)候，Canvas的坐標(biāo)系在什么位置？我在屏幕（0,0）坐標(biāo)畫一個(gè)點(diǎn)，canvas上就會(huì)出現(xiàn)一個(gè)點(diǎn)，即使兩者的位置相差很遠(yuǎn)。

這個(gè)時(shí)候，我們需要將兩個(gè)坐標(biāo)系進(jìn)行映射，通過(guò)偏移對(duì)齊坐標(biāo)系。偏移多少？這時(shí)候該使用矩陣的translate值了。這樣我們就可以知道圖片在坐標(biāo)系上的偏移了，隨邊你怎么移動(dòng)坐標(biāo)都能準(zhǔn)確對(duì)齊。

復(fù)制代碼代碼如下:

private HashMap getImageViewIneerSize(ImageView iv){
    HashMap size=new HashMap();
    //獲得ImageView中Image的變換矩陣
    Matrix m = iv.getImageMatrix();
    float[] values = new float[10];
    m.getValues(values);

    //Image在繪制過(guò)程中的變換矩陣，從中獲得x和y方向的縮放系數(shù)
    float sx = values[0];
    float sy = values[4];

    //計(jì)算Image在屏幕上實(shí)際繪制的寬高
   size.put("scaleX", 1/sx);
   size.put("scaleY", 1/sy);
   size.put("offsetX", values[2]); //X軸的translate的值
   size.put("offsetY",values[5]);

return size;
}

其中width=backImage.getDrawable().getBounds().width();

你會(huì)發(fā)現(xiàn)有個(gè)scaleX，這是干什么的？我們假設(shè)現(xiàn)在圖片經(jīng)過(guò)縮放后的寬度恰好等于屏幕寬度，圖片的實(shí)際寬度是960px。但是我們?cè)赬=480px的地方畫一個(gè)點(diǎn)，這個(gè)點(diǎn)應(yīng)該顯示在圖片的什么地方呢？我們的意圖是要在圖片的最后面，即X=960px的地方畫一個(gè)點(diǎn)，但是現(xiàn)在卻跑到了480處，明顯不滿足要求。這時(shí)，就需要乘上上面的scaleX了。

畫線的最終代碼：

復(fù)制代碼代碼如下:

/*根據(jù)兩點(diǎn)坐標(biāo)，繪制連線

*startX、stopX 為觸摸事件開(kāi)始、結(jié)束的地方

*offsetX，為圖片在X軸的位移值

*scaleX，為圖片在X軸的縮放值的倒數(shù)

*/
if((startY-offsetY)>=0&&(stopY-offsetY)>=0)
canvas.drawLine((startX-offsetX)*scaleX, (startY-offsetY)*scaleY, (stopX-offsetX)*scaleX, (stopY-offsetY)*scaleY, pen);

【注】

ImageView的實(shí)際大小等于屏幕的大小，Canvas的實(shí)際大小由圖片實(shí)際大小決定。

ImageView的寬高很容易取得，但是它里面的圖片是變過(guò)形的，怎么獲取它的當(dāng)前大小呢？用（原始大小*縮放系數(shù)）。

合并
最后一步就是將兩個(gè)圖層合并為一張圖片。參考代碼如下：

復(fù)制代碼代碼如下:

/**
* 合并兩張bitmap為一張
* @param background
* @param foreground
* @return Bitmap
*/
public static Bitmap combineBitmap(Bitmap background, Bitmap foreground) {
    if (background == null) {
       return null;
    }
    int bgWidth = background.getWidth();
    int bgHeight = background.getHeight();
    int fgWidth = foreground.getWidth();
    int fgHeight = foreground.getHeight();

    Bitmap newmap = Bitmap.createBitmap(bgWidth, bgHeight, Config.ARGB_8888);
    Canvas canvas = new Canvas(newmap);
    canvas.drawBitmap(background, 0, 0, null);
    canvas.drawBitmap(foreground, (bgWidth - fgWidth) / 2,
    (bgHeight - fgHeight) / 2, null);
    canvas.save(Canvas.ALL_SAVE_FLAG);
    canvas.restore();
    return newmap;
} //end of combineBitmap

通過(guò)Canvas來(lái)合并和改變Bitmap的大小，由于兩個(gè)圖層的大小、位置完全一致，故坐標(biāo)對(duì)齊（0,0）點(diǎn)就可以了。

如果，沒(méi)有前面的工作，你是很難精確的進(jìn)行圖片合并的。

您可能感興趣的文章: