九宫格手势锁实现思路

0.前言

大致流程如下：
- 1：找点
- 2：画圆（圆的状态,笔,API，逻辑，伪代码）
- 3：焦点（焦点基本分析,获取焦点的依据：俩点间距离公式,焦点列表）
- 4：画线（基本分析：俩点一线，新增一支笔，线的状态,画线）
- 5：密码校验，Touch事件处理

1.找点

一张示意图：

图上代表横屏竖屏。将宽高分别除以4，便可得到每个点的x，y坐标，当然这个方式比较笨拙，还可以套用这个公式：“(最大边 - 最小边)/2”来获取起始位置，后面的点就可以按照步长进行排列。

3行3列的2维数组，用pointer对象承载密码点。

Pointer {  坐标；  状态；  密码数值；}

2.画圆

主要讨论绘制的问题，但是绘制这个圆圈需要结合实际需求来分析。

2.1.圆

一张示意图描述3种状态：

State：NomalFocus-RightFocus-Error

2.2.笔的设置

OutterPaint：outter_paint.setColor(Color.XXX);//笔颜色，(黑，蓝，红)outter_paint.setStrokeWidth(5);//线条粗细outter_paint.setStyle(Style.STROKE);//笔风格，线条InnerPaint：inner_paint.setColor(Color.XXX);//笔颜色，(蓝，红)inner_paint.setStyle(Style.FILL);//笔风格，内填充

2.3.具体绘制的api和伪代码

API : canvas.drawCircle(float 圆心X, float 圆心Y, 半径, 笔);

伪代码：drawPointter(Pointer pointer){     x = pointer.getX()，y=pointer.getY()；     swich(pointer.getState()){        case Nalmal/Default：           OutterPaint.setColor(BLACK)；           canvas.drawCircle(x, y, 外圆半径,OutterPaint);        case FocusRight：           OutterPaint.setColor(BLUE)；           canvas.drawCircle(x, y, 外圆半径,OutterPaint);           InnerPaint.setColor(BLUE)；           canvas.drawCircle(x, y, 内圆半径,InnerPaint);        caset FocusError：           OutterPaint.setColor(RED)；           canvas.drawCircle(x, y, 外圆半径,OutterPaint);           InnerPaint.setColor(RED)；           canvas.drawCircle(x, y, 内圆半径,InnerPaint);     }}

3.焦点思考

3.1：焦点基本分析：

1：用户在触摸屏幕时（DOWN/MOVE）获取TouchPoint（ X，Y）
2：（遍历）校验TouchPoint是否在9个基准点中某个点的“范围之内”。

3.2：获取焦点的依据：俩点间距离公式：

示意图：

2点间的距离公式：

MathUtil.俩点间距离公式(baseX，baseY，touchX，touchY，半径){if (Math.sqrt((baseX - touchX) * (baseX - touchX))+ ((baseY - touchY) * (baseY - touchY)) < R) {            return true;        }        return false;}

3.3：焦点列表：

Poiner pointer = getFoucsPointer();if(null != pointer ){        List<Pointer> focusPointerList.add（pointer ）；}Pointer getFoucsPointer(Pointer touchPoint){     List<Pointer> basePointList = getBasePoints();        for(Pointer basePoint: basePointList ){             if(checkFoucs(basePoint，touchPoint)){               return basePoint             }       return null;     }} boolean checkFoucs(Pointer ponter1,Pointer pointer2){  return MathUtil.俩点间距离公式(pointer1.getX(),pointer1.getY（）,pointer2.getX(),potiner2.getY(),        圆点半径);}

4.画线

4.1.基本分析：俩点一线，新增一支笔，线的状态：

canvas.drawLine(float startX,float startY, float endX, float endY,Paint);

示意图：

4.2.画线：

1：1个焦点如果就存在一个焦点时：   a>起点：该点圆心   b>终点：TouchPointer2：2 —> 9个焦点若存在多个焦点时：    a>焦点列表内每新增一个焦点时，第一时间在上一个点和当前最新焦点之间做一条直线。DrawLine。    b>起点：焦点列表内最新的点为起点（表最后边元素）。    c>终点：TouchPointer。

5.密码校验

6.唤起的时机（本例重点）：

其实也不难，就是一个activity生命周期的使用：

示意图：