博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
android 开发 View _15 导入一张图片将它裁剪成圆形 与 paint图层叠加处理详解
阅读量:4502 次
发布时间:2019-06-08

本文共 4724 字,大约阅读时间需要 15 分钟。

方法一:

/*    实现思维是这样的:    1.首先拿到bitmap图片    2.得到bitmap图片的高度 宽度,并且计算好各个画图尺寸    3.创建一个空白的 bitmap图片: Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);    4.将这个空白图片导入画布里    5.然后重点: 这个画布一定是要设置成透明的    6.在这张透明的画布上画圆型。    7.然后重点:设置相差裁剪属性    8.然后在这张透明的画布上添加bitmap图片    9.返回那张透明的bitmap     */    public Bitmap toRoundBitmap(Bitmap bitmap) {        int width = bitmap.getWidth();        int height = bitmap.getHeight();        float roundPx;        float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;        if (width <= height) {            roundPx = width / 2;            left = 0;            top = 0;            right = width;            bottom = width;            height = width;            dst_left = 0;            dst_top = 0;            dst_right = width;            dst_bottom = width;        } else {            roundPx = height / 2;            float clip = (width - height) / 2;            left = clip;            right = width - clip;            top = 0;            bottom = height;            width = height;            dst_left = 0;            dst_top = 0;            dst_right = height;            dst_bottom = height;        }        Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(output);        final int color = 0xff424242;        final Paint paint = new Paint();        final Rect src = new Rect((int) left, (int) top, (int) right, (int) bottom);        final Rect dst = new Rect((int) dst_left, (int) dst_top, (int) dst_right, (int) dst_bottom);        final RectF rectF = new RectF(dst);        paint.setAntiAlias(true);// 设置画笔无锯齿        canvas.drawARGB(0, 0, 0, 0); // 填充整个Canvas        paint.setColor(color);        // 以下有两种方法画圆,drawRounRect和drawCircle        // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);// 画圆角矩形,第一个参数为图形显示区域,第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。        canvas.drawCircle(roundPx, roundPx, roundPx, paint);        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置两张图片相交时的模式,参考http://trylovecatch.iteye.com/blog/1189452        canvas.drawBitmap(bitmap, src, dst, paint); //以Mode.SRC_IN模式合并bitmap和已经draw了的Circle        return output;    }

参考流程图 &  原理图:

方法二:

转:

使用clipPath()方法裁剪圆形图片。

首先,我们先看效果图:
裁剪前:
裁剪后:
接下来,我们来一步一步的实现。

1.新建一个module

2.新建一个自定义view类,继承View,并重写两参构造器和onDrawn方法

/** * Created by zhaoxin on 17/8/31. */public class MyAnimationView extends View {    public MyAnimationView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }

 

3.新建一个布局,在布局中通过包名.类导入自定义view

 

4.接下来就是重要的裁剪圆形图片部分

/** * Created by zhaoxin on 17/8/31. */public class MyAnimationView extends View {    private Bitmap mBitmap;    private Path mPath;    public MyAnimationView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        Paint paint = new Paint();        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic);        mPath = new Path();        mPath.addCircle(mBitmap.getWidth() / 2, mBitmap.getHeight() / 2, mBitmap.getWidth() / 2, Path.Direction.CCW);        canvas.clipPath(mPath);        canvas.drawBitmap(mBitmap, 0, 0, paint);    }}

 

 

个人重写

/*content:圆形图片的自定义ImageViewtime:2018-8-7 17:43build:zhouqiang使用方法:请用setImage 方法设置图片 */public class CircleImageView extends View {    private Path mPath;    private Paint mPaint;    private Bitmap mBitmap;    public CircleImageView(Context context) {        super(context);        initPaint();    }    public CircleImageView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        initPaint();    }    public CircleImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initPaint();    }    public void initPaint(){        mPaint = new Paint();        mPath = new Path();    }    public void setImage(Bitmap bitmap){        this.mBitmap = bitmap;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPaint.reset();        mPath.addCircle(getHeight()/2,getWidth()/2,getWidth()/2.5f,Path.Direction.CW);        mPaint.setAntiAlias(true);        mPaint.setStyle(Paint.Style.FILL);        canvas.clipPath(mPath);        canvas.drawBitmap(mBitmap,                new Rect(0,0,mBitmap.getWidth(),mBitmap.getHeight()),                new Rect(0,0,getWidth(),getHeight()),                mPaint);    }}

 

 

 

posted on
2018-08-03 17:01  阅读(
...) 评论(
...) 收藏

转载于:https://www.cnblogs.com/guanxinjing/p/9708589.html

你可能感兴趣的文章
Linux相关——关于文件调用
查看>>
判断链表是否有环
查看>>
我的第一个python web开发框架(7)——本地部署前端访问服务器
查看>>
python_模块
查看>>
悲观锁乐观锁实战
查看>>
Android平台签名证书(.keystore)生成指南
查看>>
WeX5 苹果APP打包教程
查看>>
机器学习笔记 - 入门
查看>>
使用咕咕机打印有道词典中的单词
查看>>
你迷茫吗?
查看>>
更简单更全的material design状态栏
查看>>
高德地图随笔
查看>>
备份与恢复IBM Lotus Connections 3.0 集群环境
查看>>
《面向对象程序设计》——寒假作业3
查看>>
0610 微信小程序 (image组件 template自定义组件 wk:if 条件渲染)
查看>>
LSTM改善RNN梯度弥散和梯度爆炸问题
查看>>
LeetCode-227 Basic Calculator II
查看>>
Design Pattern - 工厂模式
查看>>
第一个PyQt5窗口
查看>>
linux系统目录结构
查看>>