Android 镂空效果的遮罩层实现

要实现的效果是在当前页面上，显示半透明的遮罩层，在任意位置实现镂空的圆形，镂空的位置能看到下面的页面，镂空的位置跟随一张提示文字的图片，效果如下：

实现步骤：

1. 绘制半透明的背景：
2. 绘制圆形

3. 绘制文字图片

   具体的实现代码如下：

---

1 绘制透明背景：

  /**
     * 创建遮罩层形状
     *
     * @return
     */
    private Bitmap makeSrcRect() {
        Bitmap bm = Bitmap.createBitmap(mScreenWidth, mScreenHeight, Bitmap.Config.ARGB_8888);
        Canvas canvcs = new Canvas(bm);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.BLACK);
        canvcs.drawRect(new RectF(0, 0, mScreenWidth, mScreenHeight), paint);
        return bm;
    }

2 绘制镂空的圆形

/**
     * 创建镂空层圆形形状
     * @return
     */
    private Bitmap makeDstCircle() {
        Bitmap bm = Bitmap.createBitmap(mScreenWidth, mScreenHeight, Bitmap.Config.ARGB_8888);
        Canvas canvcs = new Canvas(bm);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvcs.drawCircle(mPiercedX, mPiercedY, mPiercedRadius, paint);
        return bm;
    }

3 绘制文字图片

/**
* 创建提示提示信息文字图片的bitmap
*
* @return
*/
private Bitmap createPromptBitmap() {
Bitmap bitmap = BitmapFactory.decodeResource(
getResources(), R.drawable.prompt); // 图片建议放到drawable-mdpi 目录下 这样可以根据屏密度得到正确的缩放比例

    int width = bitmap.getWidth();
    int height = bitmap.getHeight();

    DisplayMetrics dm = getResources().getDisplayMetrics();  // 获取屏幕密度
    float realScale = 1.0f / dm.density;                                      // 恢复到实际像素的缩放
    float settingScale = realScale;

    if (realScale * width > mScreenWidth / 2) {
        settingScale = 0.8f * mScreenWidth / width;
    } else if (realScale * height > mScreenHeight) {
        settingScale = 0.8f * mScreenHeight / height;
    }

    // 取得想要缩放的matrix参数
    Matrix matrix = new Matrix();
    matrix.postScale(settingScale, settingScale);

// 得到新的图片
Bitmap newBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
return newBitmap;
}

最后的MaskPierceView 代码如下：

public class MaskPierceView extends View {
    private static final String TAG = "MaskPierceView";

    private Bitmap mSrcRect;
    private Bitmap mDstCircle;

    private int mScreenWidth;   // 屏幕的宽
    private int mScreenHeight;  // 屏幕的高

    private int mPiercedX, mPiercedY;
    private int mPiercedRadius;

    public MaskPierceView(Context context) {
        this(context, null);
    }

    public MaskPierceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        setLayoutParams(layoutParams);

        if (mScreenWidth == 0) {
            DisplayMetrics dm = getResources().getDisplayMetrics();
            mScreenWidth = dm.widthPixels;
            mScreenHeight = dm.heightPixels;
        }
    }

    /**
     * @param mPiercedX      镂空的圆心坐标
     * @param mPiercedY      镂空的圆心坐标
     * @param mPiercedRadius 镂空的圆半径
     */
    public void setPiercePosition(int mPiercedX, int mPiercedY, int mPiercedRadius) {
        this.mPiercedX = mPiercedX;
        this.mPiercedY = mPiercedY;
        this.mPiercedRadius = mPiercedRadius;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mSrcRect = makeSrcRect();
        mDstCircle = makeDstCircle();

        Paint paint = new Paint();
        paint.setFilterBitmap(false);
        canvas.saveLayer(0, 0, mScreenWidth, mScreenHeight, null,
                Canvas.MATRIX_SAVE_FLAG |
                        Canvas.CLIP_SAVE_FLAG |
                        Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                        Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                        Canvas.CLIP_TO_LAYER_SAVE_FLAG);

        canvas.drawBitmap(mDstCircle, 0, 0, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        paint.setAlpha(160);
        canvas.drawBitmap(mSrcRect, 0, 0, paint);
        paint.setXfermode(null);

        canvas.saveLayer(0, 0, mScreenWidth, mScreenHeight, null,
                Canvas.MATRIX_SAVE_FLAG |
                        Canvas.CLIP_SAVE_FLAG |
                        Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                        Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                        Canvas.CLIP_TO_LAYER_SAVE_FLAG);
        paint.setAlpha(255);

        canvas.drawBitmap(createPromptBitmap(), mPiercedX + mPiercedRadius, mPiercedY + mPiercedRadius, paint);
    }

    /**
     * 创建镂空层圆形形状
     * @return
     */
    private Bitmap makeDstCircle() {
        Bitmap bm = Bitmap.createBitmap(mScreenWidth, mScreenHeight, Bitmap.Config.ARGB_8888);
        Canvas canvcs = new Canvas(bm);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvcs.drawCircle(mPiercedX, mPiercedY, mPiercedRadius, paint);
        return bm;
    }

    /**
     * 创建遮罩层形状
     *
     * @return
     */
    private Bitmap makeSrcRect() {
        Bitmap bm = Bitmap.createBitmap(mScreenWidth, mScreenHeight, Bitmap.Config.ARGB_8888);
        Canvas canvcs = new Canvas(bm);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.BLACK);
        canvcs.drawRect(new RectF(0, 0, mScreenWidth, mScreenHeight), paint);
        return bm;
    }

    /**
     * 创建提示提示信息文字图片的bitmap
     *
     * @return
     */
    private Bitmap createPromptBitmap() {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.prompt);

        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        DisplayMetrics dm = getResources().getDisplayMetrics();  //获取屏幕密度
        float realScale = 1.0f / dm.density;  //恢复到实际像素的缩放
        float settingScale = realScale;

        if (realScale * width > mScreenWidth / 2) {
            settingScale = 0.8f * mScreenWidth / width;
        } else if (realScale * height > mScreenHeight) {
            settingScale = 0.8f * mScreenHeight / height;
        }

        // 取得想要缩放的matrix参数
        Matrix matrix = new Matrix();
        matrix.postScale(settingScale, settingScale);

//      得到新的图片
        Bitmap newBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
        return newBitmap;
    }
}