reusing images in ol.style.Icon#clone

This commit is contained in:
simonseyock
2017-09-08 14:11:04 +02:00
parent b03bb2c2ce
commit f73cda8ef5
2 changed files with 9 additions and 27 deletions

View File

@@ -176,24 +176,11 @@ ol.inherits(ol.style.Icon, ol.style.Image);
/**
* Clones the style.
* Clones the style. The underlying Image/HTMLCanvasElement is not cloned.
* @return {ol.style.Icon} The cloned style.
* @api
*/
ol.style.Icon.prototype.clone = function() {
var oldImage = this.getImage(1);
var newImage;
if (this.iconImage_.getImageState() === ol.ImageState.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(),
anchorOrigin: this.anchorOrigin_,
@@ -201,9 +188,7 @@ ol.style.Icon.prototype.clone = function() {
anchorYUnits: this.anchorYUnits_,
crossOrigin: this.crossOrigin_,
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(),
src: this.getSrc(),
offset: this.offset_.slice(),
offsetOrigin: this.offsetOrigin_,
size: this.size_ !== null ? this.size_.slice() : undefined,

View File

@@ -70,18 +70,18 @@ describe('ol.style.Icon', function() {
});
var clone = original.clone();
expect(original.getImage(1)).to.be(clone.getImage(1));
expect(original.iconImage_).to.be(clone.iconImage_);
expect(original.getAnchor()).to.eql(clone.getAnchor());
expect(original.anchorOrigin_).to.eql(clone.anchorOrigin_);
expect(original.anchorXUnits_).to.eql(clone.anchorXUnits_);
expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
expect(original.getColor()).to.eql(clone.getColor());
expect(original.getImage(1).src).to.eql(clone.getImage(1).src);
expect(original.getImage(1).toDataURL()).to.eql(original.getImage(1).toDataURL());
expect(original.offset_).to.eql(clone.offset_);
expect(original.offsetOrigin_).to.eql(clone.offsetOrigin_);
expect(original.getSize()).to.eql(clone.getSize());
expect(original.getSrc()).not.to.eql(clone.getSrc());
expect(original.getSrc()).to.eql(clone.getSrc());
expect(original.getOpacity()).to.eql(clone.getOpacity());
expect(original.getRotation()).to.eql(clone.getRotation());
expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
@@ -91,33 +91,30 @@ describe('ol.style.Icon', function() {
src: src
});
var clone2 = original2.clone();
expect(original2.getSrc()).to.be(clone2.getSrc());
expect(original2.getImage(1)).to.be(clone2.getImage(1));
expect(original2.iconImage_).to.be(clone2.iconImage_);
expect(original2.getSrc()).to.eql(clone2.getSrc());
});
it('the clone does not reference the same objects as the original', function() {
var canvas = document.createElement('canvas');
var original = new ol.style.Icon({
anchor: [1, 0],
color: [1, 2, 3, 0.4],
img: canvas,
imgSize: size,
src: src,
offset: [1, 2],
size: [10, 12]
});
var clone = original.clone();
expect(original.getAnchor()).not.to.be(clone.getAnchor());
expect(original.getImage(1)).not.to.be(clone.getImage(1));
expect(original.offset_).not.to.be(clone.offset_);
expect(original.getColor()).not.to.be(clone.getColor());
expect(original.getSize()).not.to.be(clone.getSize());
clone.anchor_[0] = 0;
clone.getImage(1).width = 50;
clone.offset_[0] = 0;
clone.color_[0] = 0;
clone.size_[0] = 5;
expect(original.anchor_).not.to.eql(clone.anchor_);
expect(original.getImage(1).width).not.to.eql(clone.getImage(1).width);
expect(original.offset_).not.to.eql(clone.offset_);
expect(original.color_).not.to.eql(clone.color_);
expect(original.size_).not.to.eql(clone.size_);