Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现

暂时还未有时间开发这效果，所以先贴出来。

先贴一张效果图，这是一张手机截屏：

左上方的风景图：背景图片

右上方的人物图：前景图片

左边心型透明图：相框图片

右边心型黑色图：蒙板图片

功能：把前景图应用蒙板，添加相框效果，合成到后景图上面：

结果就是下面的那张图片了。

还有一种是透明度渐变的，效果图如下：

因为只有透明度渐变，没有相框。但实现上基本一样。

下面是实现过程，直接贴代码吧，其中写了比较详细的注释。只有一个文件，如下：

[java]view plaincopy 
    
package com.example.androiddemo;  
  
  
import android.os.Bundle;  
import android.os.Environment;  
import android.app.Activity;  
import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.Canvas;  
import android.util.Log;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.widget.Button;  
import android.widget.ImageView;  
  
public class MainActivity extends Activity {  
  
    private static final String TAG = "liuzw";  
      
    private ImageView picBGView;  
    private ImageView pictureView;  
    private ImageView maskView;  
    private ImageView frameView;  
    private ImageView resultView;  
    private Button startProcess;  
    private Bitmap picBitmap;  
    private Bitmap maskBitmap;  
    private Bitmap frameBitmap;  
    private Bitmap resultBitmap;  
    private Bitmap fengjingBitmap;  
    private Bitmap composedBitmap;  
      
    private final int WITHOUT = -1;  
    private static final int FRAME = 0;  
    private static final int MASK = 1;  
      
//  private int[] resIds = new int[]{       //斜框锯齿  
//          R.drawable.pip_6_frame,  
//          R.drawable.pip_6_frame_mask,  
//  };  
      
//  private int[] resIds = new int[]{       //胶条  
//          R.drawable.pip_1_frame,  
//          R.drawable.pip_1_frame_mask,  
//  };  
      
    private int[] resIds = new int[]{       //渐变  
            WITHOUT,  
            R.drawable.pip_2_frame_mask,  
    };  
      
//  private int[] resIds = new int[]{       //心形  
//          R.drawable.pip_3_frame,  
//          R.drawable.pip_3_frame_mask,  
//  };  
      
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
          
