新手引導之控件高亮顯示

最近項目須要作一個新手引導的功能， 即某個功能控件高亮，其餘部分覆以蒙版效果，以下圖所示：

實現步驟以下：

自定義view  重寫onDraw(Canvas canvas)

 1 繪製一個屏幕大小的遮罩層         

bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
temp = new Canvas(bitmap);

// 背景畫筆
Paint bgPaint = new Paint();
if (backgroundColor != 0)
    bgPaint.setColor(backgroundColor);
else
    bgPaint.setColor(getResources().getColor(R.color.shadow));

// 繪製屏幕背景
temp.drawRect(0, 0, temp.getWidth(), temp.getHeight(), bgPaint);

 2 計算出高亮控件的位置（中心點）

 

final int targetLoc[] = new int[2];

// 獲取錨點View在屏幕上的左上角座標位置
targetView.getLocationOnScreen(targetLoc);

center = new int[2]; // 獲取中心座標 center[0] = targetLoc[0] + targetView.getWidth() / 2; center[1] = targetLoc[1] + targetView.getHeight() / 2;

 

   3 根據中心點位置 繪製高亮區 

   經過設置  Paint的PorterDuffXfermode屬性來實現

 

if (mCirclePaint == null)
    mCirclePaint = new Paint();
porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);// 或者CLEAR
mCirclePaint.setXfermode(porterDuffXfermode);
mCirclePaint.setAntiAlias(true);

// 繪製到屏幕
canvas.drawBitmap(bitmap, 0, 0, bgPaint);
bitmap.recycle();

       PorterDuffXfermode屬性介紹：orterDuffXfermode就是圖形混合模式的意思，PorterDuffXfermode能作些什麼呢？咱們先來看一張API DEMO裏的圖片:

 

這張圖片從必定程度上形象地說明了圖形混合的做用，兩個圖形一圓一方經過必定的計算產生不一樣的組合效果，在API中Android爲咱們提供了18種（比上圖多了兩種ADD和OVERLAY）模式：　

　　ADD:飽和相加,對圖像飽和度進行相加,不經常使用

　　CLEAR:清除圖像

　　DARKEN:變暗,較深的顏色覆蓋較淺的顏色，若二者深淺程度相同則混合

　　DST:只顯示目標圖像

　　DST_ATOP:在源圖像和目標圖像相交的地方繪製【目標圖像】，在不相交的地方繪製【源圖像】，相交處的效果受到源圖像和目標圖像alpha的影響

　　DST_IN:只在源圖像和目標圖像相交的地方繪製【目標圖像】，繪製效果受到源圖像對應地方透明度影響

　　DST_OUT:只在源圖像和目標圖像不相交的地方繪製【目標圖像】，在相交的地方根據源圖像的alpha進行過濾，源圖像徹底不透明則徹底過濾，徹底透明則不過濾

　　DST_OVER:將目標圖像放在源圖像上方

　　LIGHTEN:變亮，與DARKEN相反，DARKEN和LIGHTEN生成的圖像結果與Android對顏色值深淺的定義有關

　　MULTIPLY:正片疊底，源圖像素顏色值乘以目標圖像素顏色值除以255獲得混合後圖像像素顏色值

　　OVERLAY:疊加

　　SCREEN:濾色，色調均和,保留兩個圖層中較白的部分，較暗的部分被遮蓋

　　SRC:只顯示源圖像

　　SRC_ATOP:在源圖像和目標圖像相交的地方繪製【源圖像】，在不相交的地方繪製【目標圖像】，相交處的效果受到源圖像和目標圖像alpha的影響

　　SRC_IN:只在源圖像和目標圖像相交的地方繪製【源圖像】

　　SRC_OUT:只在源圖像和目標圖像不相交的地方繪製【源圖像】，相交的地方根據目標圖像的對應地方的alpha進行過濾，目標圖像徹底不透明則徹底過濾，徹底透明則不過濾

　　SRC_OVER:將源圖像放在目標圖像上方

　　XOR:在源圖像和目標圖像相交的地方以外繪製它們，在相交的地方受到對應alpha和色值影響，若是徹底不透明則相交處徹底不繪製

 

        

參考：

https://www.cnblogs.com/libertycode/p/6290497.html