Circle drawing and filling arc in android

Circle drawing and filling arc in android

It is always a fun to play with mathematics, everything in this world is happening because mathematics. Mathematics is everywhere, every moment. Computers, physics, chemistry, biology every area is just standing upon Math.

Being an enthusiastic developer I always love to play with mathematics, so here is an example which draws a circle and a filling arc within the circle. Definitely you will get a the code in many web sites if you just google. But i would like to explain the math that plays an important role to achieve this.

The result should look as follow.

CircleFillingAndroid

CircleFillingAndroid

Let me divide the code in three sections.

Section 1 : Drawing a circle

How to draw a circle in android using Canvas and Paint ?

Code :

   

        int screenWidth = 420;  //Give your device screen width here 
        int horizontalCentreX = screenWidth/2;
        int circleCentrex = horizontalCentreX;
        int circleCentreY = 150;
        int radius = 130;
        int arcStartingAngle = 270;
        int minutes = 15;
        int seconds = 60;
        int minsToSecondsConverionFactor= minutes * seconds; //just to fill the circle for 15 mins
        int arcRectStartingX = circleCentrex - radius;
        int arcRectStartingY = 20;
        int arcRectEndingX = circleCentrex + radius;
        int arcRectEndingY = 280;

       //Just create a bit map of size (width = screen width, height = depends on how big circle you want
         Bitmap b = Bitmap.createBitmap(screenWidth, 300, Bitmap.Config.ARGB_8888);

        Paint paint = new Paint();
        Canvas canvas = new Canvas(b);
        paint.setColor(Color.rgb(62, 176, 220));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
  
        canvas.drawCircle(circleCentrex, circleCentreY, radius, paint);

Section 2 : Drawing an Arc

So How to draw a filling arc in android using Canvas and Paint ?

Code :

   paint.setColor(Color.rgb(250, 64, 129));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(arcRectStartingX, arcRectStartingY, arcRectEndingX, arcRectEndingY);
        canvas.drawArc(oval, arcStartingAngle, ((i * 360) / minsToSecondsConverionFactor), false, paint);

Section 3 : Drawing a Point at the end of the filling arc

Here is the trick, to calculate the end point in the filling arc, we need to apply Trigonometry. Let me explain this in steps.

Observe the figure given below,

circle

circle

The figure shows Circle drawn at the centre point(CenterX,CenterY) . We have have an arc which will be continuously drawn and the arc fills the circle in the direction as shown in the figure. So our job is to find out the point(x,y) and the end of the arc.

If you observe a triangle drawn with Centre of the circle and point over the arc, it will be a right angled triangle.

So by applying trigonometry

  cos(θ) = adjacent / hypotenuse
         = adjacent / radius ( because radius == hypotenuse)
         
  adjacent = cos(θ) * radius
       x   = cos(θ) * radius ( this is because point (x,y) is nothing but point is X distance (along X-Axis) aways from Centre and Y distance away (along Y-Axis).

 sin(θ) = opposite / hypotenuse
        = opposite / radius
      y = sin(θ) * radius ( this is because point (x,y) is nothing but point is X distance (along X-Axis) aways from Centre and Y distance away (along Y-Axis).

But the values we got x and y are from the centre but the centre is centreX distance aways from the left side of the screen and centreY distance away from the top side of the screen.

Hence point x on the arc must be = centreX + x distance aways from Left side of the screen
                                 = centreX + cos(θ) * radius

Hence point y on the arc must be = centreY + y distance aways from Left side of the screen
                                 = centreY + sin(θ) * radius


If you debug and observe the y value we get will increase initially and start decreasing, this depends upon the angle, angle less than or equal to 90deg will be give +ve value for cos(θ) and angle greater than 90deg will give -ve value.

Hence the above calculation always gives you end point of the filling arc along the circumference of the circle.