Drawing a circle centered with pinch

Question

I'm trying to make a custom view that draw a circle in the center os this view (position always fixed) and I want to implement the scale of this circule use pinch gesture (I've used ScaleGestureDetector).

I managed to draw the circle in the center of the custom layout but I can not implement the functionality of scaling correctly using pinch gesture.

Please, can you give a hint please how I could do it?

Thanks in advance!!

UPDATE: this is my current code. If you test it you can see that circle moves when pinch, I want that the circle stays always at center of the view:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;

public class CoasterView extends View {
private static float MIN_ZOOM = 0;
private static float MAX_ZOOM = 5f;

private static float RADIO = 100f;


private float scaleFactor = 1.f;
private ScaleGestureDetector detector;


Paint paint;

public CoasterView(Context paramContext) {
    super(paramContext);
    detector = new ScaleGestureDetector(paramContext, new ScaleListener());

    init();
}

public CoasterView(Context paramContext, AttributeSet paramAttributeSet) {
    super(paramContext, paramAttributeSet);
    detector = new ScaleGestureDetector(getContext(), new ScaleListener());

    init();
}

public CoasterView(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
    super(paramContext, paramAttributeSet, paramInt);
    detector = new ScaleGestureDetector(getContext(), new ScaleListener());

    init();
}

private void init() {
    this.paint = new Paint();
    this.paint.setColor(-16711936);
    this.paint.setStrokeWidth(40.0F);
    this.paint.setStyle(Paint.Style.FILL);
}

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

    canvas.save();
    canvas.scale(scaleFactor, scaleFactor);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, RADIO, paint);
    canvas.restore();

}




@Override
public boolean onTouchEvent(MotionEvent event) {
    detector.onTouchEvent(event);

    invalidate();
    return true;

}

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {

        scaleFactor *= detector.getScaleFactor();
        scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
        invalidate();
        return true;
    }
}
}

Answer 1

You are scaling the full canvas, the best will be to apply the scale only to the radius of the drawn circle:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    //canvas.scale(scaleFactor, scaleFactor);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, RADIO * scaleFactor, paint);
    canvas.restore();
}

If you really want to scale the full canvas (if you are going to draw other things in the canvas like images...), you will need to recenter the circle:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.scale(scaleFactor, scaleFactor);
    canvas.drawCircle(getWidth() / 2 / scaleFactor, getHeight() / 2 / scaleFactor, RADIO, paint);
    canvas.restore();
}

Answer 2

You can use ScaleGestureDetector.getScaleFactor() to get a scale rate and calculate a new radius to the circle, and invalidate draw.