Zoom & Drag an Image in android

Question

I need to drag and zoom an image. Here is my code ...

//instance variables

Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();

static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;

PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;

//OnTouchListener for imageview

OnTouchListener touchAction = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView i = (ImageView)v;

        dragAndZoom(i, event);
        return true; 

    }
};

//performing drag&zoom operations

private void dragAndZoom(View v, MotionEvent event) 
{
    ImageView view = (ImageView) v;
    view.setScaleType(ImageView.ScaleType.MATRIX);
    float scale;

    // Handle touch events here...

    switch (event.getAction() & MotionEvent.ACTION_MASK) 
    {
    case MotionEvent.ACTION_DOWN:  

        // first finger down only
        savedMatrix.set(matrix);
        start.set(event.getX(), event.getY());


         mode = DRAG;
        break;

    case MotionEvent.ACTION_UP: // first finger lifted

    case MotionEvent.ACTION_POINTER_UP: // second finger lifted

        mode = NONE;   

        break;

    case MotionEvent.ACTION_POINTER_DOWN: // first and second finger down

        oldDist = spacing(event);

        if (oldDist > 5f)
        {
            savedMatrix.set(matrix);
            midPoint(mid, event);
            mode = ZOOM;

        }
        break;

    case MotionEvent.ACTION_MOVE:

        if (mode == DRAG) 
        { 
            matrix.set(savedMatrix);

            matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);                

        } 
        else if (mode == ZOOM) 
        { 
            // pinch zooming
            float newDist = spacing(event);

            if (newDist > 5f) 
            {
                matrix.set(savedMatrix);
                scale = newDist / oldDist; 
                matrix.postScale(scale, scale, mid.x, mid.y);
            }
        }
        break;  
    }

    view.setImageMatrix(matrix); // display the transformation on screen


}

  private float spacing(MotionEvent event) 
{
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);
}



private void midPoint(PointF point, MotionEvent event) 
{
    float x = event.getX(0) + event.getX(1);
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
}

It works okay. but sometimes the image is going out of screen boundaries on touch of it. How can i keep the image in UI all the times? Please help me. Thanks in advance.

Answer 1

private void limitDrag(Matrix m, ImageView view) {


    float[] values = new float[9];
    m.getValues(values);
    float transX = values[Matrix.MTRANS_X];
    float transY = values[Matrix.MTRANS_Y];
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];

    Rect bounds = view.getDrawable().getBounds();
    int viewWidth = getResources().getDisplayMetrics().widthPixels;
    int viewHeight = getResources().getDisplayMetrics().heightPixels;



    if(viewHeight<=480)
    {

        _y_up=0;
    }
    if(viewHeight>480&&viewHeight<980)
    {

        _y_up=140;
    }


    int width = bounds.right - bounds.left;
    int height = bounds.bottom - bounds.top;
    int __width=width;
    int __height=height;
    width = viewWidth / 2;
    height = viewHeight / 2;


    //height = 200 ;
    float minX = (-width) ;//* scaleX;
    float minY = (-height) ;//* scaleY;



    if ((transX) > (viewWidth)) {

        //_x_left

        transX = viewWidth;
    } else if (transX < minX) {


        transX = minX;
    }


    if ((-transX) > (viewWidth)) {
             // _x_right
        transX = -(viewWidth);
    } else if (-transX < minX) {

        transX = -(minX+30);
    }



    if ((transY) > (viewHeight)) {
    //  _y_up
        transY =( viewHeight);


    } else if (transY < minY) {

        transY = (minY+_y_up);
    }

    if ((-transY) > (viewHeight)) {
    //  _y_down
        transY = -(viewHeight);

    } else if (-transY < minY) {

        transY = -(minY+170);
    }

    values[Matrix.MTRANS_X] = transX;
    values[Matrix.MTRANS_Y] = transY;
    m.setValues(values);
}

Call this function limitDrag(matrix,view) just above your view.setImageMatrix(matrix) to restrict the movement inside the screen Note:- IM doing some ugly hardcoded calculation inside it. you can change it according to your need.Just run this and check, remember its not the best solution still something is better than nothing.Happy coding!