dojox/image/Magnifier.js

  • Provides:

    • dojox.image.Magnifier

  • Requires:

    • dojox.gfx in common
    • dojox.image.MagnifierLite in common

  • dojox.image.Magnifier

    • type
      Function
    • chains:
      • dojox.image.MagnifierLite: (prototype)
      • dojox.image.MagnifierLite: (call)
    • summary
      Adds magnification on a portion of an image element, using `dojox.gfx`
    • description
      An unobtrusive way to add an unstyled overlay
above the srcNode image element. The overlay/glass is a
scaled version of the src image (so larger images sized down
are clearer).

over-ride the _createGlass method to create your custom surface,
being sure to create an img node on that surface.

  • dojox.image.Magnifier._createGlass

    • type
      Function
    • source: [view]
      dojo.provide("dojox.image.Magnifier");


      dojo.require("dojox.gfx");
      dojo.require("dojox.image.MagnifierLite");


      dojo.declare("dojox.image.Magnifier",
       dojox.image.MagnifierLite,{
       // summary:
       //  Adds magnification on a portion of an image element, using `dojox.gfx`
       //
       // description:
       //  An unobtrusive way to add an unstyled overlay
       //   above the srcNode image element. The overlay/glass is a
       //  scaled version of the src image (so larger images sized down
       //  are clearer).
       //
       //  over-ride the _createGlass method to create your custom surface,
       //  being sure to create an img node on that surface.


       _createGlass: function(){
        // summary: create the glassNode, and an img on a dojox.gfx surface


        // images are hard to make into workable templates, so just add outer overlay
        // and skip using dijit._Templated
        this.glassNode = dojo.create('div', {
         style:{
          height: this.glassSize + "px",
          width: this.glassSize + "px"
         },
         "className":"glassNode"
        }, dojo.body());
        this.surfaceNode = dojo.create('div', null, this.glassNode);


        this.surface = dojox.gfx.createSurface(this.surfaceNode, this.glassSize, this.glassSize);
        this.img = this.surface.createImage({
         src: this.domNode.src,
         width: this._zoomSize.w,
         height: this._zoomSize.h
        });
    • summary
  • dojox.image.Magnifier._placeGlass
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var x = e.pageX - 2,
         y = e.pageY - 2,
         xMax = this.offset.x + this.offset.w + 2,
         yMax = this.offset.y + this.offset.h + 2
        ;

        
        // with svg, our mouseout connection to the image surface doesn't
        // fire, so we'r have to manually calculate offsets
        if(x < this.offset.x || y < this.offset.y || x > xMax || y > yMax){
         this._hideGlass();
        }else{
         this.inherited(arguments);
        }
                    
      
                    
    • summary
      position the overlay centered under the cursor
  • dojox.image.Magnifier._setImage
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var xOff = (e.pageX - this.offset.l) / this.offset.w,
         yOff = (e.pageY - this.offset.t) / this.offset.h,
         x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff),
         y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff)
        ;
        // set the image offset
        this.img.setShape({ x: x, y: y });
                    
      
                    
    • summary
      set the image's offset in the clipping window relative to the mouse position
  • dojox.image.Magnifier.glassNode
       
    • summary
  • dojox.image.Magnifier.surfaceNode
       
    • summary
  • dojox.image.Magnifier.surface
       
    • summary
  • dojox.image.Magnifier.img
       
    • summary
  • dojox.image
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary