新手引导之控件高亮显示

最近项目需要做一个新手引导的功能，即某个功能控件高亮，其他部分覆以蒙版效果，如下图所示：

实现步骤如下：

自定义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

新手引导之控件高亮显示

猜你喜欢