Android 自定义View 之 Path PathMeasure (二)

近期新项目规定做一个时间轴，头顶部有一个龟头小圆，以下：

取得图第一时间便是对全部照片开展技术性分拆，由内到外可分成五个一部分：

1.绘图实心圆

Paint pain=new Paint;
pain.setStyle(Paint.Style.FILL);
addCircle(float x, float y, float radius, @NonNull Direction dir)

2.绘图二阶贝塞尔曲线

quadTo(float x1, float y1, float x2, float y2)

3.依据4的运动轨迹根据PathMeasure 提取 精彩片段

getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

4.绘图中空圆

Paint pain=new Paint;
pain.setStyle(Paint.Style.STROKE);
addCircle(float x, float y, float radius, @NonNull Direction dir)

5.一个外侧中空圆包囊一个内孔实心圆

pathMeasure.getPosTan

1和2一部分下一篇blog再加上，由于涉及到贝塞尔曲线
好啦， 看来看3-5关键编码。

    private void initView(Context context, AttributeSet attrs) {
        //内孔画笔工具
        insidePaint = new Paint();
        insidePaint.setAntiAlias(true);//去锯齿状
        insidePaint.setStyle(Paint.Style.STROKE);
        insidePaint.setStrokeWidth(insideStrokeWidth);
        insidePaint.setColor(Color.WHITE);


        //外侧画笔工具
        outsidePaint = new Paint();
        outsidePaint.setAntiAlias(true);//去锯齿状
        outsidePaint.setStyle(Paint.Style.STROKE);
        outsidePaint.setStrokeWidth(outSideStrokeWidth);
        outsidePaint.setColor(Color.WHITE);


        //小阴茎龟头中空圆形画笔工具
        smallPaint = new Paint();
        smallPaint.setAntiAlias(true);
        smallPaint.setStyle(Paint.Style.STROKE);
        smallPaint.setStrokeWidth(smallStrokeWidth);
        smallPaint.setColor(Color.WHITE);

        //小阴茎龟头内孔实体线圆形画笔工具
        smallInsidePaint = new Paint();
        smallInsidePaint.setAntiAlias(false);
        smallInsidePaint.setStyle(Paint.Style.FILL);
        smallInsidePaint.setColor(getResources().getColor(R.color.color_5FBBEB));
    }

大概是复位了4个画笔工具，从上向下各自承担：4-3-5

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        outSidePath = new Path();
        insidePath = new Path();

        insidePath.addCircle((w) / 2f + insideStrokeWidth
                , (h) / 2f + insideStrokeWidth
                , (h) / 2f - 2 * insideStrokeWidth - outSideStrokeWidth
                , Path.Direction.CW);


        pathMeasure.setPath(insidePath, true);
    }

在 sizeChanged环节 复位 外侧 内孔 的途径Path,而且复位内孔半经主要参数

关键一部分

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        outSidePath.reset();
        float length = pathMeasure.getLength();
        canvas.drawPath(insidePath, insidePaint);
        float startD = 0;
        float stopD = (Math.abs(progress)) / 100f * length;
        pathMeasure.getSegment(startD, stopD, outSidePath, true);

        if (progress != 1) {
            canvas.drawPath(outSidePath, outsidePaint);
        }

        pathMeasure.getPosTan(stopD + 2 + outSideStrokeWidth, pos, tan);

        Log.d(TAG, "THE POS IS:" + pos[0] + "tan:" + tan[0] + "...stopD:" + stopD);
        if (progress != 100 && progress != 1) {
            //绘图阴茎龟头外侧
            canvas.drawCircle(pos[0], pos[1], outSideRadius, smallPaint);
            //绘图阴茎龟头外侧
            canvas.drawCircle(pos[0], pos[1], (outSideRadius - smallStrokeWidth / 2), smallInsidePaint);
        }
    }

绘图环节绝大多数全是测算：有提取精彩片段的逐渐startD 、stopD和 求曲线图途径当今正切值平面坐标getPosTan
根据外界传进去的Progress 进展操纵 提取长短，从而做到相近progress 一直在动的实际效果。
最终获得基本实际效果以下：

ps:下边灰黑色的动画特效为：Android 自定View 之 Path PathMeasure (一)

一开始写文章赚钱，文件格式并不是非常好，将就一下一下吧，有必须的能够私聊 ~