(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果,如下图:

上面这个图片是圆形的,而我们这个原图是正方形的,所以我们可能就需要这么一个遮罩的效果使它变为圆形,这种一般就是我们图片从网络上获取的,形状不是由我们自己定的,所以才会加上这么一个效果,看下面的原图:

这个是一个正方形的,那么要弄这么一个圆形,我们还需要一个圆形全黑的图片,如下

就是这个图片,其实简单的来说就是两个图片相结合,只显示被黑色图片覆盖的区域,外面的区域就不显示,这样就成一个圆形的图片了(上面的图片都是采用从别的应用程序来的),其实这个主要的技术还是涉及到了PorterDuffXfermode类的使用方法,

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

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

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

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

其它可以到网上可以查询得到,这两个用得也比较多。下面还有一张图片是外围那层图片的效果

好,我们现在来看看这个代码是如何来写的

package com.example.myimageview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.View; public class MyImageView extends View { private Context context; private Bitmap bitmapBorder;
private Bitmap bitmapMask;
private Paint paint;
private PorterDuffXfermode xfermode; private Bitmap bitmap; private int _width;
private int _height; public MyImageView(Context context){
this(context, null);
} public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context; bitmapBorder = decodeBitmap(R.drawable.border);
bitmapMask = decodeBitmap(R.drawable.mask); _width = bitmapBorder.getWidth();
_height = bitmapBorder.getHeight(); paint = new Paint();
xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
} public MyImageView(Context context, AttributeSet attrs, int defStyle) {
this(context, attrs);
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(_width, _height);
} private Bitmap decodeBitmap(int resId) {
return BitmapFactory.decodeResource(context.getResources(), resId);
} public void setResourseId(int resourseId) {
bitmap = decodeBitmap(resourseId);
invalidate();
} public void setResourseBitmap(Bitmap bitmap){
this.bitmap = bitmap;
invalidate();
} @Override
protected void onDraw(Canvas canvas) {
if(bitmap == null){
return;
}
canvas.drawBitmap(bitmapBorder, 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, _width, _height, null, saveFlags);
canvas.drawBitmap(bitmapMask, 0, 0, paint);
paint.setXfermode(xfermode);
int left = _width/2 - bitmap.getWidth() /2;
int top = _height/2 - bitmap.getHeight()/2;
canvas.drawBitmap(bitmap, left, top, paint);
paint.setXfermode(null);
canvas.restore();
}
}

下面我们来分析一下代码的结构:

MyImageView是继承view的一个子类,在构造函数中我们看到设置两张图片bitmapBorder就是我上面贴出来的最下面外围的图片,bitmapMask就是那个全黑圆形的图片,_width和_height是bitmapBorder(外围那张图片的宽度和高度),因为那张图片是最大的我们需要定义这个view的大小所以需这个宽和高,下面

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(_width, _height);
}

就是使用宽和高来处理的,同时我们还看到了画笔Paint和PorterDuffXfermode创建,要说明一下这个PorterDuffXfermode对象是通过画笔Paint来设置的,下面有说明的

    public void setResourseId(int resourseId) {
bitmap = decodeBitmap(resourseId);
invalidate();
}

这个代码就是需要我们手动传入想要变为圆形的图片,这个是在Avtivity中设置就行,最主要的代码来看onDraw()方法里面的。

    @Override
protected void onDraw(Canvas canvas) {
if(bitmap == null){
return;
}
canvas.drawBitmap(bitmapBorder, 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, _width, _height, null, saveFlags);
canvas.drawBitmap(bitmapMask, 0, 0, paint);
paint.setXfermode(xfermode);
int left = _width/2 - bitmap.getWidth() /2;
int top = _height/2 - bitmap.getHeight()/2;
canvas.drawBitmap(bitmap, left, top, paint);
paint.setXfermode(null);
canvas.restore();
}

我们来看有三个地方使用了canvas.drawBitmap这个方法,简单理解就是谁先那么该图片就显示在最下面,最后使用的drawBitmap()方法就显示在最上面

canvas.saveLayer()方法和canvas.restore()是成对出现的,

Canvas 在一般的情况下可以看作是一张画布,所有的绘图操作如drawBitmap, drawCircle都发生在这张画布上,这张画板还定义了一些属性比如Matrix,颜色等等。但是如果需要实现一些相对复杂的绘图操作,比如多层动 画,地图(地图可以有多个地图层叠加而成,比如:政区层,道路层,兴趣点层)。Canvas提供了图层(Layer)支持,缺省情况可以看作是只有一个图 层Layer。如果需要按层次来绘图,Android的Canvas可以使用SaveLayerXXX, Restore 来创建一些中间层,对于这些Layer是按照“栈结构“来管理的:

创建一个新的Layer到“栈”中,可以使 用saveLayer, savaLayerAlpha, 从“栈”中推出一个Layer,可以使用restore,restoreToCount。但Layer入栈时,后续的DrawXXX操作都发生在这个 Layer上,而Layer退栈时,就会把本层绘制的图像“绘制”到上层或是Canvas上,在复制Layer到Canvas上时,可以指定Layer的 透明度(Layer),这是在创建Layer时指定的:public int saveLayerAlpha(RectF bounds, int alpha, int saveFlags);

具体点可以到http://blog.csdn.net/linghu_java/article/details/8939952这个网站了解一下。

