Author Topic: How to navigation on a timage?  (Read 529 times)


  • Full Member
  • ***
  • Posts: 158
How to navigation on a timage?
« on: November 02, 2019, 06:52:58 pm »
Hi there,
I have an scrollbox with an image component (main), as well as other image component outside the scrollbox (navigation), at small size.
By the use of a openpicturedialog, o load a picture on both image components at the same time. Inside the scrollbox, it is showed at full resolution, meanwhile i  the other it ss showed proportionally in order to have a full view of the picture. I would like this small image could work like a navigation map of the image.
I mean... i would like to see a box over the image showing the limits of the picture as it is showed in the main image component, that could changes everytime I scroll (or zoom or pan) on the main image, in the same way that the navigation panel of the tchart component.
Do you think it is possible? Any help will be welcome!
« Last Edit: November 02, 2019, 07:32:00 pm by madepabloh »


  • Hero Member
  • *****
  • Posts: 3541
  • My goal: build my own game engine using Lazarus
Re: How to navigation on a timage?
« Reply #1 on: November 15, 2019, 05:45:16 am »
I haven't tried but it sounds very possible.

You need to do some calculations and synchronizations between the main image in the scrollbox and the preview box. First calculate the aspect ratio of the viewable rectangle of the main image, then zoom value in the preview box. Then draw a rectangle on the preview box to represent the viewable shape and size based the aspect ratio and zoom value you calculated previously also the X and Y position relatively to its image.

Basically, these are what you need to calculate:
- Aspec ratio of the viewable area
- Aspec ratio of the preview box
- Zoom (shriking) value of the preview box
- X, Y viewable position in percentage relatively to the whole image

Sorry, my English is not very good.


TinyPortal © 2005-2018