AR 相机扫描效果实现

前端时间研究了一下 AR 相机的实现，但是觉得支付宝的 AR 相机扫描界面和一般相机扫描界面不一样，因为它的背景中间“挖的坑”是一个正六边形，而不是常规的矩形，于是就起了模仿的心思。

仔细观察，发现需要实现的几个亮点：

1. 带圆角的正六边形
2. 六边形的外围实现一条由粗到细的线条，轨迹也是一个带圆角的正六边形
3. 背景中间“挖坑”，“挖”出一个正六边形的坑来显示需要扫描的区域
4. 中间点状的元素展示

在仔细分析以前，先看看我实现的动图：

上面我基本上完成了预定目标，接下来分析一下是如何完成的？

画圆角多边形

在实现这个功能的时候，我是直接百度的，然后发现这个六边形不是我需要的，效果图如下：

实现代码：

 /** 
     * 绘制彩色多边形或星形 
     * @param canvas Canvas画布 
     * @param paint Paint画笔 
     * @param color 颜色 
     * @param radius 外接圆半径 
     * @param count 外顶点数 
     * @param isStar 是否为星形 
     */  
    private void drawStar(Canvas canvas, Paint paint, @ColorInt int color, float radius,int count,boolean isStar){  
        canvas.translate(radius,radius);  
        if ((!isStar) && count < 3){  
            canvas.translate(-radius,-radius);  
            return;  
        }  
        if (isStar && count < 5){  
            canvas.translate(-radius,-radius);  
            return;  
        }  
        canvas.rotate(-90);  
        if (paint == null){  
            paint = new Paint();  
        }else{  
            paint.reset();  
        }  
        Path path = new Path();  
        float inerRadius = count%2==0?  
                (radius*(cos(360/count/2)-sin(360/count/2)*sin(90-360/count)/cos(90-360/count)))  
                :(radius*sin(360/count/4)/sin(180-360/count/2-360/count/4));  
        for (int i=0;i<count;i++){  
            if (i==0){  
                path.moveTo(radius*cos(360/count*i),radius*sin(360/count*i));  
            }else{  
                path.lineTo(radius*cos(360/count*i),radius*sin(360/count*i));  
            }  
            if (isStar){  
                path.lineTo(inerRadius*cos(360/count*i+360/count/2),inerRadius*sin(360/count*i+360/count/2));  
            }  
        }  
        path.close();  
        paint.setColor(color);  
        canvas.drawPath(path,paint);  
        canvas.rotate(90);  
        canvas.translate(-radius,-radius);  
    }