ScrollCanvas is a Canvas subclass for REALbasic designed to make it easier to build canvases that support scrolling. It has been developed for REALbasic 4.5, although it may also work with earlier versions.

How to use ScrollCanvas

Setting up the controls

First, add the ScrollCanvas and SCScrollBar classes to your project. Then, place a canvas and one or two scroll bars on your window and position them appropriately. Set the class of the canvas to ScrollCanvas and the class of each of the scroll bars to SCScrollBar. (You must use SCScrollBars and not ordinary ScrollBars, otherwise they won't work to control the ScrollCanvas.)

Now select the ScrollCanvas and, in the Properties window, set the HScrollBarName and/or VScrollBarName properties to the names of your SCScrollBars.

Setting the extent

The visible area of the ScrollCanvas scrolls around within a larger conceptual rectangle called the extent. Initially, the extent is no bigger than the canvas, so there's  nowhere to scroll to and the scroll bars will be greyed out. To make the extent bigger, use the SetExtent method of the ScrollCanvas to set the width and height of the extent.

Coding the Paint event

The ScrollCanvas class has two properties xOrigin and yOrigin which contain, at any given moment, the coordinates of the top left corner of the extent, in the coordinate system of the canvas. For scrolling to work properly, everything you draw in the canvas must have these values added to its x and y coordinates. For example, to draw a rectangle with top left corner at x,y and size w,h, you would do
g.DrawRect xOrigin+x, yOrigin+y, w, h

Properties of ScrollCanvas

extentWidth as integer, extentHeight as integer
The current size of the extent. These should be treated as read-only; use the SetExtent method to change the extent.
xOrigin as integer, yOrigin as integer
Current coordinates of the top left corner of the extent rectangle in the canvas's coordinate system. Must be added to the x and y coordinates of any drawing done in the canvas. These should be treated as read-only; use the ScrollTo and ScrollBy methods to scroll the canvas programmatically.

Methods of ScrollCanvas

SetExtent(width as integer, height as integer)
Changes the size of the extent rectangle. If the current scrolling position is outside the range of the new extent, the canvas will be scrolled to bring it into range.
ScrollTo(xOffset as integer, yOffset as integer)
Scrolls the canvas so as to bring the top left corner of the canvas to a position xOffset from the left edge and yOffset from the top edge of the extent rectangle. (This results in xOrigin = -xOffset and yOrigin = -yOffset.) If the new scrolling position is outside the range allowed by the extent, xOffset and yOffset are first adjusted to bring it within range.
ScrollBy(dx as integer, dy as integer)
Scrolls the canvas by the amount dx,dy relative to the current scrolling position, limited by the extent. Positive values move the viewed area of the extent to the right and down.


ScrollCanvas is freeware; you're welcome to use it in any way you want. All I ask is that you give me credit if you release any modified versions of it.

Contacting the Author

Bug reports, comments and suggestions are welcome: