项目中要绘制一个人像对正框,第一个想到的就是先绘制背景,然后利用PorterDuffXfermode(PorterDuff.Mode.XOR)将人像抠掉,绘制人像框,然而,调了许久才发现当预览区域的背景是半透明的,PorterDuff.Mode.XOR不能将重叠区域抠掉,预览区域是不透明时就可以抠掉,具体原因可能是PorterDuff.Mode对透明度有一些要求吧。后来想到ucrop库在裁剪图片时的对正框和这里很类似,看了源码后,才知道还有这种操作,主要是clipPath方法的第二个参数,话不多说,看图上代码。
设计稿:
实现:
实现方式:上方是一个贝塞尔曲线,下方是大半个椭圆
public class FaceAlignView extends View {
private Context mContext;
private RectF mBgRect;
private Path mClipPath;
private Paint mClipPaint;
private float mVerticalMargin;
private float mHorizontalMargin;
private PathMeasure mPathMeasure;
public FaceAlignView(Context context) {
this(context, null);
}
public FaceAlignView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public FaceAlignView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initPaint();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBgRect.left = 0;
mBgRect.top = 0;
mBgRect.right = w;
mBgRect.bottom = h;
mClipPath.reset();
//画下方的椭圆
mClipPath.addArc(mHorizontalMargin, mVerticalMargin / 3f, w - mHorizontalMargin, h - mVerticalMargin, -35, 250);
//取出椭圆的右上角的起始坐标
float[] pos = new float[2];
float[] tan = new float[2];
mPathMeasure.setPath(mClipPath, false);
mPathMeasure.getPosTan(0, pos, tan);
//画上方的二阶贝塞尔曲线
mClipPath.moveTo(w - pos[0], pos[1]);
mClipPath.cubicTo(w - pos[0] * 0.86f, pos[1] * 0.35f, pos[0] * 0.86f, pos[1] * 0.35f, pos[0], pos[1]);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
//截取人像透明区域 Region.Op.DIFFERENCE path外的区域才允许绘制
canvas.clipPath(mClipPath, Region.Op.DIFFERENCE);
canvas.drawColor(mContext.getResources().getColor(R.color.face_align_bg));
canvas.restore();
//绘制人像边缘
canvas.drawPath(mClipPath, mClipPaint);
}
private void initPaint() {
mBgRect = new RectF();
mClipPath = new Path();
mPathMeasure = new PathMeasure();
mClipPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mClipPaint.setColor(mContext.getResources().getColor(R.color.face_align_clip_path));
mClipPaint.setStrokeWidth(DisplayUtils.dpToPx(4));
mClipPaint.setStyle(Paint.Style.STROKE);
mClipPaint.setStrokeCap(Paint.Cap.ROUND);
mVerticalMargin = dpToPx(50);
mHorizontalMargin = dpToPx(40);
}
public static int dpToPx(int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
}
}