Search code examples
androidbitmaptouchrotationmotion

Android, help rotating image on touch


I am trying to rotate one of the transparent PNGs on this image. The number part is what I want to rotate. I am able to do this, but it is not what I am trying to achieve

I want to rotate the numbers like on a real combination lock. So the user will touch and move their finger in a circle. I looked at less precise image rotation on touch/move events, and they were not sufficient.

this is currently my code

 public boolean onTouch(View v, MotionEvent event) {
    double r=Math.atan2(event.getX()-lockNumbers.getWidth(), lockNumbers.getHeight()-event.getY());
    int rotation=(int)Math.toDegrees(r);
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            break;
        case MotionEvent.ACTION_MOVE:
            x=event.getX();
            y=event.getY();
            updateRotation(rotation);
            break;
        case MotionEvent.ACTION_UP:
            break;
    }//switch       

    return true;

}//onTouch
private void updateRotation(double rot){
    float newRot=new Float(rot);
    Bitmap bitmap=BitmapFactory.decodeResource(getResources(),R.drawable.numbers);
    Matrix matrix=new Matrix();
    matrix.postRotate(newRot,bitmap.getWidth(),bitmap.getHeight());
    if(y>250){
        Bitmap reDrawnBitmap=Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
        lockNumbers.setImageBitmap(reDrawnBitmap);
    }
    else{
        Bitmap reDrawnBitmap=Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
        lockNumbers.setImageBitmap(reDrawnBitmap);
    }
}

it also resizes the bitmap when you touch it because of the matrix parameter. This is not the desired effect.

The user will pretty much be required to go in a circle with their finger.


Solution

  • Write below code into your touch event.

    switch (event.getAction()) {    
        case MotionEvent.ACTION_DOWN:
            // reset the touched quadrants
            for (int i = 0; i < quadrantTouched.length; i++) {
                quadrantTouched[i] = false;
            }
            allowRotating = false;
            startAngle = getAngle(event.getX(), event.getY());
            break;
        case MotionEvent.ACTION_MOVE:
            double currentAngle = getAngle(event.getX(), event.getY());
            rotateDialer((float) (startAngle - currentAngle));
            startAngle = currentAngle;
            break;
        case MotionEvent.ACTION_UP:
            allowRotating = true;
            break;
    }
    
    // set the touched quadrant to true
    quadrantTouched[getQuadrant(event.getX() - (dialerWidth / 2), dialerHeight - event.getY() - (dialerHeight / 2))] = true;
    detector.onTouchEvent(event);
    return true;
    

    And use below link for more reference.

    Rotate Dialer Example