Scrolling an Image
Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook
Scrolling an image is different than scrolling text (Cookbook
example #29). To scroll an image, you need to place it within
another face (called a subface), then move it relative to that
face (using its OFFSET field).
The code below creates a window with a box to hold an image and
both vertical and horizontal scroll bars. See the notes that
follow to understand what's going on.
out: layout [
across
h3 "Image Scrolling Example" return
space 0
i1: box 400x400 coal
s1: scroller 16x400 [scroll-img-vert i1 s1]
return
s2: scroller 400x16 [scroll-img-horz i1 s2]
return
pad 0x5 space 5
button "Open" [open-img i1 s1 s2]
]
; Create a subface for the image:
i1/pane: make face [color: edge: font: para: none]
scroll-img-vert: func [img bar][
img/pane/offset/y: negate bar/data *
(max 0 img/pane/size/y - img/size/y)
show img
]
scroll-img-horz: func [img bar][
img/pane/offset/x: negate bar/data *
(max 0 img/pane/size/x - img/size/x)
show img
]
open-img: func [img vbar hbar /local file][
if file: request-file [
file: load first file
if image? file [
img/pane/image: file
update-img img vbar hbar
]
]
]
update-img: func [img vbar hbar] [
img/pane/offset: 0x0
img/pane/size: img/pane/image/size
s1/data: s2/data: 0
vbar/redrag img/size/y / img/pane/size/y
hbar/redrag img/size/x / img/pane/size/x
show [img vbar hbar]
]
view out
|
The trick to this code is the i1/pane. Every face can contain
one or more subfaces in a pane. So i1 is a box that holds the
actual image face, and scrolling is done by moving the offset
for that image face.
The UPDATE-IMG function resets the offset and size of the image
subface. It then resets the scroll bars.
When you click on a scroll bar, the SCROLL-IMG functions are
called. They use the position of the scroll bar, the size of the
image, and the size of the viewing area (the box) to calculate a
new offset for the image within the box.
| Use Newer REBOL/View | |
To run this example, you will need to use a newer version of
REBOL/View that defines the SCROLLER style.
|
| 