Skip to content

Only describe personal learning experience, and strive to more concise, more convenient, more advanced!

Notifications You must be signed in to change notification settings

flyingfishes/ProgressCircleView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

水波纹进度条[自定义控件类][ProgressCircleView.java]

####使用方法,类的头部有说明 ####这里我们来讲一下关键代码,对于这个控件,难就难在如何绘制水波纹这一点上,当然如果你有接触过贝塞尔曲线,相信这一点点难度立马就被你克服了。 这里我贴一下我们需要的贝塞尔曲线是怎么绘制的:
quad
使用方法,二阶贝塞尔曲线绘制:path.rQuadTo(dx1, dy1, dx2, dy2);参数对应P1和P2的坐标。

  • 为了方便各位更好的理解,我这里分别从左边和右边绘制了水波纹曲线的效果,不过视觉上似乎没多大区别
    /**
     * @param direction 0从左至右,1从右至左(绘制)
     */
    private void drawQuad(int direction) {
        //绘制进度波纹
        path.reset();
        //计算画笔所在的Y坐标值,直径 - 进度移动距离
        float py = (1 - (float) currentProgress / maxProgress) * 2 * radius;
        switch (direction) {
            case 0:
                //x轴不变,向Y轴方向移动画笔(这里为向上)
                path.moveTo(0, py);
                //默认水波纹半径
                float pRadius = 2f * radius / progressDensity;//progressDensity为水波纹的密度
                //水波纹当前半径
                float cRadius = (1 - (float) currentProgress / maxProgress) * pRadius;
                for (int i = 0; i < progressDensity; i++) {
                    //这里是在一条直线上绘制的是上下循环的贝塞尔曲线
                    //下曲线,这里可以去掉,但不去掉会更美观
                    path.rQuadTo(pRadius, cRadius, 2 * pRadius, 0);//绘制贝塞尔曲线,每次绘制相对上一条的位置开始
                    //上曲线
                    path.rQuadTo(pRadius, -cRadius, 2 * pRadius, 0);
                }
                path.lineTo(width, py);
                path.lineTo(width, heigth);
                path.lineTo(0, heigth);
                break;
            case 1:
                //x轴不变,向Y轴方向移动画笔(这里为向上)
                path.moveTo(width, py);
                //默认水波纹半径
                float pRadius1 = 2f * radius / progressDensity;//progressDensity为水波纹的密度
                //水波纹当前半径
                float cRadius1 = (1 - (float) currentProgress / maxProgress) * pRadius1;
                for (int i = 0; i < progressDensity; i++) {
                    //这里是在一条直线上绘制的是上下循环的贝塞尔曲线
                    //下曲线,这里可以去掉,但不去掉会更美观
                    path.rQuadTo(-pRadius1, cRadius1, -2 * pRadius1, 0);//绘制贝塞尔曲线,每次绘制相对上一条的位置开始
                    //上曲线
                    path.rQuadTo(-pRadius1, -cRadius1, -2 * pRadius1, 0);
                }
                path.lineTo(0, heigth);
                path.lineTo(width, heigth);
                path.lineTo(width, py);
                break;
            default:
                break;
        }
        path.close();
        bitmapCanvas.drawPath(path, progressPaint);
    }

###接下来就到了一言不合就贴图的时候了:

image [ProgressCircleView.java]: https://github.com/flyingfishes/ProgressCircleView/edit/master/

About

Only describe personal learning experience, and strive to more concise, more convenient, more advanced!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages