//>>built // wrapped by build app define("dojox/drawing/stencil/Image", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){ dojo.provide("dojox.drawing.stencil.Image"); dojox.drawing.stencil.Image = dojox.drawing.util.oo.declare( // summary: // Creates an dojox.gfx Image based on the data // provided. // dojox.drawing.stencil._Base, function(options){ // summary: // constructor }, { type:"dojox.drawing.stencil.Image", anchorType: "group", baseRender:true, /*===== StencilData: { // summary: // The data used to create the dojox.gfx Shape // x: Number // Left point x // y: Number // Top point y // width: ? Number // Optional width of Image. If not provided, it is obtained // height: ? Number // Optional height of Image. If not provided, it is obtained // src: String // The location of the source image }, StencilPoints: [ // summary: // An Array of dojox.__StencilPoint objects that describe the Stencil // 0: Object // Top left point // 1: Object // Top right point // 2: Object // Bottom right point // 3: Object // Bottom left point ], =====*/ dataToPoints: function(/*Object*/o){ //summary: // Converts data to points. o = o || this.data; this.points = [ {x:o.x, y:o.y}, // TL {x:o.x + o.width, y:o.y}, // TR {x:o.x + o.width, y:o.y + o.height}, // BR {x:o.x, y:o.y + o.height} // BL ]; return this.points; }, pointsToData: function(/*Array*/p){ // summary: // Converts points to data p = p || this.points; var s = p[0]; var e = p[2]; this.data = { x: s.x, y: s.y, width: e.x-s.x, height: e.y-s.y, src: this.src || this.data.src }; return this.data; }, _createHilite: function(){ // summary: // Create the hit and highlight area // for the Image. this.remove(this.hit); this.hit = this.container.createRect(this.data) .setStroke(this.style.current) .setFill(this.style.current.fill); this._setNodeAtts(this.hit); }, _create: function(/*String*/shp, /*StencilData*/d, /*Object*/sty){ // summary: // Creates a dojox.gfx.shape based on passed arguments. // Can be called many times by implementation to create // multiple shapes in one stencil. // this.remove(this[shp]); var s = this.container.getParent(); this[shp] = s.createImage(d) this.container.add(this[shp]); this._setNodeAtts(this[shp]); }, render: function(dbg){ // summary: // Renders the 'hit' object (the shape used for an expanded // hit area and for highlighting) and the'shape' (the actual // display object). Image is slightly different than other // implementations. Instead of calling render twice, it calls // _createHilite for the 'hit' // if(this.data.width == "auto" || isNaN(this.data.width)){ this.getImageSize(true); console.warn("Image size not provided. Acquiring...") return; } this.onBeforeRender(this); this.renderHit && this._createHilite(); this._create("shape", this.data, this.style.current); }, getImageSize: function(render){ // summary: // Internal. If no image size is passed in with the data // create a dom node, insert and image, gets its dimensions // record them - then destroy everything. // if(this._gettingSize){ return; } // IE gets it twice (will need to mod if src changes) this._gettingSize = true; var img = dojo.create("img", {src:this.data.src}, dojo.body()); var err = dojo.connect(img, "error", this, function(){ dojo.disconnect(c); dojo.disconnect(err); console.error("Error loading image:", this.data.src) console.warn("Error image:", this.data) }); var c = dojo.connect(img, "load", this, function(){ var dim = dojo.marginBox(img); this.setData({ x:this.data.x, y:this.data.y, src:this.data.src, width:dim.w, height:dim.h }); dojo.disconnect(c); dojo.destroy(img); render && this.render(true); }); } } ); dojox.drawing.register({ name:"dojox.drawing.stencil.Image" }, "stencil"); });