How to draw a reverse clockwise arc on Android?

Question

How to draw a reverse clockwise arc on Android using canvas? If canvas can't, is there any solution here?

Answer 1

Path.arcTo() the parameter SweepAngle refers to the rotation degree, if sweepAngle is positive the arc is clockwise, if sweepAngle is negative the arc is counterclockwise.

This code is used in my production environment, it draws a semi-circle ring, the path goes clockwise on the outer radius, and counter-clockwise on the inner radius:

drawpercent = 0.85;

radiusPathRectF = new android.graphics.RectF((float)CentreX - (float)Radius, (float)CentreY - (float)Radius,  (float)CentreX + (float)Radius, (float)CentreY + (float)Radius);
innerradiusPathRectF = new android.graphics.RectF((float)CentreX - (float)InnerRadius, (float)CentreY - (float)InnerRadius, (float)CentreX + (float)InnerRadius, (float)CentreY + (float)InnerRadius);

Path p = new Path(); //TODO put this outside your draw() function,  you should never have a "new" keyword inside a fast loop.

                degrees = (360 + (DegreesStart)) % 360;
                radians = (360 - degrees + 90) * Math.PI / 180.0;
                //radians = Math.toRadians(DegreesStart);
                int XstartOuter = (int)Math.round((Math.cos(radians) * Radius + CentreX));
                int YstartOuter = (int)Math.round((Math.sin(-radians)* Radius + CentreY));
                int XstartInner = (int)Math.round((Math.cos(radians) * InnerRadius + CentreX));
                int YstartInner = (int)Math.round((Math.sin(-radians) * InnerRadius + CentreY));

                degrees = (360 + (DegreesStart + drawpercent * DegreesRotation)) % 360;
                //radians = degrees * Math.PI / 180.0;
                radians = (360 - degrees + 90) * Math.PI / 180.0;
                //radians = Math.toRadians(DegreesStart + drawpercent * DegreesRotation);
                int XendOuter = (int)Math.round((Math.cos(radians) * Radius + CentreX));
                int YendOuter = (int)Math.round((Math.sin(-radians) * Radius + CentreY));
                int XendInner = (int)Math.round((Math.cos(radians) * InnerRadius + CentreX));
                int YendInner = (int)Math.round((Math.sin(-radians) * InnerRadius + CentreY));

                //draw a path outlining the semi-circle ring.
                p.moveTo(XstartInner, YstartInner);
                p.lineTo(XstartOuter, YstartOuter);
                p.arcTo(radiusPathRectF, (float)DegreesStart - (float)90, (float)drawpercent * (float)DegreesRotation);
                p.lineTo(XendInner, YendInner);
                p.arcTo(innerradiusPathRectF, (float)degrees - (float)90, -1 * (float)drawpercent * (float)DegreesRotation);
                p.close();

                g.clipPath(p);

                g.drawBitmap(bitmapCircularBarImage, bitmapRect0, bitmapRectXY, paint);

Answer 2

Check this code,

    public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

}

private static class AnimView extends View {
    private Paint myPaint;
    private Paint myPaint2;
    private Paint myFramePaint;
    private RectF bigOval;
    public TextView value;
    private RectF bigOval2;
    private float myStart;
    private float mySweep;
    private float SWEEP_INC = 3;
    private float SWEEP_INC2 = 5;
    // Use this flag to control the direction of the arc's movement
    private boolean addToCircle = true;

    public AnimView(Context context) {
        super(context);
        init();
    }

    public AnimView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        myPaint = new Paint();

        myPaint.setAntiAlias(true);

        myPaint.setStyle(Paint.Style.STROKE);

        myPaint.setColor(Color.GREEN);

        myPaint.setStrokeWidth(10);

        bigOval = new RectF(40, 10, 280, 250);

        myFramePaint = new Paint();
        myFramePaint.setAntiAlias(true);
        myFramePaint.setColor(Color.WHITE);
    }

    private void drawArcs(Canvas canvas, RectF oval, boolean useCenter,
            Paint paint) {
        canvas.drawRect(oval, myFramePaint);
        canvas.drawArc(oval, myStart, mySweep, false, paint);

    }

    public void setIncrement(float newIncrement) {
        SWEEP_INC = newIncrement;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawArcs(canvas, bigOval, true, myPaint);
        value = (TextView) findViewById(R.id.value);
        drawArcs(canvas, bigOval, true, myPaint);
        myStart = -90;
        // If the arc is currently getting bigger, decrease the value of
        // mySweep
        if (addToCircle) {
            mySweep -= SWEEP_INC;
        }
        // If the arc is currently getting smaller, increase the value of
        // mySweep
        else {
            mySweep += SWEEP_INC;
        }
        // If the animation has reached the end, reverse it

        invalidate();
    }
}

}