项目中经常会用到一些图片的裁剪作为头像,需求基本是圆形或者是矩形的。
1、先上个效果图
2、背景是由选择图片传递过去显示的
主要思路
1、矩形在四周绘制四个矩形,为透明的黑色,注意绘制的四个矩形不要重叠,不然会有黑色的重叠框子无法查看,绘制完成边框之后,在中间绘制一个有白色边框的矩形。
2、圆形在四周绘制一个半径为高度一半的圆弧,为透明的黑色,绘制完边框之后,在中间绘制一个有白色变宽的圆形
3、获取bitmap,使用Bitmap.drawBitmap();方法,获取矩形或者圆形的bitmap
3、矩形主要代码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = this.getWidth();
int height = this.getHeight();
mWidth = width - mHorizontalPadding * 2;
mVerticalPadding = (height - mWidth) / 2;
mPaint.setColor(0xaa000000);
//绘制左边
canvas.drawRect(0, 0, mHorizontalPadding, height, mPaint);
//绘制上边
canvas.drawRect(mHorizontalPadding, 0, width - mHorizontalPadding, mVerticalPadding, mPaint);
//绘制底部
canvas.drawRect(mHorizontalPadding, height - mVerticalPadding, width - mHorizontalPadding, height, mPaint);
//绘制右边
canvas.drawRect(width - mHorizontalPadding, 0, width, height, mPaint);
//绘制矩形边框
mPaint.setColor(mBorderColor);
mPaint.setStrokeWidth(mBorderWidth);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawRect(mHorizontalPadding, mVerticalPadding, width - mHorizontalPadding, height - mVerticalPadding, mPaint);
}
4、圆形主要代码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = this.getWidth();
int height = this.getHeight();
int innerCircle = dip2px(mContext, 150);
int ringWidth = height;
//绘制圆形
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(width / 2, height / 2, innerCircle, mPaint);
//绘制圆形周边的背景
mPaint.setColor(0xaa000000);
mPaint.setStrokeWidth(ringWidth);
canvas.drawCircle(width / 2, height / 2, innerCircle + 1 + ringWidth
/ 2, mPaint);
}
5、布局主要代码
<com.tongju.common.widget.view.ClipImageView
android:id="@+id/src_pic"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<com.tongju.common.widget.view.ClipRectangleView
android:id="@+id/clipview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
6、Activity主要代码
@Route(path = RouterPath.ROUTER_COMMON_IMAGE_CLIP)
public class ClipImageActivity extends BaseActivity implements View.OnClickListener {
private ClipImageView mClipImageView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_clip_image);
}
@Override
protected BasePresenter createPresenter() {
return null;
}
@Override
protected void findViews() {
this.mClipImageView = findViewById(R.id.src_pic);
findViewById(R.id.iv_back).setOnClickListener(this);
findViewById(R.id.tv_use).setOnClickListener(this);
}
@Override
protected void init() {
//拍照或者选完相册照片传递uri过来
Uri uri = getIntent().getParcelableExtra("image");
Glide.with(this).load(uri).apply(new RequestOptions()
.skipMemoryCache(true)
.diskCacheStrategy(DiskCacheStrategy.NONE))
.transition(withCrossFade()).into(mClipImageView);
}
@Override
public void onClick(View v) {
int id = v.getId();
if (id == R.id.iv_back) {
finish();
} else if (id == R.id.tv_use) {
Bitmap bitmap = mClipImageView.rectangleClip();
//这边通过EventBus传递获取到的bitmap,因为bundle对bitmap传递有大小限制
EventBus.getDefault().post(new MGetBitmap(bitmap));
finish();
}
}
}