1

I am working on scan Document program where i have already developed a program which scan document with image processing and give option to crop image same like CanScanner.

Now I want touch image zoom preview just like cam scanner gives option. How will i achieve this feature. Please find attached image for reference (same feature i want to develope)

Please help to achieve this feature.

Thanks in advance Reference image for feature

Alok Soni
  • 55
  • 1
  • 8

2 Answers2

2

You can create and use a BitmapShader (using the bitmap of the image you're drawing), a Matrix and a Paint.

mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
mShader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP);

mPaint = new Paint();
mPaint.setShader(mShader);

Then setup a gesture motion event to record the touch position. We will set up the shader's matrix base on this position in the next step. 

@Override
public boolean onTouch(View view, MotionEvent event) {
    int action = event.getAction(); 

    zoomPos.x = event.getX();
    zoomPos.y = event.getY();

    switch (action) { 
    case MotionEvent.ACTION_DOWN:
    case MotionEvent.ACTION_MOVE:
        zooming = true;
        this.invalidate();
        break; 
    case MotionEvent.ACTION_UP:   
    case MotionEvent.ACTION_CANCEL:
        zooming = false;
        this.invalidate();
        break; 

    default: 
        break; 
    }

    return true; 
}

Then in the drawing code, use postScale() to scale and translate the matrix base on coordinate of the crop region. Then draw a circle to display the magnifier using the shader Paint.

@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    if (zooming) {
        matrix.reset();
        matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
        mPaint.getShader().setLocalMatrix(matrix);

        canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
    }
}

See: Android - How to circular zoom/magnify part of image? and Magnifying part of the canvas when touched

nhoxbypass
  • 9,695
  • 11
  • 48
  • 71
  • Hi nhoxbypass, I have created a magnifier zoom preview, but some how it does not show zoom preview of exact point, some pixel discrepancy is there. – Alok Soni Apr 04 '18 at 07:53
  • @AlokSoni you should ask new question because it will attract more people, remember to capture device screen and put the code that you used there. – nhoxbypass Apr 04 '18 at 08:06
0

To zoom the image you're drawing on the canvas:

Create a BitmapShader (using the bitmap of the image you're drawing), a Matrix and a Paint:

shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
matrix = new Matrix();
shaderPaint = new Paint();
shaderPaint.setShader(shader);

On a touch event record the touch position (e.g. in a PointF):

zoomPos.x = event.getX();
zoomPos.y = event.getY();

...and set up the shader's matrix (I do this on each touch, there's probably a better way):

matrix.reset();
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
shader.setLocalMatrix(matrix);

Then in the drawing code, draw a circle using the shader Paint.

canvas.drawCircle(zoomPos.x, zoomPos.y, size_of_the_circle, shaderPaint);

Hope it helps! Happy coding!

Thomas
  • 5
  • 5