diff options
Diffstat (limited to 'js/dojo/dojox/image/Magnifier.js')
| -rw-r--r-- | js/dojo/dojox/image/Magnifier.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/js/dojo/dojox/image/Magnifier.js b/js/dojo/dojox/image/Magnifier.js new file mode 100644 index 0000000..06a0c8f --- /dev/null +++ b/js/dojo/dojox/image/Magnifier.js @@ -0,0 +1,71 @@ +//>>built +define("dojox/image/Magnifier", ["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/window", "dojox/gfx", "dojox/gfx/canvas", "./MagnifierLite"], function(declare, construct, window, gfx, canvas, MagnifierLite){ + + return declare("dojox.image.Magnifier", 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 = construct.create('div', { + style: { + height: this.glassSize + "px", + width: this.glassSize + "px" + }, + className: "glassNode" + }, window.body()); + this.surfaceNode = construct.create('div', null, this.glassNode); + + gfx.switchTo('canvas'); + this.surface = canvas.createSurface(this.surfaceNode, this.glassSize, this.glassSize); + this.img = this.surface.createImage({ + src: this.domNode.src, + width: this._zoomSize.w, + height: this._zoomSize.h + }); + + }, + + _placeGlass: function(e){ + // summary: position the overlay centered under the cursor + 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); + } + }, + + _setImage: function(e){ + // summary: set the image's offset in the clipping window relative to the mouse position + + var xOff = (e.pageX - this.offset.x) / this.offset.w, + yOff = (e.pageY - this.offset.y) / 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 }); + + } + }); +});
\ No newline at end of file |