I can not draw a round edge at the progress bar

1.8k views Asked by At

I create custom progress in my programm. enter image description here

But i can't create Semi Circle parts. I want create parts similar progress which is selected in the pictire on the top box.

My code:

public class SemiCircleProgressBarView extends View {

    private Path mClippingPath;
    private float mPivotX;
    private float mPivotY;
    private Context context;

    private float progress = 0.0f;
    private float thickness;

    public SemiCircleProgressBarView(Context context) {
        super(context);
        this.context = context;
        initializeImage();
    }

    public SemiCircleProgressBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initializeImage();
    }

    private void initializeImage() {
        mClippingPath = new Path();
        mPivotX = 0;
        mPivotY = 0;
    }

    public void setClipping(float progress) {
        this.progress = progress;
        mClippingPath.reset();
        thickness = 0.25f * getHeight();
        mClippingPath.setFillType(Path.FillType.INVERSE_WINDING);
        mClippingPath.addCircle(0.5f * getWidth(), getHeight(), getHeight() - thickness, Path.Direction.CCW);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float angle = (progress * 180) / 100;

        RectF oval = new RectF(mPivotX, mPivotY, mPivotX + getWidth(), mPivotY + 2.0f * getHeight());

        Paint p = new Paint();
        p.setColor(context.getResources().getColor(R.color.progress));

        Paint pbg = new Paint();
        pbg.setColor(context.getResources().getColor(R.color.progress_bg));

//        Paint cr = new Paint();
//        cr.setColor(Color.RED);

        canvas.clipPath(mClippingPath);
        canvas.drawArc(oval, 180, 360, true, pbg);
        canvas.drawArc(oval, 180, angle, true, p);
//        canvas.drawCircle(0.5f * thickness,getHeight(),30,cr);

        double radAngle = Math.toRadians(angle);
        float px = getWidth () - (float)Math.cos(radAngle) * ((float)getWidth() -  thickness);
        float py = getHeight() - (float)Math.sin(radAngle) * ((float)getHeight() - 0.5f * thickness);

        canvas.drawCircle(0.5f * px, py, 0.5f * thickness, p);
    }
}

part in the bottoms select rectangles will be simular progress on the top select rectangles

0

There are 0 answers