Bitmap scaling while keeping centered - c

Question

I'm developing an image viewer on embedded system(stm32f4) with multi-touch support. To put into perspective image viewer should have similar functionality like something you find on your smartphone.
I have completed the image scaling and pinch/zoom gesture recognition part. But it only scales from the source image origin coordinates. So if my origin(x,y[0, 0]) is top left then it will scale following that point. And if I want to look something up in bottom right corner I have to use pinch gesture and the move to location I want which is undesirable.Here's how it looks
http://i.imgur.com/IWR4wls.gifv
. It should follow center of 2 fingers.
How can I achieve scaling while following center of 2 fingers? My attempts to do it resulted in working but jumpy, shaky version basically unusable.
My scaling works by having source image always opened(in ram) taking source image [x,y] coordinates and rect i want to zoom [w,h] scaling that rect to display [w,h] and displaying it. Moving(pan gesture) is done by moving zoomRect [x,y] coordinates in source image. That means every time I move finger I have to move zoomedRect (increase [x,y]) scale that zoomedRect and display it. So fully scaled image is not being stored because of limited ram.
Source image width,height[640, 480]:
+-------------------------------+
| zoomedRect |
| +--------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------+ |
| |
| |
| |
+-------------------------------+
I take zoomedRect i.e. x,y[50, 50] width,height[160, 120]
and scale it to display size w,h[640x480]
Display:
+-------------------------------+
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-------------------------------+
Here's what I have/can calculate:
Center of 2 fingers.
Translate center of 2 fingers to source image(even when zoomed in).
Scale in fraction(1.32, 1.45...) and (source image width|height)/(zoomedRect width|height).
Edit:
I have tried to calculate center point when 2 fingers touched and then use that center for future calculations and that's the reason why all the jumping and shaking happen. But maybe there is an error on my side so I'll add some relevant code.
As I mentioned earlier I change zoomRect width, height to scale image
newWidth = tempWidth / scale;
newHeight = tempHeight / scale;
So after zooming I need to also move near center and I do that by calculating how much scale changed
(lastWidth - newWidth)
newSourceX = newSourceX + ((int16_t)lastWidth - newWidth);
newSourceY = newSourceY + ((int16_t)lastHeight - newHeight);
Now we need to stop at calculated center between the 2 fingers and not get out of bounds [0, 0]:
#define LIMIT(value, min, max) (value < min ? min : (value > max ? max : value))
newSourceX = LIMIT(newSourceX + ((int16_t)lastWidth - newWidth), 0, centerSourceX);
newSourceY = LIMIT(newSourceY + ((int16_t)lastHeight - newHeight), 0, centerSourceY);
So far so good but it is not properly centered
Calculate center between two fingers on Display and translate to Source.
Because it's fully zoomed out(Source and Display are identical)
centers are also in identical positions.
Display/Source:
+-------------------------------+
| |
| |
| |
| |
| |
| centerPos |
| * |
| |
| |
+-------------------------------+
So if we zoom in zoomRect will be newWidth / 2 and newHeight / 2 further than needed.
Source:
+-------------------------------+
| |
| |
| |
| |
| |
| centerPos |
| *---------+
| | zoomRect|
| | |
+---------------------+---------+
To account for this I modify code as follows:
newSourceX = LIMIT(newSourceX + ((int16_t)lastWidth - newWidth), 0, centerSourceX - newWidth / 2);
newSourceY = LIMIT(newSourceY + ((int16_t)lastHeight - newHeight), 0, centerSourceY - newHeight / 2);
Success!!! Or not?
Source:
+-------------------------------+
| |
| |
| |
| zoomRect |
| +---------+ |
| |centerPos| |
| | * | |
| +---------+ |
| |
+-------------------------------+
When zooming from 1:1 it works perfectly but when I want to zoom again when
I'm zoomed in a little bit the "jump" happens because:
newSourceX + ((int16_t)lastWidth - newWidth) > centerSourceX - newWidth / 2
Result: http://i.imgur.com/x1t6X2q.gifv

Answer 1

You have source picture, and source coordinates (x,y) are transformed in screen coordinates with affine transformation. I assume that scaling is uniform. At the beginning Scale=1; dx, dy=0
ScrX = (x - dx) * Scale
ScrY = (y - dy) * Scale
So we see piece of source image that was cut from dx,dy point and extended by Scale times.
Example for dx=1,dy=1, Scale=2. Left rect is source, right one is screen.
Let we begin (b prefix) zooming in screen positions of fingers (bx0, by0) and (bx1, by1) - opposite rectangle corners. And end (or intermediate) positions (e prefix)are (ex0, ey0) and (ex1, ey1)
Let diagonals of rectangle correspond to scale degree:
eScale = bScale * Sqrt(((ex1-ex0)^2 + (ey1-ey0)^2) / ((bx1-bx0)^2 + (by1-by0)^2))
//use Math.Hypot or Vector.Length if available
So we have got new scale.
And we have beginning and ending central points
bcx = (bx0 + bx1) / 2
bcy = (by0 + by1) / 2
ecx = (ex0 + ex1) / 2
ecy = (ey0 + ey1) / 2
Both these screen points should correspond to the same source coordinate
bcx = (xx - bdx) * bScale
ecx = (xx - edx) * eScale
excluding xx we get
edx = bdx + bcx / bScale - ecx / eScale
and similar formula for edy
So we have got new shift parameters.

Answer 2

Perhaps lock the centre point of image from the 1st point you can calculate the centre of the two fingers, and then scale from this point. Rather than recompute the centre point each time. Take it as the zoom point and then movement of fingers from this point are the zoom factor, should stop the shaking effect you mentioned