Question

I’m trying to rotate a drawable inside a view by touching it and moving the finger. I’ve come up with several solutions, but none of them feels natural on the device.

Here’s my first approach: Depending on where the user touched the screen and in which direction the finger was moved, I’m changing the drawable’s rotation, calculated more or less arbitrarily.

private void updateRotation(float x, float y, float oldX, float oldY) {
    int width = getWidth();
    int height = getHeight();

    float centerX = width / 2;
    float centerY = height / 2;

    float xSpeed = rotationSpeed(x, oldX, width);
    float ySpeed = rotationSpeed(y, oldY, height); 

    if ((y < centerY && x > oldX)
        || (y > centerY && x < oldX))
        rotation += xSpeed;
    else if ((y < centerY && x < oldX)
             || (y > centerY && x > oldX))
        rotation -= xSpeed;

    if ((x > centerX && y > oldY)
        || (x < centerX && y < oldY))
        rotation += ySpeed;
    else if ((x > centerX && y < oldY)
             || (x < centerX && y > oldY))
        rotation -= ySpeed;
}

private static float rotationSpeed(float pos, float oldPos, float max) {
    return (Math.abs(pos - oldPos) * 180) / max;
}

This approach had a few annoying side effects: Sometimes the drawable would rotate while the finger wasn’t moving and the rotation was generally not as fast as the user’s finger.

Hence I threw this code away and started with my second approach. I’m using trigonometry to calculate the actual rotation that would be equivalent to the finger movement:

private void updateRotation(float x, float y, float oldX, float oldY) {
    float centerX = getWidth() / 2;
    float centerY = getHeight() / 2;

    float a = distance(centerX, centerY, x, y);
    float b = distance(centerX, centerY, oldX, oldY);
    float c = distance(x, y, oldX, oldY);

    double r = Math.acos((Math.pow(a, 2) + Math.pow(b, 2) - Math.pow(c, 2))
                         / (2 * a * b));

    if ((oldY < centerY && x < oldX)
        || (oldY > centerY && x > oldX)
        || (oldX > centerX && y < oldY)
        || (oldX < centerX && y > oldY))
        r *= -1; 

    rotation += (int) Math.toDegrees(r);
}

private float distance(float x1, float y1, float x2, float y2) {
    return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}

Although this does sound like the correct solution to me, it’s not working well either. Finger movement is sometimes ignored – could the calculation be too expensive? Furthermore, the rotation is still a bit faster than the actual finger movement.

Ideally, if I start rotating the drawable touching a specific point, this very point should stay below the finger at all times. Can you tell me how to achieve this?

Edit:

Here’s my adoption of Snailer’s suggestion. I had to switch the arguments for the atan2 method to rotate into the right direction, now it works great:

private void updateRotation(float x, float y) {
    double r = Math.atan2(x - getWidth() / 2, getHeight() / 2 - y);
    rotation = (int) Math.toDegrees(r);
}

Answer 1

This can be done easily by getting the angle created by your finger and the center of the screen. Similar to what you have above in the second example. In your onTouchEvent send the getX()/getY() to this method:

    private double getDegreesFromTouchEvent(float x, float y){
        double delta_x = x - (Screen Width) /2;
        double delta_y = (Screen Height) /2 - y;
        double radians = Math.atan2(delta_y, delta_x);

        return Math.toDegrees(radians);
    }

Then when you draw() you can just rotate the Canvas according to results. Obviously, you’ll want to use if (MotionEvent.getAction() == MotionEvent.ACTION_MOVE) to update the angle.