diff --git a/src/ol/render/canvas/replay.js b/src/ol/render/canvas/replay.js index a54401fb21..37a88ca06b 100644 --- a/src/ol/render/canvas/replay.js +++ b/src/ol/render/canvas/replay.js @@ -527,10 +527,9 @@ ol.render.canvas.Replay.prototype.replay_ = function( var maxAngle = /** @type {number} */ (instruction[6]); var measure = /** @type {function(string):number} */ (instruction[7]); var offsetY = /** @type {number} */ (instruction[8]); - var strokeWidth = /** @type {number} */ (instruction[9]); - var text = /** @type {string} */ (instruction[10]); - var align = /** @type {number} */ (instruction[11]); - var textScale = /** @type {number} */ (instruction[12]); + var text = /** @type {string} */ (instruction[9]); + var align = /** @type {number} */ (instruction[10]); + var textScale = /** @type {number} */ (instruction[11]); var pathLength = ol.geom.flat.length.lineString(pixelCoordinates, begin, end, 2); var textLength = measure(text); @@ -540,11 +539,12 @@ ol.render.canvas.Replay.prototype.replay_ = function( pixelCoordinates, begin, end, 2, text, measure, startM, maxAngle, this.chars_); var numChars = text.length; if (chars) { + var fillHeight = images[images.length - 1].height; for (var c = 0, cc = images.length; c < cc; ++c) { var char = chars[c % numChars]; // x, y, rotation var label = images[c]; anchorX = label.width / 2; - anchorY = baseline * label.height + 2 * (0.5 - baseline) * strokeWidth - offsetY; + anchorY = baseline * label.height + (0.5 - baseline) * (label.height - fillHeight) - offsetY; this.replayImage_(context, char[0], char[1], label, anchorX, anchorY, label.height, 1, 0, 0, char[2], textScale, false, label.width); } diff --git a/src/ol/render/canvas/textreplay.js b/src/ol/render/canvas/textreplay.js index 4cb0204491..a8a13274b9 100644 --- a/src/ol/render/canvas/textreplay.js +++ b/src/ol/render/canvas/textreplay.js @@ -383,7 +383,6 @@ ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end) { var stroke = !!strokeState; var textState = this.textState_; var baseline = ol.render.replay.TEXT_ALIGN[textState.textBaseline]; - var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth * pixelRatio : 0; var labels = []; var text = this.text_; @@ -409,13 +408,13 @@ ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end) { begin, end, labels, baseline, textState.exceedLength, textState.maxAngle, ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, pixelRatio), - offsetY, strokeWidth, this.text_, align, this.textScale_ + offsetY, this.text_, align, this.textScale_ ]); this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_CHARS, begin, end, labels, baseline, textState.exceedLength, textState.maxAngle, ol.render.canvas.TextReplay.getTextWidth.bind(widths, context, 1), - offsetY, strokeWidth, this.text_, align, this.textScale_ / pixelRatio + offsetY, this.text_, align, this.textScale_ / pixelRatio ]); }; diff --git a/test/rendering/ol/style/expected/text-linestring-auto.png b/test/rendering/ol/style/expected/text-linestring-auto.png index fccec28273..b9fed7e3ae 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-auto.png and b/test/rendering/ol/style/expected/text-linestring-auto.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-center.png b/test/rendering/ol/style/expected/text-linestring-center.png index bed2dd4b9f..5a9b15ed15 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-center.png and b/test/rendering/ol/style/expected/text-linestring-center.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-left-nice-rotated.png b/test/rendering/ol/style/expected/text-linestring-left-nice-rotated.png index 9c989919cc..c00181f8b2 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-left-nice-rotated.png and b/test/rendering/ol/style/expected/text-linestring-left-nice-rotated.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-left-nice.png b/test/rendering/ol/style/expected/text-linestring-left-nice.png index 47ebc2cca2..623e8a1832 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-left-nice.png and b/test/rendering/ol/style/expected/text-linestring-left-nice.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-left.png b/test/rendering/ol/style/expected/text-linestring-left.png index 2f420503db..2a9a0e8bc0 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-left.png and b/test/rendering/ol/style/expected/text-linestring-left.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-nice-baseline.png b/test/rendering/ol/style/expected/text-linestring-nice-baseline.png new file mode 100644 index 0000000000..28d4ee1b53 Binary files /dev/null and b/test/rendering/ol/style/expected/text-linestring-nice-baseline.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-nice-rotated.png b/test/rendering/ol/style/expected/text-linestring-nice-rotated.png index 3350a763d6..c9fa522176 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-nice-rotated.png and b/test/rendering/ol/style/expected/text-linestring-nice-rotated.png differ diff --git a/test/rendering/ol/style/expected/text-linestring-nice.png b/test/rendering/ol/style/expected/text-linestring-nice.png index 3934d40c85..56e5446eee 100644 Binary files a/test/rendering/ol/style/expected/text-linestring-nice.png and b/test/rendering/ol/style/expected/text-linestring-nice.png differ diff --git a/test/rendering/ol/style/text.test.js b/test/rendering/ol/style/text.test.js index 8ff2357e12..cc5e3fba4f 100644 --- a/test/rendering/ol/style/text.test.js +++ b/test/rendering/ol/style/text.test.js @@ -99,7 +99,7 @@ describe('ol.rendering.style.Text', function() { var uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17]; var polygon = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17]; - function createLineString(coords, textAlign, maxAngle) { + function createLineString(coords, textAlign, maxAngle, strokeColor, strokeWidth) { var geom = new ol.geom.LineString(); geom.setFlatCoordinates('XY', coords); var style = new ol.style.Style({ @@ -113,7 +113,8 @@ describe('ol.rendering.style.Text', function() { maxAngle: maxAngle, placement: 'line', stroke: new ol.style.Stroke({ - color: 'white' + color: strokeColor || 'white', + width: strokeWidth }) }) }); @@ -282,13 +283,20 @@ describe('ol.rendering.style.Text', function() { it('renders text along a linestring', function(done) { createMap('canvas'); createLineString(nicePath); - expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.5, done); + expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.8, done); + }); + + it('aligns text along a linestring correctly with `textBaseline` option', function(done) { + createMap('canvas'); + createLineString(nicePath, undefined, undefined, 'cyan', 3); + map.getView().setResolution(0.25); + expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-baseline.png', 6.2, done); }); it('renders text along a linestring with `textAlign: \'left\'`', function(done) { createMap('canvas'); createLineString(nicePath, 'left'); - expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice.png', 2.5, done); + expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice.png', 2.8, done); }); it('renders text along a rotated linestring', function(done) {