paint.setXfermode(xfermode);这个就是设置了画笔的效果了,left和top不用说了就是该图片要显示在中心的位置。canvas.drawBitmap(bitmap, left, top, paint);这个是最后那个canvas.drawBitmap方法,而且使用的PorterDuff.Mode.SRC_IN参数,表示的是取两层绘制交集。显示上层,那就是显示最后一张图片。

其实从上面来看效果是不错的,但是在真正的应用中我们不难会发现有些图片可能很大,这个时候就需要我们对图片进行等比的放大效果

http://bbs.csdn.net/topics/310218516这个网址就看到有介绍等比缩放图片的例子,我们来看下面的图片效果

上面两张图对比,第一张就是原来的效果,第二张就是对图片进行等比的缩放效果,看看第二张图片代码的:

package com.example.myimageview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.PorterDuff.Mode;
import android.util.AttributeSet;
import android.view.View; public class itchqImageView extends View{ private Bitmap bg;
private Bitmap photo; private int bg_width;
private int bg_height;
public itchqImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
} private void init(){
bg=BitmapFactory.decodeResource(getResources(),R.drawable.mask);
bg_width=bg.getWidth();
bg_height=bg.getHeight();
} public void setImageView(int imgId){
photo=BitmapFactory.decodeResource(getResources(), imgId);
scaleImage();
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG); paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN)); RectF rectf=new RectF(0,0,bg_width,bg_height); canvas.saveLayer(rectf, null, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(photo, 0,0, null);
canvas.drawBitmap(bg, 0, 0,paint);
canvas.restore();
} private void scaleImage(){ if(photo!=null){ int widht=photo.getWidth();
int height=photo.getHeight(); int new_width=0;
int new_height=0; if(widht!=height){
if(widht>height){
new_height=bg_height;
new_width=widht*new_height/height;
}else{
new_width=bg_width;
new_height=height*new_width/widht;
}
}else{
new_width=bg_width;
new_height=bg_height;
}
photo = Bitmap.createScaledBitmap(photo, new_width, new_height, true);
}
} }
scaleImage()这个方法里面就是对图片进行等比的缩放效果,缩放的大小就和我们全黑色的图片大小一样(这里我们原来外面圆形效果去掉了,就是上面第三张全白色的图片)
如果图片不是正方形的我们就需要进行判断对比,最后得出的宽和高就是我们要等比缩放的大小。

Android 遮罩层效果--制作圆形头像的更多相关文章

  1. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  2. Android开发之制作圆形头像自定义View,直接引用工具类,加快开发速度。带有源代码学习

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...

  3. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  4. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸

    Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...

  6. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  7. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  8. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  9. WordPress制作圆形头像友情链接页面的方法

    网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...

随机推荐

  1. 【有奖调研】来,聊聊TTS音色定制这件事儿

    音色个性化定制,一个能让文字转语音服务(TTS)在用户交互过程中注入温度的技术. 文能在营销及内容交付中让品牌保持一致性,武能让开发者"音"量加持,创新开发. 这个100%钢铁纯技 ...

  2. JZ-021-栈的压入、弹出序列

    栈的压入.弹出序列 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等. 例如序列1,2,3,4,5是某栈的压入顺序,序列4 ...

  3. LeetCode-031-下一个排列

    下一个排列 题目描述:实现获取 下一个排列 的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须 原地 修 ...

  4. C#发送邮件,可带有Excel附件

    记录工作中遇到发邮件带附件的需求,新建控制台应用程序,目录下创建好所需要的定义好的Excel模板! class Program { static string newExcelPath = strin ...

  5. 关于stationary 和non-stationary signals 的区别和定义

    结论:实际上在生活中是没有静态信号(stationary signals)的.而我们之所以把随机信号分为stationary and non-stationary 完全是根据信号产生的特征(chara ...

  6. 1. 查看NGINX是否在运行.

    1. 查看NGINX是否在运行. ps aux | grep nginx [root@bogon /]# ps aux | grep nginx root 2318 0.0 0.0 56816 127 ...

  7. github打开之后下载缓慢或者下载不了问题的解决

    我是一点击下载就会显示下载不了,然后按照网上的教程看的修改hosts文件.大家可以先用这个方法,如果还是不行就可以按照以下操作. 1.登录https://gitee.com/(没有账号的先注册).2. ...

  8. LGP6008题解

    题意有点儿绕? 容易发现,题意相当于在说,如果某一格有水,那么 ban 掉上一行后,让与其连同的所有格子被画上水. 所以我们从上到下枚举行,依次 ban 掉每一行,然后数连通块个数即可. 需要注意的是 ...

  9. 【1024打卡】C++字符串的输出((c语言风格)

    c++字符串输出(c语言风格) 文章目录 c++字符串输出(c语言风格) 杂记 代码 杂记 今天程序设计竞赛白给了,果然还是太弱了,y总带带我TAT ┭┮﹏┭┮1024快乐 代码 c语言学习 #inc ...

  10. [SPDK/NVMe存储技术分析]012 - 用户态ibv_post_send()源码分析

    OFA定义了一组标准的Verbs,并提供了一个标准库libibvers.在用户态实现NVMe over RDMA的Host(i.e. Initiator)和Target, 少不了要跟OFA定义的Ver ...