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

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值