Zooming in/out of a TImage inside a TScrollBox to a particular focus?

Question

I'm making a simple control based on a `TScrollingWinControl` (and code copied from a `TScrollBox`) with a `TImage` control. I somewhat got the zooming to work, but it doesn't necessarily zoom to a focused point - the scrollbars don't change accordingly to keep the center point in focus. I would like to be able to tell this control `ZoomTo(const X, Y, ZoomBy: Integer);` to tell it where to zoom the focus to. So when it zooms, the coordinates I passed will stay 'centered'. At the same time, I also need to have a `ZoomBy(const ZoomBy: Integer);` which tells it to keep it centered in the current view. For example, there will be one scenario where the mouse is pointed at a particular point of the image, and when holding control and scrolling the mouse up, it should zoom in focused on the mouse pointer. On the other hand, another scenario would be sliding a control to adjust the zoom level, in which case it just needs to keep the center of the current view (not necessarily center of the im…

Accepted Answer

It's not clear what would you like to refer for X, Y when passing to 'ZoomBy()'. I'll assume you've put an 'OnMouseDown' handler for the image and the coordinates refer to where you click on the image, i.e. they're not relative to scrollbox coordinates. If this is not so, you can tweak it yourself.

Let's forget about zooming for a minute, let our task be centering the point that we click on the image in the scrollbox. Easy, we know that the center of the scrollbox is at (ScrollBox.ClientWidth/2, ScrollBox.ClientHeight/2). Think horizontal, we want to scroll up to a point so that, if we add ClientWidth/2 to it, it will be our click point:

```
procedure ScrollTo(CenterX, CenterY: Integer);
begin
  ScrollBox.HorzScrollBar.Position := CenterX - Round(ScrollBox.ClientWidth / 2);
  ScrollBox.VertScrollBar.Position := CenterY - Round(ScrollBox.ClientHeight / 2);
end;
```

Now consider zooming. All we have to do is to calculate X, Y positions accordingly, the size of the scrollbox won't change. `CenterX := Center.X * ZoomFactor`. But be careful, 'ZoomFactor' here is not the effective zoom, it is the zoom that will be applied when we click on the image. I'll use the image's before and after dimensions to determine that:

```
procedure ZoomTo(CenterX, CenterY, ZoomBy: Integer);
var
  OldWidth, OldHeight: Integer;
begin
  OldWidth := FImage.Width;
  OldHeight := FImage.Height;

// zoom the image, we have new image size and scroll range

CenterX := Round(CenterX * FImage.Width / OldWidth);
  ScrollBox.HorzScrollBar.Position := CenterX - Round(ScrollBox.ClientWidth / 2);

CenterY := Round(CenterY * FImage.Height / OldHeight);
  ScrollBox.VertScrollBar.Position := CenterY - Round(ScrollBox.ClientHeight / 2);
end; 
```

Of course, you'd refactor them into one line so that you call Round() only once to reduce rounding error.

I'm sure you can workout from here yourself.

Zooming in/out of a TImage inside a TScrollBox to a particular focus?

Solution

Problem