JAVASCRIPT EXAMPLES Tiled Zoom and Pan
In this example, a 3x3 matrix of draggable image port widgets is set up. The Uize.Widget.ImagePort.Draggable class wires up a view port to an image and lets you click-and-drag the image to pan the view of it. Holding the control modifier key while dragging up and down zooms in and out, respectively. Initially, the images are zoomed so that clicking-and-dragging will pan. When you select a new image from the list to the right of the grid, all the image port widgets will be set to display that image. The initial zoom level will show the entire image in each grid cell. Then, a Uize.Fade instance is used to fade the zoom amount so that each image port is zoomed out. The exact ending values for the sizingValue, alignX, and alignY state properties results in the various cells of the grid combining to form a faceted representation of the image as a whole - a neat effect. After selecting an image, now you can click-and-drag within the individual grid cells to "disrupt" the image to artistic effect.