自定义view之图片放入圆环中间随记

关于drawBitmap

1、基本的绘制图片方法
//Bitmap：图片对象，left:偏移左边的位置，top： 偏移顶部的位置
drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
2、对图片剪接和限定显示区域
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)；
Rect src: 是对图片进行裁截，若是空null则显示整个图片
RectF dst：是图片在Canvas画布中显示的区域，大于src则把src的裁截区放大，小于src则把src的裁截区缩小

如何将图片放到自定义view圆环的中间

//获取圆心坐标x,y分别减去图片宽高的1/2;和加上1/2;设为左、上、右、下就可以把图片放到中间了
det = new Rect(x-bitmap.getWidth()/2,y-mBitmap.getHeight()/2,
x+bitmap.getWidth(),y+mBitmap.getHeight()/2)

中间图像为图片圆环和背景为自定义

具体代码如下

public class MaskView extends View {

    private static final String TAG = "MaskView";

    private int mLeft;
    private int mTop;
    private int mRight;
    private int mBottom;
    private int mProgress=0; // 进度

    private Paint mClearPaint;
    private Paint mCirclePaint;
    private Paint mSmallCirclePaint;
    private Paint mfuzzyCirclePaint;
    private Rect mMaskRect;
    private boolean mIsFirstScale = true;
    private Bitmap mBitmap;
    private Bitmap mDoneBimap;
    private Rect mSrc;
    private Rect mDst;
    private Rect mDoneSrc;
    private Rect mDoneDst;

    public MaskView(Context context) {
        super(context);
        init();
    }

    public MaskView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mClearPaint = new Paint();
        mClearPaint.setAntiAlias(true);
//设置圆内部为空
        mClearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(CommonUtil.dip2px(getContext(), 3));

        mSmallCirclePaint = new Paint();
        mSmallCirclePaint.setAntiAlias(true);
        mSmallCirclePaint.setStyle(Paint.Style.STROKE);
        mSmallCirclePaint.setStrokeWidth(CommonUtil.dip2px(getContext(), 5));

        mfuzzyCirclePaint = new Paint();
        mfuzzyCirclePaint.setAntiAlias(true);


        mMaskRect = new Rect();

        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.face_entry);
        mDoneBimap = BitmapFactory.decodeResource(getResources(), R.mipmap.face_dong);

    }
//设置不同时期进度
    public void setProgress(int progress) {
        this.mProgress = progress;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            invalidate();
        }
    }

    public Rect getMaskRect(float scaleX, float scaleY) {
        if (mIsFirstScale) {
            int left = (int) (this.mLeft / scaleX);
            int top = (int) (this.mTop / scaleY);
            int right = (int) (this.mRight / scaleX);
            int bottom = (int) (this.mBottom / scaleY);
            mMaskRect.set(left, top, right, bottom);
            mIsFirstScale = false;
            Log.d(TAG, "scaleX : " + scaleX);
            Log.d(TAG, "scaleY : " + scaleY);
            Log.d(TAG, "mMaskRect : " + mMaskRect.toShortString());
        }
        return mMaskRect;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed)
            initMaskArea();
    }

    private void initMaskArea() {
        int width = getWidth();
        int length = width / 6;
        mLeft = length;
        mTop = length; // 上下蒙板区域固定
        mRight = length * 5;
        mBottom = length * 5;

        int centerButmap = width >> 1;
        mSrc = new Rect(0,0,mBitmap.getWidth(),mBitmap.getHeight());
        mDst = new Rect(centerButmap-mBitmap.getWidth()/2,centerButmap-mBitmap.getHeight()/2,
                centerButmap+mBitmap.getWidth()/2,centerButmap+mBitmap.getHeight()/2);

        mDoneSrc = new Rect(0,0,mDoneBimap.getWidth(),mDoneBimap.getHeight());
//获取圆心坐标x,y分别减去图片宽高的1/2;和加上1/2;设为左、上、右、下就可以把图片放到中间了
        mDoneDst = new Rect(centerButmap-mDoneBimap.getWidth()/2,centerButmap-mDoneBimap.getHeight()/2,
                centerButmap+mDoneBimap.getWidth()/2,centerButmap+mDoneBimap.getHeight()/2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float cx = (mLeft + mRight) >> 1;
        float cy = (mTop + mBottom) >> 1;
        float radius = (mRight - mLeft) >> 1;
        if (mProgress==0) {
            canvas.drawBitmap(mBitmap, mSrc, mDst, null);
        }else {
            canvas.drawCircle(cx, cy, radius, mClearPaint);
        }

        if (mProgress == 100) {
            canvas.drawBitmap(mDoneBimap, mDoneSrc, mDoneDst, null);
            mfuzzyCirclePaint.setColor(0x37fbfbfb);
            canvas.drawCircle(cx, cy, radius-CommonUtil.dip2px(getContext(), 2), mfuzzyCirclePaint);
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            mSmallCirclePaint.setColor(0xfffbfbfb);
            canvas.drawCircle(cx, cy, radius-CommonUtil.dip2px(getContext(), 2), mSmallCirclePaint);
            mCirclePaint.setColor(0xFFD9D9D9);
            canvas.drawCircle(cx, cy, radius+CommonUtil.dip2px(getContext(), 2), mCirclePaint);
            mCirclePaint.setColor(0xFF15af97);
            float sweepAngle = mProgress * 360 / 100.0f;
            Log.d(TAG, "sweepAngle: " + sweepAngle);
            canvas.drawArc(mLeft-CommonUtil.dip2px(getContext(), 2), mTop-CommonUtil.dip2px(getContext(), 2),
                    mRight+CommonUtil.dip2px(getContext(), 2),
                    mBottom+CommonUtil.dip2px(getContext(), CommonUtil.dip2px(getContext(), 1)),
                    -90, sweepAngle, false, mCirclePaint);
        }
    }
}