Android Canvas. Moving and Rotating Bitmap along Circular Path based on Touch?

Question

Is it Possible to move and rotate an Image along a Circular Path based on a touch event as follows:

I have looked at this question: Moving an Image in circular motion based on touch events in android But it only tells me how to move the image along a circle, not rotate it.

Answer 1

Update: Full example posted on GitHub at https://github.com/jselbie/xkcdclock

Every time you get a touch event, grab the touch point's x,y coordinates and compute the angle of the rotation relative to the center of bitmap. Use that value to determine how much to rotate the bitmap you want draw.

First, let's assume a logical coordinate system in which the center point of your element above is at (0,0) in x,y space.

Therefore, the angle (in degrees) between any touch point relative to the center can be computed as follows:

double ComputeAngle(float x, float y)
{
    final double RADS_TO_DEGREES = 360 / (java.lang.Math.PI*2);
    double result = java.lang.Math.atan2(y,x) * RADS_TO_DEGREES;

    if (result < 0)
    {
        result = 360 + result;
    }

    return result;
}

Note - the normalization of negative angles to positive angles. So if the touch point is (20,20), this function above will return 45 degrees.

To make use of this method, your Activity will need the following member variables defined:

float _refX;   // x coordinate of last touch event
float _refY;   // y coordinate or last touch event
float _rotation;  // what angle should the source image be rotated at
float _centerX;         // the actual center coordinate of the canvas we are drawing on
float _centerY;         // the actual center coordinate of the canvas we are drawing on

Now let's examine how to keep track of touch coordinates to we can always have an up to date "_rotation" variable.

So our "touch handler" for Android will look something like this:

boolean onTouch(View v, MotionEvent event)
{
    int action = event.getAction();
    int actionmasked = event.getActionMasked();

    if (!_initialized)
    {
        // if we haven't computed _centerX and _centerY yet, just bail
        return false;
    }

    if (actionmasked == MotionEvent.ACTION_DOWN)
    {
        _refX = event.getX();
        _refY = event.getY();
        return true;
    }
    else if (actionmasked == MotionEvent.ACTION_MOVE)
    {

        // normalize our touch event's X and Y coordinates to be relative to the center coordinate
        float x = event.getX() - _centerX;
        float y =  _centerY - event.getY();

        if ((x != 0) && (y != 0))
        {
            double angleB = ComputeAngle(x, y);

            x = _refX - _centerX;
            y = _centerY - _refY;
            double angleA = ComputeAngle(x,y);

            _rotation += (float)(angleA - angleB);

            this.invalidate();  // tell the view to redraw itself
        }
    }    

There's some fine details left out such as drawing the actual bitmap. You might also want to handle the ACTION_UP and ACTION_CANCEL events to normalize _rotation to always be between 0 and 360. But the main point is that the above code is a framework for computing the _rotation at which your Bitmap should be drawn on the View. Something like the following:

void DrawBitmapInCenter(Bitmap bmp, float scale, float rotation, Canvas canvas)
{
    canvas.save();
    canvas.translate(canvas.getWidth()/2, canvas.getHeight()/2);
    canvas.scale(scale, scale);
    canvas.rotate(rotation);
    canvas.translate(-bmp.getWidth()/2, -bmp.getHeight()/2);
    canvas.drawBitmap(bmp, 0, 0, _paint);
    canvas.restore();
}