From 94a455408363a9306e705d5d417b3e6d357c113e Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Sun, 10 Sep 2017 20:53:10 +0200 Subject: [PATCH] Find longest straight chunk when textAlign is not set --- externs/olx.js | 6 ++++-- src/ol/render/canvas/immediate.js | 10 ++++++---- src/ol/render/canvas/textreplay.js | 23 ++++++++++++++++------- src/ol/typedefs.js | 2 +- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/externs/olx.js b/externs/olx.js index cf0e8c1add..6873a3133f 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7764,7 +7764,9 @@ olx.style.TextOptions.prototype.text; /** * Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. - * Default is 'start'. + * Default is 'center' for `placement: 'point'`. For `placement: 'line'`, the + * default is to let the renderer choose a placement where `maxAngle` is not + * exceeded. * @type {string|undefined} * @api */ @@ -7773,7 +7775,7 @@ olx.style.TextOptions.prototype.textAlign; /** * Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', - * 'hanging', 'ideographic'. Default is 'alphabetic'. + * 'hanging', 'ideographic'. Default is 'middle'. * @type {string|undefined} * @api */ diff --git a/src/ol/render/canvas/immediate.js b/src/ol/render/canvas/immediate.js index d6aae61277..b3cef08778 100644 --- a/src/ol/render/canvas/immediate.js +++ b/src/ol/render/canvas/immediate.js @@ -789,21 +789,23 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta ol.render.canvas.Immediate.prototype.setContextTextState_ = function(textState) { var context = this.context_; var contextTextState = this.contextTextState_; + var textAlign = textState.textAlign ? + textState.textAlign : ol.render.canvas.defaultTextAlign; if (!contextTextState) { context.font = textState.font; - context.textAlign = textState.textAlign; + context.textAlign = textAlign; context.textBaseline = textState.textBaseline; this.contextTextState_ = { font: textState.font, - textAlign: textState.textAlign, + textAlign: textAlign, textBaseline: textState.textBaseline }; } else { if (contextTextState.font != textState.font) { contextTextState.font = context.font = textState.font; } - if (contextTextState.textAlign != textState.textAlign) { - contextTextState.textAlign = context.textAlign = textState.textAlign; + if (contextTextState.textAlign != textAlign) { + contextTextState.textAlign = textAlign; } if (contextTextState.textBaseline != textState.textBaseline) { contextTextState.textBaseline = context.textBaseline = diff --git a/src/ol/render/canvas/textreplay.js b/src/ol/render/canvas/textreplay.js index 8c0ff774dd..4cb0204491 100644 --- a/src/ol/render/canvas/textreplay.js +++ b/src/ol/render/canvas/textreplay.js @@ -3,6 +3,7 @@ goog.provide('ol.render.canvas.TextReplay'); goog.require('ol'); goog.require('ol.colorlike'); goog.require('ol.dom'); +goog.require('ol.geom.flat.straightchunk'); goog.require('ol.geom.GeometryType'); goog.require('ol.has'); goog.require('ol.render.canvas'); @@ -191,7 +192,8 @@ ol.render.canvas.TextReplay.measureTextWidths = (function() { ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) { var fillState = this.textFillState_; var strokeState = this.textStrokeState_; - if (this.text_ === '' || !this.textState_ || (!fillState && !strokeState)) { + var textState = this.textState_; + if (this.text_ === '' || !textState || (!fillState && !strokeState)) { return; } @@ -220,12 +222,20 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) { ends.push(endss[i][0]); } } + var textAlign = textState.textAlign; var flatOffset = 0; var flatEnd; for (var o = 0, oo = ends.length; o < oo; ++o) { - flatEnd = ends[o]; + if (textAlign == undefined) { + var range = ol.geom.flat.straightchunk.lineString( + textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride); + flatOffset = range[0]; + flatEnd = range[1]; + } else { + flatEnd = ends[o]; + } end = this.appendFlatCoordinates(flatCoordinates, flatOffset, flatEnd, stride, false, false); - flatOffset = flatEnd; + flatOffset = ends[o]; this.drawChars_(begin, end); begin = end; } @@ -282,7 +292,7 @@ ol.render.canvas.TextReplay.prototype.getImage_ = function(text, fill, stroke) { var fillState = this.textFillState_; var textState = this.textState_; var pixelRatio = this.pixelRatio; - var align = ol.render.replay.TEXT_ALIGN[textState.textAlign]; + var align = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign]; var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth : 0; var widths = []; @@ -340,7 +350,7 @@ ol.render.canvas.TextReplay.prototype.drawTextImage_ = function(begin, end) { var textState = this.textState_; var strokeState = this.textStrokeState_; var pixelRatio = this.pixelRatio; - var align = ol.render.replay.TEXT_ALIGN[textState.textAlign]; + var align = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign]; var baseline = ol.render.replay.TEXT_ALIGN[textState.textBaseline]; var strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0; @@ -479,8 +489,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) { var textTextBaseline = textStyle.getTextBaseline(); var font = textFont !== undefined ? textFont : ol.render.canvas.defaultFont; - var textAlign = textTextAlign !== undefined ? - textTextAlign : ol.render.canvas.defaultTextAlign; + var textAlign = textTextAlign; var textBaseline = textTextBaseline !== undefined ? textTextBaseline : ol.render.canvas.defaultTextBaseline; textState = this.textState_; diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index 098c7f410e..c3483a6170 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -90,7 +90,7 @@ ol.CanvasStrokeState; /** * @typedef {{font: string, - * textAlign: string, + * textAlign: (string|undefined), * textBaseline: string}} */ ol.CanvasTextState;