开源控件NumberCircleProgressBar(圆形进度条)存在两条线的解决方法

来源：互联网发布：非负矩阵分解 matlab 编辑：程序博客网时间：2024/05/21 10:05

NumberCircleProgressBar是网上流传较广的一个Android圆形进度条控件，但是今天使用的过程中发现这个控件存在一个小问题，就是当你使用Rising_Water这个模式的时候，会出现两条细细的线条，影响美观。
这个问题出现的原因是由它的实现方式导致的，这里引用一下原作者对于实现方式的描述

随后需要求出对应的圆心角度，来计算出需要画的三角形的点的坐标，但是对于这个方程的求解难度略大，所以作者在这里采用了模拟求解的方式来解决，原文如下
这里写图片描述
随后根据输入的步长来选择对应的角度来计算出三角形的各个点的坐标。
问题就出在这里，由于求出的角度值是近似值，所以计算出的三角形并不能完美的将扇形的上部分遮住，于是就出现了三角形的两条边附近出现两条细细的线，这两条线就是没能被覆盖住的部分。那么解决的办法来了，很简单，既然绘制三角形无法将其覆盖住，那么我们就讲绘制的范围扩大，比如，我们改成绘制矩形。做法也很简单，将onDraw（）方法里面的代码改成如下形式，仅仅在注释的部分做了修改，其余不变。

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mCirclePaint.setStyle(Paint.Style.FILL);        mSectorPaint.setStyle(Paint.Style.FILL);        // draw the circle        canvas.drawCircle(centerX, centerY, mCircleRadius, mCirclePaint);        if (mDrawReachedBar) {            int percent = getProgress() * 100 / getMax();            float startAngle;            /**             * when mFillMode = rising_water,need draw triangle             */            Path path = new Path();            if (percent < 50) {                startAngle = (float) (90 - PERCENT_TO_ANGLE[percent]);                canvas.drawArc(mCircleRectF, startAngle,                        (float) (PERCENT_TO_ANGLE[percent] * 2), true,                        mSectorPaint);                float rSin = (float) (mCircleRadius * Math                        .sin(PERCENT_TO_ARC[percent]));                float rCos = (float) (mCircleRadius * Math                        .cos(PERCENT_TO_ARC[percent]));                //在这里将绘制三角形改成绘制矩形，多加两个点进去就行了                path.moveTo(centerX, centerY);// triangle start                path.lineTo(centerX + rSin, centerY);                path.lineTo(centerX + rSin, centerY + rCos);                path.lineTo(centerX - rSin, centerY + rCos);                path.lineTo(centerX - rSin, centerY);                path.lineTo(centerX, centerY);                path.close(); // siege of triangle                canvas.drawPath(path, mCirclePaint);                mCirclePaint.setStyle(Paint.Style.STROKE);                mCirclePaint.setStrokeWidth(1.0f);                canvas.drawPath(path, mCirclePaint);            } else {                startAngle = (float) (450 - PERCENT_TO_ANGLE[percent]);                canvas.drawArc(mCircleRectF, startAngle,                        (float) (PERCENT_TO_ANGLE[percent] * 2), true,                        mSectorPaint);                float rSin = (float) (mCircleRadius * Math                        .sin(PERCENT_TO_ARC[percent]));                float rCos = (float) (mCircleRadius * Math                        .cos(PERCENT_TO_ARC[percent]));                //同上，在这里将绘制三角形改成绘制矩形，多加两个点进去就行了                path.moveTo(centerX, centerY);// triangle start                path.lineTo(centerX + rSin, centerY);                path.lineTo(centerX + rSin, centerY + rCos);                path.lineTo(centerX - rSin, centerY + rCos);                path.lineTo(centerX - rSin, centerY);                path.lineTo(centerX, centerY);                path.close(); // siege of triangle                canvas.drawPath(path, mSectorPaint);                mSectorPaint.setStyle(Paint.Style.STROKE);                mSectorPaint.setStrokeWidth(1.0f);                canvas.drawPath(path, mSectorPaint);            }        }

搞定后运行一下，问题解决。如果有人有更好的解决方式，欢迎分享。

1 0