diff --git a/examples/geojson.js b/examples/geojson.js index e2fa8f50f4..20323b0e2d 100644 --- a/examples/geojson.js +++ b/examples/geojson.js @@ -130,6 +130,7 @@ var tmpPointFeature = new ol.Feature( var tmpStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'magenta', + lineCap: 'round', width: 5 }), image: ol.shape.renderCircle(5, diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index dd585d951a..73daddb62d 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -646,6 +646,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 {number|undefined} width Width. * @todo stability experimental */ diff --git a/src/ol/render/canvas/canvas.js b/src/ol/render/canvas/canvas.js index ec08b3e89a..84af313747 100644 --- a/src/ol/render/canvas/canvas.js +++ b/src/ol/render/canvas/canvas.js @@ -9,6 +9,12 @@ goog.require('ol.color'); ol.render.canvas.defaultFillStyle = ol.color.fromString('black'); +/** + * @const {string} + */ +ol.render.canvas.defaultLineCap = 'butt'; + + /** * @const {ol.Color} */ diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 6293f2e30d..ef6ce4e098 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -44,6 +44,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { * @private * @type {{currentFillStyle: (string|undefined), * currentStrokeStyle: (string|undefined), + * currentLineCap: (string|undefined), * currentLineWidth: (number|undefined), * fillStyle: (string|undefined), * strokeStyle: (string|undefined), @@ -53,12 +54,14 @@ ol.render.canvas.Immediate = function(context, extent, transform) { * image: (HTMLCanvasElement|HTMLVideoElement|Image), * height: (number|undefined), * width: (number|undefined), + * lineCap: (string|undefined), * snapToPixel: (boolean|undefined), * textStyle: ol.style.Text}} */ this.state_ = { currentFillStyle: undefined, currentStrokeStyle: undefined, + currentLineCap: undefined, currentLineWidth: undefined, fillStyle: undefined, strokeStyle: undefined, @@ -68,6 +71,7 @@ ol.render.canvas.Immediate = function(context, extent, transform) { image: null, height: undefined, width: undefined, + lineCap: undefined, snapToPixel: undefined, textStyle: null }; @@ -345,10 +349,13 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = if (!goog.isNull(strokeStyle)) { state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? strokeStyle.color : ol.render.canvas.defaultStrokeStyle); + state.lineCap = goog.isDef(strokeStyle.lineCap) ? + strokeStyle.lineCap : ol.render.canvas.defaultLineCap; state.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; } else { state.strokeStyle = undefined; + state.lineCap = undefined; state.lineWidth = undefined; } }; @@ -362,6 +369,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() { var context = this.context_; var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; + var lineCap = state.lineCap; var lineWidth = state.lineWidth; if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) { context.fillStyle = fillStyle; @@ -369,9 +377,12 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() { } if (goog.isDef(strokeStyle)) { goog.asserts.assert(goog.isDef(lineWidth)); + goog.asserts.assert(goog.isDef(lineCap)); if (state.currentStrokeStyle != strokeStyle || + state.currentLineCap != lineCap || state.currentLineWidth != lineWidth) { context.strokeStyle = strokeStyle; + context.lineCap = lineCap; context.lineWidth = lineWidth; } } diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 4b085cad1c..5439b20acd 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -189,8 +189,10 @@ ol.render.canvas.Replay.prototype.replay = } else if (type == ol.render.canvas.Instruction.SET_STROKE_STYLE) { goog.asserts.assert(goog.isString(instruction[1])); goog.asserts.assert(goog.isNumber(instruction[2])); + goog.asserts.assert(goog.isString(instruction[3])); context.strokeStyle = /** @type {string} */ (instruction[1]); context.lineWidth = /** @type {number} */ (instruction[2]); + context.lineCap = /** @type {string} */ (instruction[3]); ++i; } else if (type == ol.render.canvas.Instruction.STROKE) { context.stroke(); @@ -456,16 +458,20 @@ ol.render.canvas.LineStringReplay = function() { /** * @private * @type {{currentStrokeStyle: (string|undefined), + * currentLineCap: (string|undefined), * currentLineWidth: (number|undefined), * lastStroke: number, * strokeStyle: (string|undefined), + * lineCap: (string|undefined), * lineWidth: (number|undefined)}|null} */ this.state_ = { currentStrokeStyle: undefined, + currentLineCap: undefined, currentLineWidth: undefined, lastStroke: 0, strokeStyle: undefined, + lineCap: undefined, lineWidth: undefined }; @@ -496,10 +502,13 @@ ol.render.canvas.LineStringReplay.prototype.drawFlatCoordinates_ = ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() { var state = this.state_; var strokeStyle = state.strokeStyle; + var lineCap = state.lineCap; var lineWidth = state.lineWidth; goog.asserts.assert(goog.isDef(strokeStyle)); + goog.asserts.assert(goog.isDef(lineCap)); goog.asserts.assert(goog.isDef(lineWidth)); if (state.currentStrokeStyle != strokeStyle || + state.currentLineCap != lineCap || state.currentLineWidth != lineWidth) { if (state.lastStroke != this.coordinates.length) { this.instructions.push([ol.render.canvas.Instruction.STROKE]); @@ -507,9 +516,10 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() { } this.instructions.push( [ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth], + strokeStyle, lineWidth, lineCap], [ol.render.canvas.Instruction.BEGIN_PATH]); state.currentStrokeStyle = strokeStyle; + state.currentLineCap = lineCap; state.currentLineWidth = lineWidth; } }; @@ -589,6 +599,8 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = goog.asserts.assert(!goog.isNull(strokeStyle)); this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? strokeStyle.color : ol.render.canvas.defaultStrokeStyle); + this.state_.lineCap = goog.isDef(strokeStyle.lineCap) ? + strokeStyle.lineCap : ol.render.canvas.defaultLineCap; this.state_.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; }; @@ -608,17 +620,21 @@ ol.render.canvas.PolygonReplay = function() { * @private * @type {{currentFillStyle: (string|undefined), * currentStrokeStyle: (string|undefined), + * currentLineCap: (string|undefined), * currentLineWidth: (number|undefined), * fillStyle: (string|undefined), * strokeStyle: (string|undefined), + * lineCap: (string|undefined), * lineWidth: (number|undefined)}|null} */ this.state_ = { currentFillStyle: undefined, currentStrokeStyle: undefined, + currentLineCap: undefined, currentLineWidth: undefined, fillStyle: undefined, strokeStyle: undefined, + lineCap: undefined, lineWidth: undefined }; @@ -744,10 +760,13 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = if (!goog.isNull(strokeStyle)) { state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? strokeStyle.color : ol.render.canvas.defaultStrokeStyle); + state.lineCap = goog.isDef(strokeStyle.lineCap) ? + strokeStyle.lineCap : ol.render.canvas.defaultLineCap; state.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : ol.render.canvas.defaultLineWidth; } else { state.strokeStyle = undefined; + state.lineCap = undefined; state.lineWidth = undefined; } }; @@ -760,6 +779,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() { var state = this.state_; var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; + var lineCap = state.lineCap; var lineWidth = state.lineWidth; if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) { this.instructions.push( @@ -767,13 +787,16 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() { state.currentFillStyle = state.fillStyle; } if (goog.isDef(strokeStyle)) { + goog.asserts.assert(goog.isDef(lineCap)); goog.asserts.assert(goog.isDef(lineWidth)); if (state.currentStrokeStyle != strokeStyle || + state.currentLineCap != lineCap || state.currentLineWidth != lineWidth) { this.instructions.push( [ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth]); + strokeStyle, lineWidth, lineCap]); state.currentStrokeStyle = strokeStyle; + state.currentLineCap = lineCap; state.currentLineWidth = lineWidth; } } diff --git a/src/ol/style/strokestyle.js b/src/ol/style/strokestyle.js index 91fbc29352..5eb3b10634 100644 --- a/src/ol/style/strokestyle.js +++ b/src/ol/style/strokestyle.js @@ -15,6 +15,11 @@ ol.style.Stroke = function(options) { */ this.color = goog.isDef(options.color) ? options.color : null; + /** + * @type {string|undefined} + */ + this.lineCap = options.lineCap; + /** * @type {number|undefined} */