diff --git a/src/ol/style/fill.js b/src/ol/style/fill.js index 73dabf5654..44e948d897 100644 --- a/src/ol/style/fill.js +++ b/src/ol/style/fill.js @@ -31,13 +31,14 @@ ol.style.Fill = function(opt_options) { /** - * Clones the style. + * Clones the style. The color is not cloned if it is an {@link ol.ColorLike}. * @return {ol.style.Fill} The cloned style. * @api */ ol.style.Fill.prototype.clone = function() { + var color = this.getColor(); return new ol.style.Fill({ - color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor() + color: (color && color.slice) ? color.slice() : color || undefined }); }; diff --git a/src/ol/style/icon.js b/src/ol/style/icon.js index 292d85a534..a6182d7cd2 100644 --- a/src/ol/style/icon.js +++ b/src/ol/style/icon.js @@ -179,20 +179,32 @@ ol.inherits(ol.style.Icon, ol.style.Image); * @api */ ol.style.Icon.prototype.clone = function() { - var useImg = (this.iconImage_.getImageState() === ol.Image.State.LOADED); + var oldImage = this.getImage(1); + var newImage; + if (this.iconImage_.getImageState() === ol.Image.State.LOADED) { + if (oldImage.tagName.toUpperCase() === 'IMG') { + newImage = /** @type {Image} */ (oldImage.cloneNode(true)); + } else { + newImage = /** @type {HTMLCanvasElement} */ (document.createElement('canvas')); + var context = newImage.getContext('2d'); + newImage.width = oldImage.width; + newImage.height = oldImage.height; + context.drawImage(oldImage, 0, 0); + } + } return new ol.style.Icon({ - anchor: this.anchor_.slice(0), + anchor: this.anchor_.slice(), anchorOrigin: this.anchorOrigin_, anchorXUnits: this.anchorXUnits_, anchorYUnits: this.anchorYUnits_, crossOrigin: this.crossOrigin_, - color: this.color_ !== null ? this.color_.slice(0) : undefined, - img: useImg ? this.getImage(1) : undefined, - imgSize: useImg ? this.iconImage_.getSize().slice(0) : undefined, - src: useImg ? undefined : this.getSrc(), - offset: this.offset_.slice(0), + color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined, + img: newImage ? newImage : undefined, + imgSize: newImage ? this.iconImage_.getSize().slice() : undefined, + src: newImage ? undefined : this.getSrc(), + offset: this.offset_.slice(), offsetOrigin: this.offsetOrigin_, - size: this.size_ !== null ? this.size_.slice(0) : undefined, + size: this.size_ !== null ? this.size_.slice() : undefined, opacity: this.getOpacity(), scale: this.getScale(), snapToPixel: this.getSnapToPixel(), diff --git a/src/ol/style/stroke.js b/src/ol/style/stroke.js index 2ded636f69..f90a102452 100644 --- a/src/ol/style/stroke.js +++ b/src/ol/style/stroke.js @@ -68,10 +68,11 @@ ol.style.Stroke = function(opt_options) { * @api */ ol.style.Stroke.prototype.clone = function() { + var color = this.getColor(); return new ol.style.Stroke({ - color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor(), + color: (color && color.slice) ? color.slice() : color || undefined, lineCap: this.getLineCap(), - lineDash: this.getLineDash() ? this.getLineDash().slice(0) : undefined, + lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined, lineJoin: this.getLineJoin(), miterLimit: this.getMiterLimit(), width: this.getWidth() diff --git a/test/spec/ol/style/icon.test.js b/test/spec/ol/style/icon.test.js index 96c1c407cb..7e98c41172 100644 --- a/test/spec/ol/style/icon.test.js +++ b/test/spec/ol/style/icon.test.js @@ -78,6 +78,7 @@ describe('ol.style.Icon', function() { expect(original.crossOrigin_).to.be(clone.crossOrigin_); expect(original.color_).to.not.be(clone.color_); expect(original.color_).to.eql(clone.color_); + expect(original.getImage(1)).not.to.be(clone.getImage(1)); expect(original.getImage(1).src).to.be(clone.getImage(1).src); expect(original.getImage(1).toDataURL()).to.be(original.getImage(1).toDataURL()); expect(original.offset_).to.not.be(clone.offset_); diff --git a/test/spec/ol/style.test.js b/test/spec/ol/style/style.test.js similarity index 100% rename from test/spec/ol/style.test.js rename to test/spec/ol/style/style.test.js