Height calculation

Hello,
i have a canvas which is e.g 400px height. Next to the canvas there is a custom scrollbar. If i scroll my handle to 30% of the height of the scrollbar the content of the canvas scrolls to 30% position. Both canvas and scrollbar are locked top and bottom, the scrollbar is always the same height as the canvas.

so, in my example:
canvas 400 px - dragging the handle to 30% sets the handle top position to 120px

now, when i scale the canvas to e.g 600px, how do i calculate the top position of the handle, so that the content of the canvas stays at the same position as it was? The handle has a fixed height, i don’t want it to scale proportionally.

note: i know the built in scrollbar does this by itself, but i want to make my own scrollbar

Here are a couple of older custom scrollbar projects from Real Studio days - they can be updated for Xojo compatibility without too much trouble, or just look at the code to see how they work.

http://www.pragmaticdesigns.com/CustomScrollBar%20Dave%20Addey.zip

http://www.pragmaticdesigns.com/Custom%20Scrollbar%20Control%20-%20Seth%20Willits.zip

thank you, Julia… i appriciate that. But for learning purposes i really want fix my problem above… no offense

@Marco Weinrich — It might help you to consider the following: your Canvas is like a rectangle hole in a sheet of paper which you can move over a large picture. The key value here (if we talk only about vertical scrolling) is the offset between the picture and your Canvas. Let’s call it ?h

To see the top of the picture, both the picture and your Canvas need to be aligned along their Top property (in Xojo coordinates) so ?h is 0.

To see the bottom of the picture, both need to be aligned along their Bottom property, which actually doesn’t exist. So you need to replace it with the formula Bottom = Top + Height. All in all, ?h = H - h, where H is the picture’s height and h is your Canvas’ height.

With that in hand, you will always be able to compute the offset between the picture and your canvas. Of course, the same applies horizontally if you want to have a horizontal scroller.

I understand. Studying the example projects might help you learn how to fix your problem, by seeing how others have dealt with it.

1 Like

thanks, Stephane but scrolling the content of the canvas is not my problem. i can drag the handle to the bottom and it scrolls the canvas to the bottom or to whatever position i want.
My problem is when the canvas is scaled, the position of the handle is wrong.

for example:
canvas is 400 px, scrollposition is set to 33%, the canvas content scrolls to 33% (content is 1000px, handle top is now 125px)
now if i scale the canvas to e.g 700px height the top of the handle should be around 450px but i don’t know how to calculate this.

@Marco Weinrich — Well you just need to consider the new size (including the scaling factor) in the equations I gave you. Maths never lie :slight_smile:

sorry i don’t get it:

scale factor: newheight/oldheight = 700px/400px= 1,75
so the new canvas size is factor 1,75 bigger than before (400px)

?h = H - h
1000px-700px=300px

but i have to take action to the position of the handle to which it was dragged before??