Warp Image area on touch of a point area?

Question

I need a basic idea for how can i warp image on touch of a particular area. Image filters apply warp on whole image but i want to warp single point, like if i want to warp eye of a person then i will touch on that point. So I need a basic idea about this work.

I have tried this one but its also applies filters on whole image. https://github.com/Jtfinlay/PhotoWarp

App: https://play.google.com/store/apps/details?id=hu.tonuzaba.android&hl=en

refer this : https://stackoverflow.com/questions/9237924/how-to-warp-images-in-android — jigar savaliya, Jul 28 '17 at 04:36
refer this : [how to warp image](https://stackoverflow.com/questions/9237924/how-to-warp-images-in-android) — jigar savaliya, Jul 28 '17 at 04:38
done with that not works up to my exceptions, saving states of warp is handy in it. — Joy Hard, Jul 28 '17 at 04:57

score 7 · Accepted Answer · answered Jul 19 '17 at 08:46

A warp is not just at a "single point" but over some area that you deform in a smooth way.

To achieve this, you need a geometric transform of the coordinates that works in some neighborhood of the touched point. One way to do this is by applying a square grid on the image and moving the grid nodes around the touched points with some law of yours (for instance, apply a displacement vector to all nodes, with a decaying factor such that far away nodes don't move).

Then you need a resampling function that computes the new coordinates of every pixel and copies the color of the source pixel.

For good results, you must actually work in reverse: scan the destination image and for every pixel retrieve the source coordinates and source pixels. Apply bilinear or bicubic resampling to avoid aliasing.

For ease of implementation, the gridding idea should be adapted as well: rather than deforming the destination grid, keep it unchanged and apply the inverse deformation to the source grid.

Last thing: in the grid approach, see the displacements of the grid nodes as two scalar functions DX(i, j) and DY(i, j) that you can handle separately. From the knowledge of the displacements at the nodes, you can estimate the displacement of any pixel by interpolation (bicubic would be appropriate here).

Uma Achanta · Answer 2 · 2017-07-28T06:07:44.147

4

you can use canvas to detect that portion and stop action on that portion in ontouchlistener

code sample

Bitmap pricetagBmp = BitmapFactory.decodeResource(getActivity().getResources(), R.drawable.ic_tag_circle_24dp);
           // canvas.drawBitmap(pricetagBmp,left + (right - left) / 2, top + (bottom - top) / 2 - (bounds.height() / 2),circlePaint);
            float imageStartX = (left + ((right-left)/2)) - (pricetagBmp.getWidth()/2);
            float  imageStartY = (top + ((bottom - top) / 2)) - (pricetagBmp.getHeight()/2);
            canvas.drawBitmap(pricetagBmp, imageStartX,  imageStartY,circlePaint);

and in ontouchlistener if that points detected you can perform no action

Note: you can replace drawBitmap with drawRect or something else with invisible color

edited Jul 28 '17 at 06:07

answered Jul 26 '17 at 05:46

Uma Achanta

3,669
4
22
49

1

that is putting drawable on canvas but i want to perform some distort effect on area of touch that will modify base image instead of putting drawable but thanks for your answer – Joy Hard Jul 26 '17 at 11:04
1

@joy Hard - I've added the note. you can change it as per your requirement – Uma Achanta Jul 28 '17 at 06:09

Warp Image area on touch of a point area?

2 Answers2