Search code examples
androiddrag-and-dropimageviewgesture

ImageView limit drag and drop and zoom out of screen


I want to limit drag and drop of imageView to not goes out of screen, i don't know how do that, specially when imageView is zoomed, how can i keep imageView in the screen when it's zoomed or not?

here is my code:

/**
 * Apply drag zoom to image
 * 
 * @param imageToEdit
 * @param mActivity
 */
          public static void setOntoucheListner(ImageView imageToEdit, Activity mActivity, final ImageView imageMask) {

    // Calcul pourcentage du min image
    float ratio1 = imageToEdit.getWidth() / imageMask.getWidth();
    float ratio2 = imageToEdit.getHeight() / imageMask.getHeight();
    if (ratio1 < 1 && ratio2 < 1)
        ZOOM_MIN = 1;
    else
        ZOOM_MIN = Math.min(ratio1, ratio2);

    Display display = mActivity.getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    screenWidth = size.x;
    screenHeight = size.y;
    matrix = new Matrix();
    savedMatrix = new Matrix();
    startPoint = new PointF();
    midPoint = new PointF();

    // imageToEdit.setImageMatrix(new Matrix());
    /** * set on touch listner on image */
    imageToEdit.setOnTouchListener(new View.OnTouchListener() {
        private float savedTranslateX = 0;
        private float savedTranslateY = 0;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ImageView view = (ImageView) v;
            System.out.println("matrix=" + savedMatrix.toString());
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                startPoint.set(event.getX(), event.getY());
                mode = DRAG;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(midPoint, event);
                    mode = ZOOM;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {

                    imageMask.getTop();
                    imageMask.getTop();
                    matrix.set(savedMatrix);
                    matrix.postTranslate(event.getX() - startPoint.x, event.getY() - startPoint.y);
                    mode = DRAG;
                } else if (mode == ZOOM) {                                                                                                                                                                                                                                                                                                                                                                                                                                                
                    float newDist = spacing(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oldDist;
                        matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                    }
                }
                break;
            }

            float[] f = new float[9];
            matrix.getValues(f);
            float scaleX = f[Matrix.MSCALE_X];
            float scaleY = f[Matrix.MSCALE_Y];
            if (mode == ZOOM) {
                if (scaleX <= ZOOM_MIN)
                    matrix.postScale((ZOOM_MIN) / scaleX, (ZOOM_MIN) / scaleY, midPoint.x, midPoint.y);
                else if (scaleX >= ZOOM_MAX)
                    matrix.postScale((ZOOM_MAX) / scaleX, (ZOOM_MAX) / scaleY, midPoint.x, midPoint.y);
                else {

                    view.setImageMatrix(matrix);
                }
            } else {
                view.setImageMatrix(matrix);
            }

            return true;
        }

        @SuppressLint("FloatMath")
        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);
        }
    });
}

}

Thank's a lot for your responses


Solution

  • I solved my problem, when user drap imageView out of bounds and release his fingers, i replace imageView on the last valid places so i complete case MotionEvent.ACTION_POINTER_UP like this: My limit here is not the screen but another ImageView,

                case MotionEvent.ACTION_POINTER_UP:
                    matrix.getValues(values);
                    translateX = values[Matrix.MTRANS_X];
                    translateY = values[Matrix.MTRANS_Y];
    
                    Log.d("####### actualWidthImageToEdit"
                            + actualWidthImageToEdit);
                    Log.d("####### translateX" + translateX);
                    Log.d("####### imageMask.getRight()" + imageMask.getRight());
                    // After User release fingers from screen we test if image
                    // is on a valid position if not we replace it in the last
                    // valid position
                    if (mode == DRAG || mode == DEZOOM) {
                        if (
                        // Limit Left, Move left to right
                        translateX > imageMask.getLeft()
                        // Limit Button, from top to buttom
                                || translateY > imageMask.getTop()
                                // left to right
                                || actualWidthImageToEdit
                                        - imageMask.getRight() + translateX < 0
                                // Limit Top, from buttom to top
                                || actualHeightImageToEdit
                                        - imageMask.getBottom() + translateY < 0
    
                        ) {
    
                            matrix = new Matrix(savedMatrix);
                            view.setImageMatrix(matrix);
                            view.invalidate();
                        }
                    }