Issue with Scrolling Image Exceeding Expected Range

Hello everyone,

I am facing an issue while developing an application in Xojo, and I am seeking assistance here.

Problem Description: In my application, I am using a Canvas to display an image and have added horizontal and vertical scrollbars to enable image scrolling. However, when I scroll the image using the scrollbars, the image exceeds its expected range by a significant margin, approximately 3 times the canvas width. This prevents users from properly viewing the entire image.

Expected Outcome: I would like the image to stay within the bounds of the Canvas while scrolling, without exceeding its expected range.

Relevant Code Snippet: In the Paint event of the application, I draw the image, and in the Resizing event, I set the maximum and current values for the scrollbars.

Sub Paint(g As Graphics, areas() As Rect)
  ' Get the visible size of the Canvas
  Dim canvasVisibleWidth As Integer = imgCanvas.Width
  Dim canvasVisibleHeight As Integer = imgCanvas.Height
  
  ' Calculate the maximum values for horizontal and vertical scrollbars
  Dim hMax As Integer = Max(imgWidth - canvasVisibleWidth, 0)
  Dim vMax As Integer = Max(imgHeight - canvasVisibleHeight, 0)
  
  ' Ensure scrollbar values stay within the image range
  hScrollBar.MaximumValue = hMax
  hScrollBar.Value = Min(hScrollBar.Value, hMax)
  
  vScrollBar.MaximumValue = vMax
  vScrollBar.Value = Min(vScrollBar.Value, vMax)
  
  ' Draw the image on the Canvas, taking scrollbar position into account
  Dim xOffset As Integer = hScrollBar.Value
  Dim yOffset As Integer = vScrollBar.Value
  
  g.DrawPicture(imgCanvas.Backdrop, -xOffset, -yOffset)
End Sub

I have tried various approaches to resolve this issue, but so far, none have been successful. I suspect there might be an error in calculating the maximum and current values for the scrollbars.

I would greatly appreciate any help and guidance from the community. Thank you very much!

You will need to tell the drawPicture function to only draw a certain area of the source image,
DrawPicture(imgCanvas.backdrop, 0,0,g.width,g.height,xOffset,yOffset,g.width,g.height)
This works at a window scale of 1x, you will need to adjust for retina / windows scaling by adjusting the scale of the source input (second g.width,g.height) values.

1 Like

Set the scrollbar MaximumValues outside of paint.

On Windows, there is a limit to the MaximumValue. I forget what it is, but things go weird if the max is set too high.

The X offset should be positive, not negative.

Edit, with the way you’re using the offsets, you may be correct.

1 Like

Thank you so much for your help!I’ve modified my code, and now I can drag it properly:

g.DrawPicture(img, xOffset, yOffset, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight)

What has been bothering me is the issue of proportions during drawing, but I have achieved the desired effect by modifying my code

g.DrawPicture(img, xOffset, yOffset, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight)