ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4457 from alexbrault/colour-icon

Browse Source 
Add color option to ol.style.Icon
This commit is contained in:
Andreas Hocevar
2016-01-10 23:19:54 +01:00
parent 0f8373dd2d 3f16b340fc
commit d05b519f2f
4 changed files with 93 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/icon.js
View File

@@ -23,6 +23,7 @@ var iconStyle = new ol.style.Style({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
color: '#8959A8',
opacity: 0.75,
src: 'data/icon.png'
}))

9
externs/olx.js
View File

@@ -6080,6 +6080,7 @@ olx.style.FillOptions.prototype.color;
* anchorOrigin: (ol.style.IconOrigin|undefined),
* anchorXUnits: (ol.style.IconAnchorUnits|undefined),
* anchorYUnits: (ol.style.IconAnchorUnits|undefined),
* color: (ol.Color|string|undefined),
* crossOrigin: (null|string|undefined),
* img: (Image|HTMLCanvasElement|undefined),
* offset: (Array.<number>|undefined),
@@ -6134,6 +6135,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|string|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

89
src/ol/style/iconstyle.js
View File

@@ -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,18 @@ 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 ? ol.color.asArray(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 +380,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 +405,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.<goog.events.Key>}
@@ -439,15 +462,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;
};
@@ -493,6 +518,7 @@ ol.style.IconImage_.prototype.handleImageLoad_ = function() {
this.size_ = [this.image_.width, this.image_.height];
this.unlistenImage_();
this.determineTainting_();
this.replaceColor_();
this.dispatchChangeEvent_();
};
@@ -502,7 +528,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 +601,38 @@ ol.style.IconImage_.prototype.load = function() {
};
/**
* @private
*/
ol.style.IconImage_.prototype.replaceColor_ = function() {
if (this.tainting_ || 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 +677,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 +718,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 +730,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_;
};

14
test/spec/ol/style/iconstyle.test.js
View File

@@ -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();
});