SOURCE CODE: Marquee and Image Port

  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Marquee and Image Port
    

      
SOURCE
    
  

  

  

    
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