diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js index 625fe9265c..eec94e8c25 100644 --- a/rendering/cases/regularshape-style/main.js +++ b/rendering/cases/regularshape-style/main.js @@ -23,7 +23,7 @@ function createFeatures(stroke, fill, offSet = [0, 0]) { points: 4, radius: 10, angle: Math.PI / 4, - offset: [-15, 15] + displacement: [-15, 15] }) })); vectorSource.addFeature(feature); diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js index 9ac4a5939e..64dc96cd3a 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -10,7 +10,7 @@ import RegularShape from './RegularShape.js'; * @property {import("./Fill.js").default} [fill] Fill style. * @property {number} radius Circle radius. * @property {import("./Stroke.js").default} [stroke] Stroke style. - * @property {Array} [offset=[0,0]] offset + * @property {Array} [displacement=[0,0]] displacement */ @@ -32,7 +32,7 @@ class CircleStyle extends RegularShape { fill: options.fill, radius: options.radius, stroke: options.stroke, - offset: options.offset !== undefined ? options.offset : [0, 0] + displacement: options.displacement !== undefined ? options.displacement : [0, 0] }); } @@ -48,7 +48,7 @@ class CircleStyle extends RegularShape { fill: this.getFill() ? this.getFill().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined, radius: this.getRadius(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js index 100f8892e8..9206227430 100644 --- a/src/ol/style/Icon.js +++ b/src/ol/style/Icon.js @@ -33,6 +33,7 @@ import ImageStyle from './Image.js'; * to provide the size of the image, with the `imgSize` option. * @property {Array} [offset=[0, 0]] Offset, which, together with the size and the offset origin, define the * sub-rectangle to use from the original icon image. + * @property {Array} [displacement=[0,0]] Displacement the icon from the center * @property {import("./IconOrigin.js").default} [offsetOrigin='top-left'] Origin of the offset: `bottom-left`, `bottom-right`, * `top-left` or `top-right`. * @property {number} [opacity=1] Opacity of the icon. @@ -84,7 +85,7 @@ class Icon extends ImageStyle { opacity: opacity, rotation: rotation, scale: scale, - offset: options.offset !== undefined ? options.offset : [0, 0], + displacement: options.displacement !== undefined ? options.displacement : [0, 0], rotateWithView: rotateWithView }); @@ -173,6 +174,11 @@ class Icon extends ImageStyle { this.iconImage_ = getIconImage( image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_); + /** + * @private + * @type {Array} + */ + this.offset_ = options.offset !== undefined ? options.offset : [0, 0]; /** * @private * @type {import("./IconOrigin.js").default} @@ -331,6 +337,7 @@ class Icon extends ImageStyle { return this.origin_; } let offset = this.offset_; + const displacement = this.getDisplacement(); if (this.offsetOrigin_ != IconOrigin.TOP_LEFT) { const size = this.getSize(); @@ -348,6 +355,8 @@ class Icon extends ImageStyle { offset[1] = iconImageSize[1] - size[1] - offset[1]; } } + offset[0] += displacement[0]; + offset[1] += displacement[1]; this.origin_ = offset; return this.origin_; } diff --git a/src/ol/style/Image.js b/src/ol/style/Image.js index a5d552b197..3e01ddc84f 100644 --- a/src/ol/style/Image.js +++ b/src/ol/style/Image.js @@ -10,7 +10,7 @@ import {abstract} from '../util.js'; * @property {boolean} rotateWithView * @property {number} rotation * @property {number} scale - * @property {Array} offset + * @property {Array} displacement */ @@ -56,7 +56,7 @@ class ImageStyle { * @private * @type {Array} */ - this.offset_ = options.offset; + this.displacement_ = options.displacement; } @@ -71,7 +71,7 @@ class ImageStyle { scale: this.getScale(), rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); } @@ -112,12 +112,12 @@ class ImageStyle { } /** - * Get the offset of the shape - * @return {Array} Shape's center offset + * Get the displacement of the shape + * @return {Array} Shape's center displacement * @api */ - getOffset() { - return this.offset_; + getDisplacement() { + return this.displacement_; } /** diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 1ab5ab500d..579008e11c 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -20,7 +20,7 @@ import ImageStyle from './Image.js'; * @property {number} [radius1] Outer radius of a star. * @property {number} [radius2] Inner radius of a star. * @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up. - * @property {Array} [offset=[0,0]] Offset of the shape + * @property {Array} [displacement=[0,0]] Offset of the shape * @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise). * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view. @@ -63,7 +63,7 @@ class RegularShape extends ImageStyle { rotateWithView: rotateWithView, rotation: options.rotation !== undefined ? options.rotation : 0, scale: 1, - offset: options.offset !== undefined ? options.offset : [0, 0] + displacement: options.displacement !== undefined ? options.displacement : [0, 0] }); /** @@ -163,7 +163,7 @@ class RegularShape extends ImageStyle { stroke: this.getStroke() ? this.getStroke().clone() : undefined, rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); @@ -356,12 +356,13 @@ class RegularShape extends ImageStyle { // canvas.width and height are rounded to the closest integer size = this.canvas_.width; const imageSize = size; + const displacement = this.getDisplacement(); this.draw_(renderOptions, context, 0, 0); this.createHitDetectionCanvas_(renderOptions); - this.anchor_ = [size / 2 - this.offset_[0], size / 2 + this.offset_[1]]; + this.anchor_ = [size / 2 - displacement[0], size / 2 + displacement[1]]; this.size_ = [size, size]; this.imageSize_ = [imageSize, imageSize]; } diff --git a/test/spec/ol/style/regularshape.test.js b/test/spec/ol/style/regularshape.test.js index 76b4a39aff..3b2c81cb1f 100644 --- a/test/spec/ol/style/regularshape.test.js +++ b/test/spec/ol/style/regularshape.test.js @@ -82,23 +82,23 @@ describe('ol.style.RegularShape', function() { expect(style.getHitDetectionImageSize()).to.eql([21, 21]); }); - it('sets default offset [0, 0]', function() { + it('sets default displacement [0, 0]', function() { const style = new RegularShape({ radius: 5 }); - expect(style.getOffset()).to.an('array'); - expect(style.getOffset()[0]).to.eql(0); - expect(style.getOffset()[1]).to.eql(0); + expect(style.getDisplacement()).to.an('array'); + expect(style.getDisplacement()[0]).to.eql(0); + expect(style.getDisplacement()[1]).to.eql(0); }); it('can use offset', function() { const style = new RegularShape({ radius: 5, - offset: [10, 20] + displacement: [10, 20] }); - expect(style.getOffset()).to.an('array'); - expect(style.getOffset()[0]).to.eql(10); - expect(style.getOffset()[1]).to.eql(20); + expect(style.getDisplacement()).to.an('array'); + expect(style.getDisplacement()[0]).to.eql(10); + expect(style.getDisplacement()[1]).to.eql(20); }); }); @@ -127,7 +127,7 @@ describe('ol.style.RegularShape', function() { }), rotation: 2, rotateWithView: true, - offest: [10, 20] + displacement: [10, 20] }); original.setOpacity(0.5); original.setScale(1.5); @@ -142,8 +142,8 @@ describe('ol.style.RegularShape', function() { expect(original.getRotateWithView()).to.eql(clone.getRotateWithView()); expect(original.getScale()).to.eql(clone.getScale()); expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); - expect(original.getOffset()[0]).to.eql(clone.getOffset()[0]); - expect(original.getOffset()[1]).to.eql(clone.getOffset()[1]); + expect(original.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]); + expect(original.getDisplacement()[1]).to.eql(clone.getDisplacement()[1]); }); it('the clone does not reference the same objects as the original', function() { @@ -153,11 +153,13 @@ describe('ol.style.RegularShape', function() { }), stroke: new Stroke({ color: '#319FD3' - }) + }), + displacement: [0, 5] }); const clone = original.clone(); expect(original.getFill()).to.not.be(clone.getFill()); expect(original.getStroke()).to.not.be(clone.getStroke()); + expect(original.getDisplacement()).to.not.be(clone.getDisplacement()); clone.getFill().setColor('#012345'); clone.getStroke().setColor('#012345');