自定义继承ImageView
效果如下:
device-2017-06-10-221258.png
实现圆角头像前我们首先做个小的测试:
自定义一个PathView,在Xml里面设置背景为粉红色:
T6GQNEMZMYGC{)B2`YDF`7W.png
画一个和控件大小一样的正方形,背景色为白色
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.WHITE);
canvas.drawRect(0,0,width,height,mPaint);
}
运行效果如下:
device-2017-06-10-230508.png
很简单的东西,然后在PathView里面添加如下代码:
设置Paint
mPaint = new Paint();
mPaint.setAntiAlias(true);
设置Path
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
initPath();
}
private void initPath() {
//设置
path = new Path();
path.addCircle(width / 2, height / 2, width / 2,
Path.Direction.CW);
path.setFillType(Path.FillType.INVERSE_WINDING);
}
重写onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画白色矩形
mPaint.setColor(Color.WHITE);
canvas.drawRect(0,0,width,height,mPaint);
//画Path
mPaint.setColor(Color.YELLOW);
canvas.drawPath(path,mPaint);
}
反正代码是很简单的东西,看看效果:
device-2017-06-10-230909.png
如何实现这一步的呢,是根据path的四中填充方式,这里用的是反:反非零环绕数规则(INVERSE_WINDING)具体参考:GscSloop
重点
如果我们将path画的黄色部分,变为透明的漏出底部红色背景不就正好了,不就实现了圆形头像,这里运用了一个很重要的知识:
将paint设置为:
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
//设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果
setXfermode(Xfermode xfermode);
看看效果:
device-2017-06-10-231923.png
尼玛确实是橡皮擦效果,结果把我的背景都擦没有了,留下黑黑的背景
结果背景问题
因为背景没有了,所以要要处理这一个那就保存原有背景:
//保留图层
canvas.saveLayer(0,0,width,height,null ,Canvas.ALL_SAVE_FLAG);
看看效果:
device-2017-06-10-232403.png
果然可以实现这个效果了,那么如果实现图片圆形更是很简单了,过程不再赘述直接贴上代码,总体很简单:
代码:
public class CircleImage extends ImageView {
private Bitmap bitmap = null;
private int width;
private int height;
private TechView.FitType mFitType = TechView.FitType.CENTER;
private Bitmap newbitmap;
private Paint mPaint;
private Path path;
public CircleImage(Context context) {
this(context, null);
}
public CircleImage(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleImage(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
setScaleType(ScaleType.MATRIX);
setBitmap(context);
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
intPath();
}
private void intPath() {
//设置
path = new Path();
path.addCircle(width / 2, height / 2, width / 2,
Path.Direction.CW);
path.setFillType(Path.FillType.INVERSE_WINDING);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (null != newbitmap) {
//要保存画布,要不会出现背景为黑色的情况
canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(newbitmap, new Matrix(), new Paint());
canvas.drawPath(path, mPaint);
}
}
public void setBitmap(final Context mContext) {
String url = "https://ws1.sinaimg.cn/large/610dc034ly1fgchgnfn7dj20u00uvgnj.jpg";
Glide.with(mContext)
.load(url)
.asBitmap()
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
bitmap = resource;
//缩放图片
setScaleImage(bitmap);
invalidate();
}
@Override
public void onLoadFailed(Exception e, Drawable errorDrawable) {
super.onLoadFailed(e, errorDrawable);
bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.image_1);
setScaleImage(bitmap);
invalidate();
}
});
}
private void setScaleImage(Bitmap mBitmap) {
// 获得图片的宽高
int btWidth = mBitmap.getWidth();
int btHeight = mBitmap.getHeight();
// 设置想要的大小
int newWidth = width;
int newHeight = height;
// 计算缩放比例
float scaleWidth = ((float) newWidth) / btWidth;
float scaleHeight = ((float) newHeight) / btHeight;
// 取得想要缩放的matrix参数
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的图片
newbitmap = Bitmap.createBitmap(mBitmap, 0, 0, btWidth, btHeight, matrix,
true);
}
}
网友评论