How to create a resizable circle with user touch events?

Question

I am trying to create a circle shape that will be resized on onTouchEvent.

I have followed resizable rectangle post, but I think due to lack of mathematics knowledge, I am not getting how to create resizeable circle.

I have tried changing

canvas.drawRect(
    left + colorballs.get(0).getWidthOfBall() / 2,
    top + colorballs.get(0).getWidthOfBall() / 2, 
    right + colorballs.get(2).getWidthOfBall() / 2, 
    bottom + colorballs.get(2).getWidthOfBall() / 2, paint);

to canvas.drawCircle(); it creates the circle but not quite what I wanted.

Can you please tell me is there any thing like this already implemented or what points should I follow to convert this rectangle example to resizable circle.

I have done it for GoogleMap, and used SeekBar to resize the Circle, if you want I can share my solution. — Salman Khan, Apr 14 '14 at 10:05

score 5 · Accepted Answer · answered Apr 14 '14 at 10:27

So, the center of circle will be:

float cx = (left + right) / 2f; 
float cy = (top + bottom) / 2f;

-- quite obvious. Radius can be calculated using Math.hypot():

float radius = Math.hypot(top - bottom, right - left) / 2f;

Thus, we have center and radius to draw a circle:

drawCircle(cx, cy, radius, paint);

How to create a resizable circle with user touch events?

1 Answers1