diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 73daddb62d..24d9e4306a 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -647,6 +647,7 @@ * @typedef {Object} ol.style.StrokeOptions * @property {ol.Color|string|undefined} color Color. * @property {string|undefined} lineCap Line cap style: `butt`, `round`, or `square`. Default is `butt`. + * @property {string|undefined} lineJoin Line join style: `bevel`, `round`, or `miter`. Default is `miter`. * @property {number|undefined} width Width. * @todo stability experimental */ diff --git a/src/ol/render/canvas/canvas.js b/src/ol/render/canvas/canvas.js index 84af313747..3be7a19957 100644 --- a/src/ol/render/canvas/canvas.js +++ b/src/ol/render/canvas/canvas.js @@ -15,6 +15,12 @@ ol.render.canvas.defaultFillStyle = ol.color.fromString('black'); ol.render.canvas.defaultLineCap = 'butt'; +/** + * @const {string} + */ +ol.render.canvas.defaultLineJoin = 'miter'; + + /** * @const {ol.Color} */ diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index ef6ce4e098..3b85e6db0e 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -45,6 +45,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { * @type {{currentFillStyle: (string|undefined), * currentStrokeStyle: (string|undefined), * currentLineCap: (string|undefined), + * currentLineJoin: (string|undefined), * currentLineWidth: (number|undefined), * fillStyle: (string|undefined), * strokeStyle: (string|undefined), @@ -55,6 +56,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { * height: (number|undefined), * width: (number|undefined), * lineCap: (string|undefined), + * lineJoin: (string|undefined), * snapToPixel: (boolean|undefined), * textStyle: ol.style.Text}} */ @@ -62,6 +64,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { currentFillStyle: undefined, currentStrokeStyle: undefined, currentLineCap: undefined, + currentLineJoin: undefined, currentLineWidth: undefined, fillStyle: undefined, strokeStyle: undefined, @@ -72,6 +75,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { height: undefined, width: undefined, lineCap: undefined, + lineJoin: undefined, snapToPixel: undefined, textStyle: null }; @@ -351,11 +355,14 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = strokeStyle.color : ol.render.canvas.defaultStrokeStyle); state.lineCap = goog.isDef(strokeStyle.lineCap) ? strokeStyle.lineCap : ol.render.canvas.defaultLineCap; + state.lineJoin = goog.isDef(strokeStyle.lineJoin) ? + strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; state.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; } else { state.strokeStyle = undefined; state.lineCap = undefined; + state.lineJoin = undefined; state.lineWidth = undefined; } }; @@ -370,6 +377,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() { var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; var lineCap = state.lineCap; + var lineJoin = state.lineJoin; var lineWidth = state.lineWidth; if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) { context.fillStyle = fillStyle; @@ -378,11 +386,14 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() { if (goog.isDef(strokeStyle)) { goog.asserts.assert(goog.isDef(lineWidth)); goog.asserts.assert(goog.isDef(lineCap)); + goog.asserts.assert(goog.isDef(lineJoin)); if (state.currentStrokeStyle != strokeStyle || state.currentLineCap != lineCap || + state.currentLineJoin != lineJoin || state.currentLineWidth != lineWidth) { context.strokeStyle = strokeStyle; context.lineCap = lineCap; + context.lineJoin = lineJoin; context.lineWidth = lineWidth; } } diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 5439b20acd..21ada5dcfb 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -190,9 +190,11 @@ ol.render.canvas.Replay.prototype.replay = goog.asserts.assert(goog.isString(instruction[1])); goog.asserts.assert(goog.isNumber(instruction[2])); goog.asserts.assert(goog.isString(instruction[3])); + goog.asserts.assert(goog.isString(instruction[4])); context.strokeStyle = /** @type {string} */ (instruction[1]); context.lineWidth = /** @type {number} */ (instruction[2]); context.lineCap = /** @type {string} */ (instruction[3]); + context.lineJoin = /** @type {string} */ (instruction[4]); ++i; } else if (type == ol.render.canvas.Instruction.STROKE) { context.stroke(); @@ -459,19 +461,23 @@ ol.render.canvas.LineStringReplay = function() { * @private * @type {{currentStrokeStyle: (string|undefined), * currentLineCap: (string|undefined), + * currentLineJoin: (string|undefined), * currentLineWidth: (number|undefined), * lastStroke: number, * strokeStyle: (string|undefined), * lineCap: (string|undefined), + * lineJoin: (string|undefined), * lineWidth: (number|undefined)}|null} */ this.state_ = { currentStrokeStyle: undefined, currentLineCap: undefined, + currentLineJoin: undefined, currentLineWidth: undefined, lastStroke: 0, strokeStyle: undefined, lineCap: undefined, + lineJoin: undefined, lineWidth: undefined }; @@ -503,12 +509,15 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() { var state = this.state_; var strokeStyle = state.strokeStyle; var lineCap = state.lineCap; + var lineJoin = state.lineJoin; var lineWidth = state.lineWidth; goog.asserts.assert(goog.isDef(strokeStyle)); goog.asserts.assert(goog.isDef(lineCap)); + goog.asserts.assert(goog.isDef(lineJoin)); goog.asserts.assert(goog.isDef(lineWidth)); if (state.currentStrokeStyle != strokeStyle || state.currentLineCap != lineCap || + state.currentLineJoin != lineJoin || state.currentLineWidth != lineWidth) { if (state.lastStroke != this.coordinates.length) { this.instructions.push([ol.render.canvas.Instruction.STROKE]); @@ -516,10 +525,11 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() { } this.instructions.push( [ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth, lineCap], + strokeStyle, lineWidth, lineCap, lineJoin], [ol.render.canvas.Instruction.BEGIN_PATH]); state.currentStrokeStyle = strokeStyle; state.currentLineCap = lineCap; + state.currentLineJoin = lineJoin; state.currentLineWidth = lineWidth; } }; @@ -601,6 +611,8 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = strokeStyle.color : ol.render.canvas.defaultStrokeStyle); this.state_.lineCap = goog.isDef(strokeStyle.lineCap) ? strokeStyle.lineCap : ol.render.canvas.defaultLineCap; + this.state_.lineJoin = goog.isDef(strokeStyle.lineJoin) ? + strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; this.state_.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; }; @@ -621,20 +633,24 @@ ol.render.canvas.PolygonReplay = function() { * @type {{currentFillStyle: (string|undefined), * currentStrokeStyle: (string|undefined), * currentLineCap: (string|undefined), + * currentLineJoin: (string|undefined), * currentLineWidth: (number|undefined), * fillStyle: (string|undefined), * strokeStyle: (string|undefined), * lineCap: (string|undefined), + * lineJoin: (string|undefined), * lineWidth: (number|undefined)}|null} */ this.state_ = { currentFillStyle: undefined, currentStrokeStyle: undefined, currentLineCap: undefined, + currentLineJoin: undefined, currentLineWidth: undefined, fillStyle: undefined, strokeStyle: undefined, lineCap: undefined, + lineJoin: undefined, lineWidth: undefined }; @@ -762,11 +778,14 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = strokeStyle.color : ol.render.canvas.defaultStrokeStyle); state.lineCap = goog.isDef(strokeStyle.lineCap) ? strokeStyle.lineCap : ol.render.canvas.defaultLineCap; + state.lineJoin = goog.isDef(strokeStyle.lineJoin) ? + strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; state.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; } else { state.strokeStyle = undefined; state.lineCap = undefined; + state.lineJoin = undefined; state.lineWidth = undefined; } }; @@ -780,6 +799,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() { var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; var lineCap = state.lineCap; + var lineJoin = state.lineJoin; var lineWidth = state.lineWidth; if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) { this.instructions.push( @@ -788,15 +808,18 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() { } if (goog.isDef(strokeStyle)) { goog.asserts.assert(goog.isDef(lineCap)); + goog.asserts.assert(goog.isDef(lineJoin)); goog.asserts.assert(goog.isDef(lineWidth)); if (state.currentStrokeStyle != strokeStyle || state.currentLineCap != lineCap || + state.currentLineJoin != lineJoin || state.currentLineWidth != lineWidth) { this.instructions.push( [ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth, lineCap]); + strokeStyle, lineWidth, lineCap, lineJoin]); state.currentStrokeStyle = strokeStyle; state.currentLineCap = lineCap; + state.currentLineJoin = lineJoin; state.currentLineWidth = lineWidth; } } diff --git a/src/ol/style/strokestyle.js b/src/ol/style/strokestyle.js index 6b135de49e..754aafee25 100644 --- a/src/ol/style/strokestyle.js +++ b/src/ol/style/strokestyle.js @@ -20,6 +20,11 @@ ol.style.Stroke = function(options) { */ this.lineCap = options.lineCap; + /** + * @type {string|undefined} + */ + this.lineJoin = options.lineJoin; + /** * @type {number|undefined} */