From c0b6eac0c256e60d99e7dd17f1845473c0f5080e Mon Sep 17 00:00:00 2001 From: Alexandre Brault Date: Wed, 18 Nov 2015 22:11:50 -0500 Subject: [PATCH] Add color option to ol.style.Icon --- examples/icon.js | 2 + externs/olx.js | 9 +++ src/ol/style/iconstyle.js | 88 ++++++++++++++++++++++++---- test/spec/ol/style/iconstyle.test.js | 14 ++--- 4 files changed, 93 insertions(+), 20 deletions(-) diff --git a/examples/icon.js b/examples/icon.js index 5ef4099a7c..0e64c84c30 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -2,6 +2,7 @@ goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.Overlay'); goog.require('ol.View'); +goog.require('ol.color'); goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); @@ -23,6 +24,7 @@ var iconStyle = new ol.style.Style({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', + color: ol.color.asArray('#8959A8'), opacity: 0.75, src: 'data/icon.png' })) diff --git a/externs/olx.js b/externs/olx.js index 559cb766c1..24e28a1d9a 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -6040,6 +6040,7 @@ olx.style.FillOptions.prototype.color; * anchorOrigin: (ol.style.IconOrigin|undefined), * anchorXUnits: (ol.style.IconAnchorUnits|undefined), * anchorYUnits: (ol.style.IconAnchorUnits|undefined), + * color: (ol.Color|undefined), * crossOrigin: (null|string|undefined), * img: (Image|HTMLCanvasElement|undefined), * offset: (Array.|undefined), @@ -6094,6 +6095,14 @@ olx.style.IconOptions.prototype.anchorXUnits; olx.style.IconOptions.prototype.anchorYUnits; +/** + * Color to tint the icon. If not specified, the icon will be left as is. + * @type {ol.Color|undefined} + * @api + */ +olx.style.IconOptions.prototype.color; + + /** * The `crossOrigin` attribute for loaded images. Note that you must provide a * `crossOrigin` value if you are using the WebGL renderer or if you want to diff --git a/src/ol/style/iconstyle.js b/src/ol/style/iconstyle.js index 1f841ee774..c3f50e01bf 100644 --- a/src/ol/style/iconstyle.js +++ b/src/ol/style/iconstyle.js @@ -7,6 +7,7 @@ goog.require('goog.asserts'); goog.require('goog.events'); goog.require('goog.events.EventTarget'); goog.require('goog.events.EventType'); +goog.require('ol.color'); goog.require('ol.dom'); goog.require('ol.style.Image'); goog.require('ol.style.ImageState'); @@ -125,12 +126,17 @@ ol.style.Icon = function(opt_options) { var imageState = options.src !== undefined ? ol.style.ImageState.IDLE : ol.style.ImageState.LOADED; + /** + * @type {ol.Color} + */ + var color = options.color !== undefined ? options.color : null; + /** * @private * @type {ol.style.IconImage_} */ this.iconImage_ = ol.style.IconImage_.get( - image, src, imgSize, crossOrigin, imageState); + image, src, imgSize, crossOrigin, imageState, color); /** * @private @@ -373,10 +379,12 @@ ol.style.Icon.prototype.unlistenImageChange = function(listener, thisArg) { * @param {ol.Size} size Size. * @param {?string} crossOrigin Cross origin. * @param {ol.style.ImageState} imageState Image state. + * @param {ol.Color} color Color. * @extends {goog.events.EventTarget} * @private */ -ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState) { +ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState, + color) { goog.base(this); @@ -396,6 +404,20 @@ ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState) { this.image_.crossOrigin = crossOrigin; } + /** + * @private + * @type {HTMLCanvasElement} + */ + this.canvas_ = color ? + /** @type {HTMLCanvasElement} */ (document.createElement('CANVAS')) : + null; + + /** + * @private + * @type {ol.Color} + */ + this.color_ = color; + /** * @private * @type {Array.} @@ -439,15 +461,17 @@ goog.inherits(ol.style.IconImage_, goog.events.EventTarget); * @param {ol.Size} size Size. * @param {?string} crossOrigin Cross origin. * @param {ol.style.ImageState} imageState Image state. + * @param {ol.Color} color Color. * @return {ol.style.IconImage_} Icon image. */ -ol.style.IconImage_.get = function(image, src, size, crossOrigin, imageState) { +ol.style.IconImage_.get = function(image, src, size, crossOrigin, imageState, + color) { var iconImageCache = ol.style.IconImageCache.getInstance(); - var iconImage = iconImageCache.get(src, crossOrigin); + var iconImage = iconImageCache.get(src, crossOrigin, color); if (!iconImage) { iconImage = new ol.style.IconImage_( - image, src, size, crossOrigin, imageState); - iconImageCache.set(src, crossOrigin, iconImage); + image, src, size, crossOrigin, imageState, color); + iconImageCache.set(src, crossOrigin, color, iconImage); } return iconImage; }; @@ -492,6 +516,7 @@ ol.style.IconImage_.prototype.handleImageLoad_ = function() { this.imageState_ = ol.style.ImageState.LOADED; this.size_ = [this.image_.width, this.image_.height]; this.unlistenImage_(); + this.replaceColor_(); this.determineTainting_(); this.dispatchChangeEvent_(); }; @@ -502,7 +527,7 @@ ol.style.IconImage_.prototype.handleImageLoad_ = function() { * @return {Image|HTMLCanvasElement} Image or Canvas element. */ ol.style.IconImage_.prototype.getImage = function(pixelRatio) { - return this.image_; + return this.canvas_ ? this.canvas_ : this.image_; }; @@ -575,6 +600,38 @@ ol.style.IconImage_.prototype.load = function() { }; +/** + * @private + */ +ol.style.IconImage_.prototype.replaceColor_ = function() { + if (this.color_ === null) { + return; + } + + goog.asserts.assert(this.canvas_ !== null, + 'this.canvas_ must not be null'); + + this.canvas_.width = this.image_.width; + this.canvas_.height = this.image_.height; + + var ctx = this.canvas_.getContext('2d'); + ctx.drawImage(this.image_, 0, 0); + + var imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height); + var data = imgData.data; + var r = this.color_[0] / 255.0; + var g = this.color_[1] / 255.0; + var b = this.color_[2] / 255.0; + + for (var i = 0, ii = data.length; i < ii; i += 4) { + data[i] *= r; + data[i + 1] *= g; + data[i + 2] *= b; + } + ctx.putImageData(imgData, 0, 0); +}; + + /** * Discards event handlers which listen for load completion or errors. * @@ -619,12 +676,14 @@ goog.addSingletonGetter(ol.style.IconImageCache); /** * @param {string} src Src. * @param {?string} crossOrigin Cross origin. + * @param {ol.Color} color Color. * @return {string} Cache key. */ -ol.style.IconImageCache.getKey = function(src, crossOrigin) { +ol.style.IconImageCache.getKey = function(src, crossOrigin, color) { goog.asserts.assert(crossOrigin !== undefined, 'argument crossOrigin must be defined'); - return crossOrigin + ':' + src; + var colorString = color ? ol.color.asString(color) : 'null'; + return crossOrigin + ':' + src + ':' + colorString; }; @@ -658,10 +717,11 @@ ol.style.IconImageCache.prototype.expire = function() { /** * @param {string} src Src. * @param {?string} crossOrigin Cross origin. + * @param {ol.Color} color Color. * @return {ol.style.IconImage_} Icon image. */ -ol.style.IconImageCache.prototype.get = function(src, crossOrigin) { - var key = ol.style.IconImageCache.getKey(src, crossOrigin); +ol.style.IconImageCache.prototype.get = function(src, crossOrigin, color) { + var key = ol.style.IconImageCache.getKey(src, crossOrigin, color); return key in this.cache_ ? this.cache_[key] : null; }; @@ -669,10 +729,12 @@ ol.style.IconImageCache.prototype.get = function(src, crossOrigin) { /** * @param {string} src Src. * @param {?string} crossOrigin Cross origin. + * @param {ol.Color} color Color. * @param {ol.style.IconImage_} iconImage Icon image. */ -ol.style.IconImageCache.prototype.set = function(src, crossOrigin, iconImage) { - var key = ol.style.IconImageCache.getKey(src, crossOrigin); +ol.style.IconImageCache.prototype.set = function(src, crossOrigin, color, + iconImage) { + var key = ol.style.IconImageCache.getKey(src, crossOrigin, color); this.cache_[key] = iconImage; ++this.cacheSize_; }; diff --git a/test/spec/ol/style/iconstyle.test.js b/test/spec/ol/style/iconstyle.test.js index 6efb6c57a8..2166ef67e1 100644 --- a/test/spec/ol/style/iconstyle.test.js +++ b/test/spec/ol/style/iconstyle.test.js @@ -133,7 +133,7 @@ describe('ol.style.Icon', function() { var cache = ol.style.IconImageCache.getInstance(); var src = 'test.png'; var iconImage = new ol.style.IconImage_(null, 'test.png', imgSize); - cache.set(src, null, iconImage); + cache.set(src, null, null, iconImage); var iconStyle = new ol.style.Icon({ src: 'test.png' @@ -176,7 +176,7 @@ describe('ol.style.IconImageCache', function() { for (i = 0; i < 4; ++i) { src = i + ''; iconImage = new ol.style.IconImage_(src, null); - cache.set(src, null, iconImage); + cache.set(src, null, null, iconImage); } expect(cache.cacheSize_).to.eql(4); @@ -186,7 +186,7 @@ describe('ol.style.IconImageCache', function() { src = '4'; iconImage = new ol.style.IconImage_(src, null); - cache.set(src, null, iconImage); + cache.set(src, null, null, iconImage); expect(cache.cacheSize_).to.eql(5); cache.expire(); // remove '0' and '4' @@ -196,21 +196,21 @@ describe('ol.style.IconImageCache', function() { iconImage = new ol.style.IconImage_(src, null); goog.events.listen(iconImage, goog.events.EventType.CHANGE, ol.nullFunction, false); - cache.set(src, null, iconImage); + cache.set(src, null, null, iconImage); expect(cache.cacheSize_).to.eql(4); src = '4'; iconImage = new ol.style.IconImage_(src, null); goog.events.listen(iconImage, goog.events.EventType.CHANGE, ol.nullFunction, false); - cache.set(src, null, iconImage); + cache.set(src, null, null, iconImage); expect(cache.cacheSize_).to.eql(5); // check that '0' and '4' are not removed from the cache cache.expire(); - key = ol.style.IconImageCache.getKey('0', null); + key = ol.style.IconImageCache.getKey('0', null, null); expect(key in cache.cache_).to.be.ok(); - key = ol.style.IconImageCache.getKey('4', null); + key = ol.style.IconImageCache.getKey('4', null, null); expect(key in cache.cache_).to.be.ok(); });