Add lineCap property to ol.style.Stroke

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,

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
  */

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}
  */

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;
     }
   }

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;
     }
   }

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}
    */