        picBGView = (ImageView) findViewById(R.id.pic_bg);  
        picBGView.setImageResource(R.drawable.fengjing);  
        pictureView = (ImageView) findViewById(R.id.pic);  
        pictureView.setImageResource(R.drawable.pip_test);  
        maskView = (ImageView) findViewById(R.id.mask);  
        maskView.setImageResource(resIds[MASK]);  
        frameView = (ImageView) findViewById(R.id.frame);  
        frameView.setImageResource(resIds[FRAME]);  
        startProcess = (Button) findViewById(R.id.btnStart);  
        startProcess.setOnClickListener(mListener);  
        resultView = (ImageView) findViewById(R.id.showResult);  
          
    }  
      
    /** 
     * 获得前置照片 
     */  
    private void getFrontPicture(){  
        //蒙板的Bitmap  
        if(maskBitmap == null || maskBitmap.isRecycled() && resIds[MASK] != WITHOUT){  
            maskBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[MASK]);  
        }  
        if(maskBitmap == null) return;  
          
        //前置的原图，并将其缩放到跟蒙板大小一直  
        if(picBitmap == null || picBitmap.isRecycled()){  
            picBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.pip_test);  
            picBitmap = Bitmap.createScaledBitmap(picBitmap, maskBitmap.getWidth(), maskBitmap.getHeight(), false);  
        }  
          
        //相框的Bitmap  
        if(frameBitmap == null || frameBitmap.isRecycled() && resIds[FRAME] != WITHOUT){  
            frameBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[FRAME]);  
        }  
          
        int w = maskBitmap.getWidth();  
        int h = maskBitmap.getHeight();  
          
        int edgeColor = maskBitmap.getPixel(1, 1);  
        int centerColor = maskBitmap.getPixel(w/2, h/2);  
        Log.d(TAG, "edgeColor = " + Integer.toHexString(edgeColor) + ", centerColor = " + Integer.toHexString(centerColor));  
          
        if(resultBitmap == null){  
            resultBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  
        }  
          
        //这是背景的风景图  
        if(fengjingBitmap == null){  
            fengjingBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fengjing);  
        }  
          
        //前置相片添加蒙板效果  
        int[] picPixels = new int[w*h];  
        int[] maskPixels = new int[w*h];  
        picBitmap.getPixels(picPixels, 0, w, 0, 0, w, h);  
        maskBitmap.getPixels(maskPixels, 0, w, 0, 0, w, h);  
        for(int i = 0; i < maskPixels.length; i++){  
            if(maskPixels[i] == 0xff000000){  
                picPixels[i] = 0;  
            }else if(maskPixels[i] == 0){  
                //donothing  
            }else{  
                //把mask的a通道应用与picBitmap  
                maskPixels[i] &= 0xff000000;  
                maskPixels[i] = 0xff000000 - maskPixels[i];   
                picPixels[i] &= 0x00ffffff;  
                picPixels[i] |= maskPixels[i];  
            }  
        }  
          
        //生成前置图片添加蒙板后的bitmap:resultBitmap  
        resultBitmap.setPixels(picPixels, 0, w, 0, 0, w, h);  
    }  
      
    /** 
     * 图片合成 
     */  
    private void compose(){  
        if(fengjingBitmap == null || fengjingBitmap.isRecycled()){  
            Log.e(TAG, "compose ERROR: fengjingBitmap is not valuable");  
            return;  
        }  
        composedBitmap = Bitmap.createBitmap(fengjingBitmap.getWidth(), fengjingBitmap.getHeight(), Bitmap.Config.ARGB_8888);  
        if(composedBitmap == null || composedBitmap.isRecycled()){  
            Log.e(TAG, "compose ERROR: composedBitmap is not valuable");  
            return;  
        }  
        if(resultBitmap == null || resultBitmap.isRecycled()){  
            Log.e(TAG, "compose ERROR: resultBitmap is not valuable");  
            return;  
        }  
        Canvas cv = new Canvas(composedBitmap);  
        cv.drawBitmap(fengjingBitmap, 0, 0, null);  
        cv.drawBitmap(resultBitmap, 100, 100, null);  
          
        if(frameBitmap != null && !frameBitmap.isRecycled()){  
            cv.drawBitmap(frameBitmap, 100, 100, null);  
        }  
          
        cv.save(Canvas.ALL_SAVE_FLAG);  
        cv.restore();  
        resultView.setImageBitmap(composedBitmap);  
    }  
      
    @Override  
    protected void onDestroy() {  
        // TODO Auto-generated method stub  
        super.onDestroy();  
        //释放资源  
        resultView.setImageBitmap(null);  
        if(picBitmap != null && !picBitmap.isRecycled()){  
            picBitmap.recycle();  
            picBitmap = null;  
        }  
        if(maskBitmap != null && !maskBitmap.isRecycled()){  
            maskBitmap.recycle();  
            maskBitmap = null;  
        }  
        if(frameBitmap != null && !frameBitmap.isRecycled()){  
            frameBitmap.recycle();  
            frameBitmap = null;  
        }  
        if(resultBitmap != null && !resultBitmap.isRecycled()){  
            resultBitmap.recycle();  
            resultBitmap = null;  
        }  
        if(fengjingBitmap != null && !fengjingBitmap.isRecycled()){  
            fengjingBitmap.recycle();  
            fengjingBitmap = null;  
        }  
        if(composedBitmap != null && !composedBitmap.isRecycled()){  
            composedBitmap.recycle();  
            composedBitmap = null;  
        }  
    }  
      
    private OnClickListener mListener = new OnClickListener(){  
  
        @Override  
        public void onClick(View v) {  
            // TODO Auto-generated method stub  
            switch(v.getId()){  
            case R.id.btnStart:  
                getFrontPicture();  
                compose();  
                break;  
            }  
        }  
          
    };  
      
}  

为了完整和方便参考，把布局文件也贴一下，如下：

[html]view plaincopy 
    
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#ffffffff"  
    tools:context=".MainActivity" >  
  
    <LinearLayout   
        android:id="@+id/views1"  
        android:layout_width="match_parent"  
        android:layout_height="150dip"  
        android:orientation="horizontal" >  
          
         <ImageView   
            android:id="@+id/pic_bg"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1.0" />  
           
        <ImageView   
            android:id="@+id/pic"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1.0" />  
    </LinearLayout>  
      
    <LinearLayout   
        android:id="@+id/views2"  
        android:layout_below="@+id/views1"  
        android:layout_width="match_parent"  
        android:layout_height="150dip"  
        android:orientation="horizontal" >  
          
          
        <ImageView   
            android:id="@+id/frame"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1.0" />  
          
        <ImageView   
            android:id="@+id/mask"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1.0" />  
          
    </LinearLayout>  
  
    <Button   
        android:id="@+id/btnStart"  
        android:layout_below="@+id/views2"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="Start" />  
      
    <ImageView   
        android:id="@+id/showResult"  
        android:layout_below="@+id/btnStart"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"/>  
      
</RelativeLayout>  

Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现

Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Android 图片合成：添加蒙板效果 不规则相框 透明度渐变效果的实现

热门文章

最新文章

相关课程

相关电子书

Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现