diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 944a602458..b4d120c8b1 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -23,8 +23,8 @@ import { * @property {number} points Number of points for stars and regular polygons. In case of a polygon, the number of points * is the number of sides. * @property {number} [radius] Radius of a regular polygon. - * @property {number} [radius1] Outer radius of a star. - * @property {number} [radius2] Inner radius of a star. + * @property {number} [radius1] First radius of a star. Ignored if radius is set. + * @property {number} [radius2] Second 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} [displacement=[0,0]] Displacement of the shape * @property {import("./Stroke.js").default} [stroke] Stroke style. @@ -378,7 +378,8 @@ class RegularShape extends ImageStyle { } } - const size = 2 * (this.radius_ + strokeWidth) + 1; + const maxRadius = Math.max(this.radius_, this.radius2_ || 0); + const size = 2 * (maxRadius + strokeWidth) + 1; return { strokeStyle: strokeStyle, @@ -501,8 +502,8 @@ class RegularShape extends ImageStyle { if (points === Infinity) { context.arc(0, 0, radius, 0, 2 * Math.PI); } else { - const radius2 = this.radius2_ !== undefined ? this.radius2_ : radius; - if (radius2 !== radius) { + const radius2 = this.radius2_ === undefined ? radius : this.radius2_; + if (this.radius2_ !== undefined) { points *= 2; } const startAngle = this.angle_ - Math.PI / 2; diff --git a/test/browser/spec/ol/style/regularshape.test.js b/test/browser/spec/ol/style/regularshape.test.js index 32ec0c87b1..ce95d29a5f 100644 --- a/test/browser/spec/ol/style/regularshape.test.js +++ b/test/browser/spec/ol/style/regularshape.test.js @@ -91,6 +91,18 @@ describe('ol.style.RegularShape', function () { expect(style.getDisplacement()[0]).to.eql(0); expect(style.getDisplacement()[1]).to.eql(0); }); + it('will use the larger radius to calculate the size', function () { + let style = new RegularShape({ + radius: 10, + radius2: 5, + }); + expect(style.getSize()).to.eql([20, 20]); + style = new RegularShape({ + radius: 5, + radius2: 10, + }); + expect(style.getSize()).to.eql([20, 20]); + }); it('can use offset', function () { const style = new RegularShape({ @@ -173,4 +185,47 @@ describe('ol.style.RegularShape', function () { ); }); }); + + describe('#createPath_', function () { + let canvas; + beforeEach(function () { + canvas = { + arc: sinon.spy(), + lineTo: sinon.spy(), + closePath: sinon.spy(), + }; + }); + it('does not double the points without radius2', function () { + const style = new RegularShape({ + radius: 10, + points: 4, + }); + style.createPath_(canvas); + expect(canvas.arc.callCount).to.be(0); + expect(canvas.lineTo.callCount).to.be(4); + expect(canvas.closePath.callCount).to.be(1); + }); + it('doubles the points with radius2', function () { + const style = new RegularShape({ + radius: 10, + radius2: 12, + points: 4, + }); + style.createPath_(canvas); + expect(canvas.arc.callCount).to.be(0); + expect(canvas.lineTo.callCount).to.be(8); + expect(canvas.closePath.callCount).to.be(1); + }); + it('doubles the points when radius2 equals radius', function () { + const style = new RegularShape({ + radius: 10, + radius2: 10, + points: 4, + }); + style.createPath_(canvas); + expect(canvas.arc.callCount).to.be(0); + expect(canvas.lineTo.callCount).to.be(8); + expect(canvas.closePath.callCount).to.be(1); + }); + }); });