diff --git a/examples/Rasters/Raster.html b/examples/Rasters/Raster.html index 323275b5..e147e315 100644 --- a/examples/Rasters/Raster.html +++ b/examples/Rasters/Raster.html @@ -19,7 +19,10 @@ var scale = (Math.sin(event.time * 2) + 1) / 2; raster.scale(scale / lastScale); lastScale = scale; - raster.position = center + [Math.sin(event.time * 3) * 256, Math.sin(event.time * 2.5) * 256]; + raster.position = center + [ + Math.sin(event.time * 3) * 256, + Math.sin(event.time * 2.5) * 256 + ]; raster.rotate(event.delta * 120); } diff --git a/src/event/Event.js b/src/event/Event.js index d450221e..5fb04b10 100644 --- a/src/event/Event.js +++ b/src/event/Event.js @@ -22,6 +22,7 @@ var Event = Base.extend(/** @lends Event# */{ initialize: function Event(event) { this.event = event; + this.type = event.type; }, prevented: false, diff --git a/src/item/Item.js b/src/item/Item.js index 2cd4b28f..6cd0ee7b 100644 --- a/src/item/Item.js +++ b/src/item/Item.js @@ -145,7 +145,8 @@ var Item = Base.extend(Emitter, /** @lends Item# */{ }, // Only for external sources, e.g. Raster - onLoad: {} + onLoad: {}, + onError: {} } ), diff --git a/src/item/Raster.js b/src/item/Raster.js index 71beaf8c..2456fb38 100644 --- a/src/item/Raster.js +++ b/src/item/Raster.js @@ -221,6 +221,33 @@ var Raster = Item.extend(/** @lends Raster# */{ }, setImage: function(image) { + var that = this, + loaded = false; + + function emit(event) { + var view = that.getView(), + type = event && event.type || 'load'; + if (view && that.responds(type)) { + paper = view._scope; + that.emit(type, new Event(event)); + // TODO: Request a redraw in the next animation frame from + // update() instead! + view.update(); + } + } + + function update() { + // Both canvas and image have width / height attributes. Due to IE, + // naturalWidth / Height needs to be checked for a swell, because it + // apparently can have width / height set to 0 when the image is + // invisible in the document. + that._size = new Size( + image ? image.naturalWidth || image.width : 0, + image ? image.naturalHeight || image.height : 0); + that._context = null; + that._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS)); + } + if (this._canvas) CanvasProvider.release(this._canvas); // Due to similarities, we can handle both canvas and image types here. @@ -228,22 +255,30 @@ var Raster = Item.extend(/** @lends Raster# */{ // A canvas object this._image = null; this._canvas = image; - this._loaded = true; + loaded = true; } else { // A image object this._image = image; this._canvas = null; - this._loaded = image && image.complete; + loaded = image && image.complete; + } + this._loaded = loaded; + if (loaded) { + // Emit load event with a delay, so behavior is the same as when + // it's actually loaded and we give the code time to install event. + update(); + setTimeout(emit, 0); + } else if (image) { + // Trigger the load event on the image once it's loaded + DomEvent.add(image, { + load: function(event) { + that._loaded = true; + update(); + emit(event); + }, + error: emit + }); } - // Both canvas and image have width / height attributes. Due to IE, - // naturalWidth / Height needs to be checked for a swell, because it - // apparently can have width / height set to 0 when the image is - // invisible in the document. - this._size = new Size( - image ? image.naturalWidth || image.width : 0, - image ? image.naturalHeight || image.height : 0); - this._context = null; - this._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS)); }, /** @@ -328,35 +363,14 @@ var Raster = Item.extend(/** @lends Raster# */{ }, setSource: function(src) { - var that = this, - crossOrigin = this._crossOrigin, - image; - - function loaded() { - var view = that.getView(); - if (view) { - paper = view._scope; - that.setImage(image); - that.emit('load'); - view.update(); - } - } - - // src can be an URL or a DOM ID to load the image from - image = document.getElementById(src) || new window.Image(); + var crossOrigin = this._crossOrigin, + // src can be an URL or a DOM ID to load the image from: + image = document.getElementById(src) || new window.Image(); if (crossOrigin) image.crossOrigin = crossOrigin; - if (image.complete) { - // Emit load event with a delay, so behavior is the same as when - // it's actually loaded and we give the code time to install event. - setTimeout(loaded, 0); - } else { - // Trigger the load event on the image once it's loaded - DomEvent.add(image, { load: loaded }); - // A new image created above? Set the source now. - if (!image.src) - image.src = src; - } + // A new image created above? Set the source now. + if (!image.src) + image.src = src; this.setImage(image); },