遮罩 使用 实例

最近在做一个左面launcher,里面获取安装图片,有的大 有的小,这样子就会觉得现实很不好看。所以我决定给他加一个遮罩来实现看起来是一样的大小

效果不是很好看,后期背景换成一个就会好看很多了。


首先我们来说说思路:

1.首先我们要自定义一个类,继承Imageview

2.在ondraw() 调用canvas-->// 创建一个和原始图片一样大小的矩形

canvas.drawBitmap(cutBm, 0, 0, paint);

3再在中间挖一个空洞,自然是要和我们要放进去的图片一样大的空洞,并放入我们要显示的图片

Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            if (bitmap == null) {
                bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.computer);
            }
            //控件要显示的图
           // bitmap = BitmapUtil.toSizeBitmap(bitmap, w, h);
            canvas.drawBitmap(cutBm, 0, 0, paint);
            int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG
                    | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
                    | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
            canvas.saveLayer(0, 0, w, h, null, saveFlags);

            int left = cutWidth / 2 - bitmap.getWidth() / 2;
            int top = cutHeight / 2 - bitmap.getHeight() / 2;

            // 创建一个和原始图片一样大小的矩形
            canvas.drawBitmap(bitmap,left,top, paint);

            //            取两层绘制交集。显示上层。
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

            canvas.drawBitmap(bitmap, left, top, paint);
            paint.setXfermode(null);
            canvas.restore();
这样就是我们要的效果了,其实这个主要的技术还是涉及到了PorterDuffXfermode类的使用方法,


PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

上面就是PorterDuffXfermode类的创建,那么里面的参数PorterDuff.Mode.SRC_IN其实有很多中情况,好像有达到16中情况,下面介绍一下常用的:


PorterDuff.Mode.SRC_IN:取两层绘制交集。显示上层。就是如果上面两张图片相叠,那么取这两张图片的交集而且显示的是上层那种图片


PorterDuff.Mode.DST_IN:  取两层绘制交集。显示下层。


通过调用这个PorterDuff.Mode.SRC_IN,来控制空出来的图片正好和我们需要的图片大小一样,达到我们要的遮罩效果

自然我是有写好的demo给大家的。但是在项目中不好拷贝,就直接将我的自定义的view贴出来给大家看,有问题的可以私信我。

/**
 * 图片加遮罩view
 */
public class CanSetImageView extends ImageView {

    private Context context;
    public CanSetImageView(Context context) {
        this(context, null);
    }

    public CanSetImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    public CanSetImageView(Context context, AttributeSet attrs, int defStyle) {
        this(context, attrs);
    }

    
    private Bitmap decodeBitmap(int resId) {
        return BitmapFactory.decodeResource(context.getResources(), resId);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int w = this.getWidth();
        int h = this.getHeight();

        Paint paint = new Paint();
        //应用资源文件的图片
        Bitmap cutBm = decodeBitmap(R.mipmap.round);
        cutBm = BitmapUtil.toSizeBitmap(cutBm, w, h);
        int cutWidth = cutBm.getWidth();
        int cutHeight = cutBm.getHeight();

        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            if (bitmap == null) {
                bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.computer);
            }
            //控件要显示的图
           // bitmap = BitmapUtil.toSizeBitmap(bitmap, w, h);
            canvas.drawBitmap(cutBm, 0, 0, paint);
            int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG
                    | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
                    | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
            canvas.saveLayer(0, 0, w, h, null, saveFlags);

            int left = cutWidth / 2 - bitmap.getWidth() / 2;
            int top = cutHeight / 2 - bitmap.getHeight() / 2;

            // 创建一个和原始图片一样大小的矩形
            canvas.drawBitmap(bitmap,left,top, paint);

            //            取两层绘制交集。显示上层。
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

            canvas.drawBitmap(bitmap, left, top, paint);
            paint.setXfermode(null);
            canvas.restore();
            if(cutBm.isRecycled()){
            	cutBm.recycle();
            }
            if(bitmap.isRecycled()){
            	bitmap.recycle();
            }
        }
    }
}




参考博文:http://jingpin.jikexueyuan.com/article/55827.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章