如何设计半圆形进度条

How to design Semi Circular Progress bar

您好,我已经实现了一个圆形进度条并且工作正常,现在的问题是我需要设计一个半圆形进度条.

这可以通过以一定角度(通过绘制弧线)裁剪包含图像的 canvas 来实现。

然后通过画弧来裁剪该图像。

这里是你如何做到的。

//Convert the progress in range of 0 to 100 to angle in range of 0 180. Easy math.
float angle = (progress * 180) / 100;
mClippingPath.reset();
//Define a rectangle containing the image
RectF oval = new RectF(mPivotX, mPivotY, mPivotX + mBitmap.getWidth(), mPivotY + mBitmap.getHeight());
//Move the current position to center of rect
mClippingPath.moveTo(oval.centerX(), oval.centerY());
//Draw an arc from center to given angle
mClippingPath.addArc(oval, 180, angle);
//Draw a line from end of arc to center
mClippingPath.lineTo(oval.centerX(), oval.centerY());

获得路径后,您可以使用 clipPath function 将 canvas 剪切到该路径中。

canvas.clipPath(mClippingPath);

查看 Semi Circle Progress Bar 了解更多简单实用的详细信息。


请注意,如果开启了硬件加速,clipPath功能将不起作用。您只能为该视图关闭硬件加速。

//Turn off hardware accleration
  semiCircleProgressBarView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

随着进度的变化,您可以通过调用函数来设置进度条,

semiCircleProgressBarView.setClipping(progress);