UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Marquee and Image Port

Resizing and moving the marquee (an instance of the Uize.Widget.Resizer.Marquee widget class) updates the masking in order to highlight the marquee region, but also sets values for the image port widget (an instance of the Uize.Widget.ImagePort.Draggable widget class) to the right, so that the image port effectively shows the enlarged view of the marquee region. Click-and-dragging on the image port feeds back into the marquee widget to the left, so that the marquee is always positioned to correctly reflect the area shown in the image port. If you use the Ctrl key when click-and-dragging on the image port, it will zoom in or zoom out the image port's view when you move the mouse up or down, respectively. When you do this, the marquee is updated to stay in sync.

Uize.Widget.Resizer.Marquee Instance Uize.Widget.ImagePort.Draggable Instance