diff --git a/src/ol/style/iconstyle.js b/src/ol/style/iconstyle.js index ad1583252a..2dfbb40c41 100644 --- a/src/ol/style/iconstyle.js +++ b/src/ol/style/iconstyle.js @@ -4,6 +4,8 @@ goog.provide('ol.style.Icon'); goog.require('goog.array'); goog.require('goog.asserts'); +goog.require('goog.dom'); +goog.require('goog.dom.TagName'); goog.require('goog.events'); goog.require('goog.events.EventType'); goog.require('ol.style.Image'); @@ -20,6 +22,12 @@ ol.style.Icon = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; + /** + * @private + * @type {Image|HTMLCanvasElement} + */ + this.hitDetectionImage_ = null; + /** * @private * @type {Image} @@ -47,6 +55,12 @@ ol.style.Icon = function(opt_options) { */ this.src_ = options.src; + /** + * @private + * @type {boolean} + */ + this.tainting_ = false; + /** * @type {ol.Size} */ @@ -82,6 +96,25 @@ ol.style.Icon = function(opt_options) { goog.inherits(ol.style.Icon, ol.style.Image); +/** + * @private + */ +ol.style.Icon.prototype.determineTainting_ = function() { + var canvas = /** @type {HTMLCanvasElement} */ + (goog.dom.createElement(goog.dom.TagName.CANVAS)); + canvas.width = 1; + canvas.height = 1; + var context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + context.drawImage(this.image_, 0, 0); + try { + context.getImageData(0, 0, 1, 1); + } catch (e) { + this.tainting_ = true; + } +}; + + /** * @private */ @@ -104,6 +137,7 @@ ol.style.Icon.prototype.handleImageLoad_ = function() { this.anchor = [this.size[0] / 2, this.size[1] / 2]; } this.unlistenImage_(); + this.determineTainting_(); this.dispatchChangeEvent(); }; @@ -116,6 +150,30 @@ ol.style.Icon.prototype.getImage = function(pixelRatio) { }; +/** + * @inheritDoc + */ +ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) { + if (goog.isNull(this.hitDetectionImage_)) { + if (this.tainting_) { + var canvas = /** @type {HTMLCanvasElement} */ + (goog.dom.createElement(goog.dom.TagName.CANVAS)); + var width = this.size[0]; + var height = this.size[1]; + canvas.width = width; + canvas.height = height; + var context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + context.fillRect(0, 0, width, height); + this.hitDetectionImage_ = canvas; + } else { + this.hitDetectionImage_ = this.image_; + } + } + return this.hitDetectionImage_; +}; + + /** * Load not yet loaded URI. */