UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Zoom and Pan

In this example, an instance of the Uize.Widget.ImagePort.Draggable class is created to display a large image inside a small image port and then to allow the user to zoom and pan the image inside the port using the mouse. To pan, simply click-and-drag inside the image port. The change zoom level, use the ctrl modifier key: ctrl-drag-up zooms in, and ctrl-drag-down zooms out.