diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 710a7d924e..0a06c5c86a 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -1021,6 +1021,10 @@ /** * @typedef {Object} olx.style.TextOptions * @property {string|undefined} font Font. + * @property {number|undefined} offsetX Horizontal text offset in pixels. + * A positive will shift the text right. Default is `0`. + * @property {number|undefined} offsetY Vertical text offset in pixels. + * A positive will shift the text down. Default is `0`. * @property {number|undefined} scale Scale. * @property {number|undefined} rotation Rotation. * @property {string|undefined} text Text. diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 933724d370..d92c5734a1 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -164,6 +164,18 @@ ol.render.canvas.Immediate = */ this.text_ = ''; + /** + * @private + * @type {number} + */ + this.textOffsetX_ = 0; + + /** + * @private + * @type {number} + */ + this.textOffsetY_ = 0; + /** * @private * @type {number} @@ -293,8 +305,8 @@ ol.render.canvas.Immediate.prototype.drawText_ = flatCoordinates, stride, this.transform_, this.pixelCoordinates_); var context = this.context_; for (; offset < end; offset += stride) { - var x = pixelCoordinates[offset]; - var y = pixelCoordinates[offset + 1]; + var x = pixelCoordinates[offset] + this.textOffsetX_; + var y = pixelCoordinates[offset + 1] + this.textOffsetY_; if (this.textRotation_ !== 0 || this.textScale_ != 1) { var localTransform = ol.vec.Mat4.makeTransform2D(this.tmpLocalTransform_, x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y); @@ -865,6 +877,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) { }; } var textFont = textStyle.getFont(); + var textOffsetX = textStyle.getOffsetX(); + var textOffsetY = textStyle.getOffsetY(); var textRotation = textStyle.getRotation(); var textScale = textStyle.getScale(); var textText = textStyle.getText(); @@ -879,6 +893,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) { textTextBaseline : ol.render.canvas.defaultTextBaseline }; this.text_ = goog.isDef(textText) ? textText : ''; + this.textOffsetX_ = goog.isDef(textOffsetX) ? textOffsetX : 0; + this.textOffsetY_ = goog.isDef(textOffsetY) ? textOffsetY : 0; this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0; this.textScale_ = this.pixelRatio_ * (goog.isDef(textScale) ? textScale : 1); diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 3e4444861e..e6d641c1f9 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -325,16 +325,20 @@ ol.render.canvas.Replay.prototype.replay_ = function( goog.asserts.assert(goog.isString(instruction[3])); text = /** @type {string} */ (instruction[3]); goog.asserts.assert(goog.isNumber(instruction[4])); - rotation = /** @type {number} */ (instruction[4]); + var offsetX = /** @type {number} */ (instruction[4]); goog.asserts.assert(goog.isNumber(instruction[5])); - scale = /** @type {number} */ (instruction[5]) * pixelRatio; - goog.asserts.assert(goog.isBoolean(instruction[6])); - fill = /** @type {boolean} */ (instruction[6]); - goog.asserts.assert(goog.isBoolean(instruction[7])); - stroke = /** @type {boolean} */ (instruction[7]); + var offsetY = /** @type {number} */ (instruction[5]); + goog.asserts.assert(goog.isNumber(instruction[6])); + rotation = /** @type {number} */ (instruction[6]); + goog.asserts.assert(goog.isNumber(instruction[7])); + scale = /** @type {number} */ (instruction[7]) * pixelRatio; + goog.asserts.assert(goog.isBoolean(instruction[8])); + fill = /** @type {boolean} */ (instruction[8]); + goog.asserts.assert(goog.isBoolean(instruction[9])); + stroke = /** @type {boolean} */ (instruction[9]); for (; d < dd; d += 2) { - x = pixelCoordinates[d]; - y = pixelCoordinates[d + 1]; + x = pixelCoordinates[d] + offsetX; + y = pixelCoordinates[d + 1] + offsetY; if (scale != 1 || rotation !== 0) { ol.vec.Mat4.makeTransform2D( localTransform, x, y, scale, scale, rotation, -x, -y); @@ -1437,6 +1441,18 @@ ol.render.canvas.TextReplay = function(tolerance, maxExtent) { */ this.text_ = ''; + /** + * @private + * @type {number} + */ + this.textOffsetX_ = 0; + + /** + * @private + * @type {number} + */ + this.textOffsetY_ = 0; + /** * @private * @type {number} @@ -1499,7 +1515,8 @@ ol.render.canvas.TextReplay.prototype.drawText = var stroke = !goog.isNull(this.textStrokeState_); var drawTextInstruction = [ ol.render.canvas.Instruction.DRAW_TEXT, myBegin, myEnd, this.text_, - this.textRotation_, this.textScale_, fill, stroke]; + this.textOffsetX_, this.textOffsetY_, this.textRotation_, this.textScale_, + fill, stroke]; this.instructions.push(drawTextInstruction); this.hitDetectionInstructions.push(drawTextInstruction); this.endGeometry(geometry, data); @@ -1670,6 +1687,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) { } } var textFont = textStyle.getFont(); + var textOffsetX = textStyle.getOffsetX(); + var textOffsetY = textStyle.getOffsetY(); var textRotation = textStyle.getRotation(); var textScale = textStyle.getScale(); var textText = textStyle.getText(); @@ -1694,6 +1713,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) { textState.textBaseline = textBaseline; } this.text_ = goog.isDef(textText) ? textText : ''; + this.textOffsetX_ = goog.isDef(textOffsetX) ? textOffsetX : 0; + this.textOffsetY_ = goog.isDef(textOffsetY) ? textOffsetY : 0; this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0; this.textScale_ = goog.isDef(textScale) ? textScale : 1; } diff --git a/src/ol/style/textstyle.js b/src/ol/style/textstyle.js index d6b2cecbd1..da9bedee27 100644 --- a/src/ol/style/textstyle.js +++ b/src/ol/style/textstyle.js @@ -57,6 +57,18 @@ ol.style.Text = function(opt_options) { * @type {ol.style.Stroke} */ this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null; + + /** + * @private + * @type {number} + */ + this.offsetX_ = goog.isDef(options.offsetX) ? options.offsetX : 0; + + /** + * @private + * @type {number} + */ + this.offsetY_ = goog.isDef(options.offsetY) ? options.offsetY : 0; }; @@ -68,6 +80,22 @@ ol.style.Text.prototype.getFont = function() { }; +/** + * @return {number} Horizontal text offset. + */ +ol.style.Text.prototype.getOffsetX = function() { + return this.offsetX_; +}; + + +/** + * @return {number} Vertical text offset. + */ +ol.style.Text.prototype.getOffsetY = function() { + return this.offsetY_; +}; + + /** * @return {ol.style.Fill} Fill style. */