diff --git a/src/ol/render/canvas/linestringreplay.js b/src/ol/render/canvas/linestringreplay.js index 9862317eea..7741236a44 100644 --- a/src/ol/render/canvas/linestringreplay.js +++ b/src/ol/render/canvas/linestringreplay.js @@ -1,10 +1,6 @@ goog.provide('ol.render.canvas.LineStringReplay'); goog.require('ol'); -goog.require('ol.array'); -goog.require('ol.colorlike'); -goog.require('ol.extent'); -goog.require('ol.render.canvas'); goog.require('ol.render.canvas.Instruction'); goog.require('ol.render.canvas.Replay'); @@ -24,49 +20,6 @@ ol.render.canvas.LineStringReplay = function( tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) { ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree); - - /** - * @private - * @type {ol.Extent} - */ - this.bufferedMaxExtent_ = null; - - /** - * @private - * @type {{currentStrokeStyle: (ol.ColorLike|undefined), - * currentLineCap: (string|undefined), - * currentLineDash: Array., - * currentLineDashOffset: (number|undefined), - * currentLineJoin: (string|undefined), - * currentLineWidth: (number|undefined), - * currentMiterLimit: (number|undefined), - * lastStroke: (number|undefined), - * strokeStyle: (ol.ColorLike|undefined), - * lineCap: (string|undefined), - * lineDash: Array., - * lineDashOffset: (number|undefined), - * lineJoin: (string|undefined), - * lineWidth: (number|undefined), - * miterLimit: (number|undefined)}|null} - */ - this.state_ = { - currentStrokeStyle: undefined, - currentLineCap: undefined, - currentLineDash: null, - currentLineDashOffset: undefined, - currentLineJoin: undefined, - currentLineWidth: undefined, - currentMiterLimit: undefined, - lastStroke: undefined, - strokeStyle: undefined, - lineCap: undefined, - lineDash: null, - lineDashOffset: undefined, - lineJoin: undefined, - lineWidth: undefined, - miterLimit: undefined - }; - }; ol.inherits(ol.render.canvas.LineStringReplay, ol.render.canvas.Replay); @@ -91,74 +44,17 @@ ol.render.canvas.LineStringReplay.prototype.drawFlatCoordinates_ = function(flat }; -/** - * @inheritDoc - */ -ol.render.canvas.LineStringReplay.prototype.getBufferedMaxExtent = function() { - if (!this.bufferedMaxExtent_) { - this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent); - if (this.maxLineWidth > 0) { - var width = this.resolution * (this.maxLineWidth + 1) / 2; - ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_); - } - } - return this.bufferedMaxExtent_; -}; - - -/** - * @private - */ -ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() { - var state = this.state_; - var strokeStyle = state.strokeStyle; - var lineCap = state.lineCap; - var lineDash = state.lineDash; - var lineDashOffset = state.lineDashOffset; - var lineJoin = state.lineJoin; - var lineWidth = state.lineWidth; - var miterLimit = state.miterLimit; - if (state.currentStrokeStyle != strokeStyle || - state.currentLineCap != lineCap || - !ol.array.equals(state.currentLineDash, lineDash) || - state.currentLineDashOffset != lineDashOffset || - state.currentLineJoin != lineJoin || - state.currentLineWidth != lineWidth || - state.currentMiterLimit != miterLimit) { - if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) { - this.instructions.push([ol.render.canvas.Instruction.STROKE]); - state.lastStroke = this.coordinates.length; - } - state.lastStroke = 0; - this.instructions.push([ - ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit, - this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio - ], [ - ol.render.canvas.Instruction.BEGIN_PATH - ]); - state.currentStrokeStyle = strokeStyle; - state.currentLineCap = lineCap; - state.currentLineDash = lineDash; - state.currentLineDashOffset = lineDashOffset; - state.currentLineJoin = lineJoin; - state.currentLineWidth = lineWidth; - state.currentMiterLimit = miterLimit; - } -}; - - /** * @inheritDoc */ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineStringGeometry, feature) { - var state = this.state_; + var state = this.state; var strokeStyle = state.strokeStyle; var lineWidth = state.lineWidth; if (strokeStyle === undefined || lineWidth === undefined) { return; } - this.setStrokeStyle_(); + this.updateStrokeStyle(state, true); this.beginGeometry(lineStringGeometry, feature); this.hitDetectionInstructions.push([ ol.render.canvas.Instruction.SET_STROKE_STYLE, @@ -179,13 +75,13 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString * @inheritDoc */ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) { - var state = this.state_; + var state = this.state; var strokeStyle = state.strokeStyle; var lineWidth = state.lineWidth; if (strokeStyle === undefined || lineWidth === undefined) { return; } - this.setStrokeStyle_(); + this.updateStrokeStyle(state, true); this.beginGeometry(multiLineStringGeometry, feature); this.hitDetectionInstructions.push([ ol.render.canvas.Instruction.SET_STROKE_STYLE, @@ -212,44 +108,10 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi * @inheritDoc */ ol.render.canvas.LineStringReplay.prototype.finish = function() { - var state = this.state_; + var state = this.state; if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) { this.instructions.push([ol.render.canvas.Instruction.STROKE]); } this.reverseHitDetectionInstructions(); - this.state_ = null; -}; - - -/** - * @inheritDoc - */ -ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { - var strokeStyleColor = strokeStyle.getColor(); - this.state_.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ? - strokeStyleColor : ol.render.canvas.defaultStrokeStyle); - var strokeStyleLineCap = strokeStyle.getLineCap(); - this.state_.lineCap = strokeStyleLineCap !== undefined ? - strokeStyleLineCap : ol.render.canvas.defaultLineCap; - var strokeStyleLineDash = strokeStyle.getLineDash(); - this.state_.lineDash = strokeStyleLineDash ? - strokeStyleLineDash : ol.render.canvas.defaultLineDash; - var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset(); - this.state_.lineDashOffset = strokeStyleLineDashOffset ? - strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset; - var strokeStyleLineJoin = strokeStyle.getLineJoin(); - this.state_.lineJoin = strokeStyleLineJoin !== undefined ? - strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; - var strokeStyleWidth = strokeStyle.getWidth(); - this.state_.lineWidth = strokeStyleWidth !== undefined ? - strokeStyleWidth : ol.render.canvas.defaultLineWidth; - var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); - this.state_.miterLimit = strokeStyleMiterLimit !== undefined ? - strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; - - if (this.state_.lineWidth > this.maxLineWidth) { - this.maxLineWidth = this.state_.lineWidth; - // invalidate the buffered max extent cache - this.bufferedMaxExtent_ = null; - } + this.state = null; }; diff --git a/src/ol/render/canvas/polygonreplay.js b/src/ol/render/canvas/polygonreplay.js index 8d6f4192af..c3ea0a763e 100644 --- a/src/ol/render/canvas/polygonreplay.js +++ b/src/ol/render/canvas/polygonreplay.js @@ -1,10 +1,7 @@ goog.provide('ol.render.canvas.PolygonReplay'); goog.require('ol'); -goog.require('ol.array'); goog.require('ol.color'); -goog.require('ol.colorlike'); -goog.require('ol.extent'); goog.require('ol.geom.flat.simplify'); goog.require('ol.render.canvas'); goog.require('ol.render.canvas.Instruction'); @@ -26,51 +23,6 @@ ol.render.canvas.PolygonReplay = function( tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) { ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree); - - /** - * @private - * @type {ol.Extent} - */ - this.bufferedMaxExtent_ = null; - - /** - * @private - * @type {{currentFillStyle: (ol.ColorLike|undefined), - * currentStrokeStyle: (ol.ColorLike|undefined), - * currentLineCap: (string|undefined), - * currentLineDash: Array., - * currentLineDashOffset: (number|undefined), - * currentLineJoin: (string|undefined), - * currentLineWidth: (number|undefined), - * currentMiterLimit: (number|undefined), - * fillStyle: (ol.ColorLike|undefined), - * strokeStyle: (ol.ColorLike|undefined), - * lineCap: (string|undefined), - * lineDash: Array., - * lineDashOffset: (number|undefined), - * lineJoin: (string|undefined), - * lineWidth: (number|undefined), - * miterLimit: (number|undefined)}|null} - */ - this.state_ = { - currentFillStyle: undefined, - currentStrokeStyle: undefined, - currentLineCap: undefined, - currentLineDash: null, - currentLineDashOffset: undefined, - currentLineJoin: undefined, - currentLineWidth: undefined, - currentMiterLimit: undefined, - fillStyle: undefined, - strokeStyle: undefined, - lineCap: undefined, - lineDash: null, - lineDashOffset: undefined, - lineJoin: undefined, - lineWidth: undefined, - miterLimit: undefined - }; - }; ol.inherits(ol.render.canvas.PolygonReplay, ol.render.canvas.Replay); @@ -84,7 +36,7 @@ ol.inherits(ol.render.canvas.PolygonReplay, ol.render.canvas.Replay); * @return {number} End. */ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) { - var state = this.state_; + var state = this.state; var fill = state.fillStyle !== undefined; var stroke = state.strokeStyle != undefined; var numEnds = ends.length; @@ -127,7 +79,7 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCo * @inheritDoc */ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, feature) { - var state = this.state_; + var state = this.state; var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; if (fillStyle === undefined && strokeStyle === undefined) { @@ -174,7 +126,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f * @inheritDoc */ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) { - var state = this.state_; + var state = this.state; this.setFillStrokeStyles_(polygonGeometry); this.beginGeometry(polygonGeometry, feature); // always fill the polygon for hit detection @@ -201,7 +153,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry, * @inheritDoc */ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) { - var state = this.state_; + var state = this.state; var fillStyle = state.fillStyle; var strokeStyle = state.strokeStyle; if (fillStyle === undefined && strokeStyle === undefined) { @@ -239,7 +191,7 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo */ ol.render.canvas.PolygonReplay.prototype.finish = function() { this.reverseHitDetectionInstructions(); - this.state_ = null; + this.state = null; // We want to preserve topology when drawing polygons. Polygons are // simplified using quantization and point elimination. However, we might // have received a mix of quantized and non-quantized geometries, so ensure @@ -255,87 +207,13 @@ ol.render.canvas.PolygonReplay.prototype.finish = function() { }; -/** - * @inheritDoc - */ -ol.render.canvas.PolygonReplay.prototype.getBufferedMaxExtent = function() { - if (!this.bufferedMaxExtent_) { - this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent); - if (this.maxLineWidth > 0) { - var width = this.resolution * (this.maxLineWidth + 1) / 2; - ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_); - } - } - return this.bufferedMaxExtent_; -}; - - -/** - * @inheritDoc - */ -ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { - var state = this.state_; - if (fillStyle) { - var fillStyleColor = fillStyle.getColor(); - state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ? - fillStyleColor : ol.render.canvas.defaultFillStyle); - } else { - state.fillStyle = undefined; - } - if (strokeStyle) { - var strokeStyleColor = strokeStyle.getColor(); - state.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ? - strokeStyleColor : ol.render.canvas.defaultStrokeStyle); - var strokeStyleLineCap = strokeStyle.getLineCap(); - state.lineCap = strokeStyleLineCap !== undefined ? - strokeStyleLineCap : ol.render.canvas.defaultLineCap; - var strokeStyleLineDash = strokeStyle.getLineDash(); - state.lineDash = strokeStyleLineDash ? - strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash; - var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset(); - state.lineDashOffset = strokeStyleLineDashOffset ? - strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset; - var strokeStyleLineJoin = strokeStyle.getLineJoin(); - state.lineJoin = strokeStyleLineJoin !== undefined ? - strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; - var strokeStyleWidth = strokeStyle.getWidth(); - state.lineWidth = strokeStyleWidth !== undefined ? - strokeStyleWidth : ol.render.canvas.defaultLineWidth; - var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); - state.miterLimit = strokeStyleMiterLimit !== undefined ? - strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; - - if (state.lineWidth > this.maxLineWidth) { - this.maxLineWidth = state.lineWidth; - // invalidate the buffered max extent cache - this.bufferedMaxExtent_ = null; - } - } else { - state.strokeStyle = undefined; - state.lineCap = undefined; - state.lineDash = null; - state.lineDashOffset = undefined; - state.lineJoin = undefined; - state.lineWidth = undefined; - state.miterLimit = undefined; - } -}; - - /** * @private * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry. */ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometry) { - var state = this.state_; + var state = this.state; var fillStyle = state.fillStyle; - var strokeStyle = state.strokeStyle; - var lineCap = state.lineCap; - var lineDash = state.lineDash; - var lineDashOffset = state.lineDashOffset; - var lineJoin = state.lineJoin; - var lineWidth = state.lineWidth; - var miterLimit = state.miterLimit; if (fillStyle !== undefined && (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle)) { var fillInstruction = [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle]; if (typeof fillStyle !== 'string') { @@ -345,26 +223,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr this.instructions.push(fillInstruction); state.currentFillStyle = state.fillStyle; } - if (strokeStyle !== undefined) { - if (state.currentStrokeStyle != strokeStyle || - state.currentLineCap != lineCap || - !ol.array.equals(state.currentLineDash, lineDash) || - state.currentLineDashOffset != lineDashOffset || - state.currentLineJoin != lineJoin || - state.currentLineWidth != lineWidth || - state.currentMiterLimit != miterLimit) { - this.instructions.push([ - ol.render.canvas.Instruction.SET_STROKE_STYLE, - strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit, - this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio - ]); - state.currentStrokeStyle = strokeStyle; - state.currentLineCap = lineCap; - state.currentLineDash = lineDash; - state.currentLineDashOffset = lineDashOffset; - state.currentLineJoin = lineJoin; - state.currentLineWidth = lineWidth; - state.currentMiterLimit = miterLimit; - } + if (state.strokeStyle !== undefined) { + this.updateStrokeStyle(state, false); } }; diff --git a/src/ol/render/canvas/replay.js b/src/ol/render/canvas/replay.js index 15075c158e..b7159d814e 100644 --- a/src/ol/render/canvas/replay.js +++ b/src/ol/render/canvas/replay.js @@ -2,6 +2,7 @@ goog.provide('ol.render.canvas.Replay'); goog.require('ol'); goog.require('ol.array'); +goog.require('ol.colorlike'); goog.require('ol.extent'); goog.require('ol.extent.Relationship'); goog.require('ol.geom.GeometryType'); @@ -98,6 +99,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio, */ this.beginGeometryInstruction2_ = null; + /** + * @private + * @type {ol.Extent} + */ + this.bufferedMaxExtent_ = null; + /** * @protected * @type {Array.<*>} @@ -134,6 +141,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio, */ this.pixelCoordinates_ = null; + /** + * @protected + * @type {ol.CanvasFillStrokeState} + */ + this.state = /** @type {ol.CanvasFillStrokeState} */ ({}); + /** * @private * @type {!ol.Transform} @@ -782,6 +795,103 @@ ol.render.canvas.Replay.prototype.reverseHitDetectionInstructions = function() { }; +/** + * @inheritDoc + */ +ol.render.canvas.Replay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { + var state = this.state; + if (fillStyle) { + var fillStyleColor = fillStyle.getColor(); + state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ? + fillStyleColor : ol.render.canvas.defaultFillStyle); + } else { + state.fillStyle = undefined; + } + if (strokeStyle) { + var strokeStyleColor = strokeStyle.getColor(); + state.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ? + strokeStyleColor : ol.render.canvas.defaultStrokeStyle); + var strokeStyleLineCap = strokeStyle.getLineCap(); + state.lineCap = strokeStyleLineCap !== undefined ? + strokeStyleLineCap : ol.render.canvas.defaultLineCap; + var strokeStyleLineDash = strokeStyle.getLineDash(); + state.lineDash = strokeStyleLineDash ? + strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash; + var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset(); + state.lineDashOffset = strokeStyleLineDashOffset ? + strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset; + var strokeStyleLineJoin = strokeStyle.getLineJoin(); + state.lineJoin = strokeStyleLineJoin !== undefined ? + strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; + var strokeStyleWidth = strokeStyle.getWidth(); + state.lineWidth = strokeStyleWidth !== undefined ? + strokeStyleWidth : ol.render.canvas.defaultLineWidth; + var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); + state.miterLimit = strokeStyleMiterLimit !== undefined ? + strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; + + if (state.lineWidth > this.maxLineWidth) { + this.maxLineWidth = state.lineWidth; + // invalidate the buffered max extent cache + this.bufferedMaxExtent_ = null; + } + } else { + state.strokeStyle = undefined; + state.lineCap = undefined; + state.lineDash = null; + state.lineDashOffset = undefined; + state.lineJoin = undefined; + state.lineWidth = undefined; + state.miterLimit = undefined; + } +}; + + +/** + * @param {ol.CanvasFillStrokeState} state State. + * @param {boolean} managePath Manage stoke() - beginPath() for linestrings. + */ +ol.render.canvas.Replay.prototype.updateStrokeStyle = function(state, managePath) { + var strokeStyle = state.strokeStyle; + var lineCap = state.lineCap; + var lineDash = state.lineDash; + var lineDashOffset = state.lineDashOffset; + var lineJoin = state.lineJoin; + var lineWidth = state.lineWidth; + var miterLimit = state.miterLimit; + if (state.currentStrokeStyle != strokeStyle || + state.currentLineCap != lineCap || + !ol.array.equals(state.currentLineDash, lineDash) || + state.currentLineDashOffset != lineDashOffset || + state.currentLineJoin != lineJoin || + state.currentLineWidth != lineWidth || + state.currentMiterLimit != miterLimit) { + if (managePath) { + if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) { + this.instructions.push([ol.render.canvas.Instruction.STROKE]); + state.lastStroke = this.coordinates.length; + } + state.lastStroke = 0; + } + this.instructions.push([ + ol.render.canvas.Instruction.SET_STROKE_STYLE, + strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit, + this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio + ]); + if (managePath) { + this.instructions.push([ol.render.canvas.Instruction.BEGIN_PATH]); + } + state.currentStrokeStyle = strokeStyle; + state.currentLineCap = lineCap; + state.currentLineDash = lineDash; + state.currentLineDashOffset = lineDashOffset; + state.currentLineJoin = lineJoin; + state.currentLineWidth = lineWidth; + state.currentMiterLimit = miterLimit; + } +}; + + /** * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry. * @param {ol.Feature|ol.render.Feature} feature Feature. @@ -812,5 +922,12 @@ ol.render.canvas.Replay.prototype.finish = ol.nullFunction; * @protected */ ol.render.canvas.Replay.prototype.getBufferedMaxExtent = function() { - return this.maxExtent; + if (!this.bufferedMaxExtent_) { + this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent); + if (this.maxLineWidth > 0) { + var width = this.resolution * (this.maxLineWidth + 1) / 2; + ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_); + } + } + return this.bufferedMaxExtent_; }; diff --git a/src/ol/render/canvas/textreplay.js b/src/ol/render/canvas/textreplay.js index c4a158d241..2588bc52fb 100644 --- a/src/ol/render/canvas/textreplay.js +++ b/src/ol/render/canvas/textreplay.js @@ -72,12 +72,6 @@ ol.render.canvas.TextReplay = function( */ this.textRotation_ = 0; - /** - * @private - * @type {number} - */ - this.textScale_ = 0; - /** * @private * @type {?ol.CanvasFillState} @@ -92,9 +86,9 @@ ol.render.canvas.TextReplay = function( /** * @private - * @type {?ol.CanvasTextState} + * @type {ol.CanvasTextState} */ - this.textState_ = null; + this.textState_ = /** @type {ol.CanvasTextState} */ ({}); /** * @private @@ -210,7 +204,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) { var stride = 2; var i, ii; - if (this.textState_.placement === ol.style.TextPlacement.LINE) { + if (textState.placement === ol.style.TextPlacement.LINE) { if (!ol.extent.intersects(this.getBufferedMaxExtent(), geometry.getExtent())) { return; } @@ -318,7 +312,7 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) { var fillState = this.textFillState_; var textState = this.textState_; var pixelRatio = this.pixelRatio; - var scale = this.textScale_ * pixelRatio; + var scale = textState.scale * pixelRatio; var align = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign]; var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth : 0; @@ -419,7 +413,7 @@ ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end, declutte var textAlign = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign]; var text = this.text_; var font = textState.font; - var textScale = this.textScale_; + var textScale = textState.scale; var strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0; var widths = this.widths_; this.instructions.push([ol.render.canvas.Instruction.DRAW_CHARS, @@ -458,95 +452,72 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle, declutt this.text_ = ''; } else { this.declutterGroup_ = /** @type {ol.DeclutterGroup} */ (declutterGroup); + var textFillStyle = textStyle.getFill(); if (!textFillStyle) { fillState = this.textFillState_ = null; } else { - var textFillStyleColor = textFillStyle.getColor(); - var fillStyle = ol.colorlike.asColorLike(textFillStyleColor ? - textFillStyleColor : ol.render.canvas.defaultFillStyle); fillState = this.textFillState_; if (!fillState) { fillState = this.textFillState_ = /** @type {ol.CanvasFillState} */ ({}); } - fillState.fillStyle = fillStyle; + fillState.fillStyle = ol.colorlike.asColorLike( + textFillStyle.getColor() || ol.render.canvas.defaultFillStyle); } + var textStrokeStyle = textStyle.getStroke(); if (!textStrokeStyle) { strokeState = this.textStrokeState_ = null; } else { - var textStrokeStyleColor = textStrokeStyle.getColor(); - var textStrokeStyleLineCap = textStrokeStyle.getLineCap(); - var textStrokeStyleLineDash = textStrokeStyle.getLineDash(); - var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset(); - var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin(); - var textStrokeStyleWidth = textStrokeStyle.getWidth(); - var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit(); - var lineCap = textStrokeStyleLineCap !== undefined ? - textStrokeStyleLineCap : ol.render.canvas.defaultLineCap; - var lineDash = textStrokeStyleLineDash ? - textStrokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash; - var lineDashOffset = textStrokeStyleLineDashOffset !== undefined ? - textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset; - var lineJoin = textStrokeStyleLineJoin !== undefined ? - textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin; - var lineWidth = textStrokeStyleWidth !== undefined ? - textStrokeStyleWidth : ol.render.canvas.defaultLineWidth; - var miterLimit = textStrokeStyleMiterLimit !== undefined ? - textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; - var strokeStyle = ol.colorlike.asColorLike(textStrokeStyleColor ? - textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle); strokeState = this.textStrokeState_; if (!strokeState) { strokeState = this.textStrokeState_ = /** @type {ol.CanvasStrokeState} */ ({}); } - strokeState.lineCap = lineCap; - strokeState.lineDash = lineDash; - strokeState.lineDashOffset = lineDashOffset; - strokeState.lineJoin = lineJoin; - strokeState.lineWidth = lineWidth; - strokeState.miterLimit = miterLimit; - strokeState.strokeStyle = strokeStyle; + var lineDash = textStrokeStyle.getLineDash(); + var lineDashOffset = textStrokeStyle.getLineDashOffset(); + var lineWidth = textStrokeStyle.getWidth(); + var miterLimit = textStrokeStyle.getMiterLimit(); + strokeState.lineCap = textStrokeStyle.getLineCap() || ol.render.canvas.defaultLineCap; + strokeState.lineDash = lineDash ? lineDash.slice() : ol.render.canvas.defaultLineDash; + strokeState.lineDashOffset = + lineDashOffset === undefined ? ol.render.canvas.defaultLineDashOffset : lineDashOffset; + strokeState.lineJoin = textStrokeStyle.getLineJoin() || ol.render.canvas.defaultLineJoin; + strokeState.lineWidth = + lineWidth === undefined ? ol.render.canvas.defaultLineWidth : lineWidth; + strokeState.miterLimit = + miterLimit === undefined ? ol.render.canvas.defaultMiterLimit : miterLimit; + strokeState.strokeStyle = ol.colorlike.asColorLike( + textStrokeStyle.getColor() || ol.render.canvas.defaultStrokeStyle); } - var textFont = textStyle.getFont(); - var textOffsetX = textStyle.getOffsetX(); - var textOffsetY = textStyle.getOffsetY(); - var textRotateWithView = textStyle.getRotateWithView(); - var textRotation = textStyle.getRotation(); - var textScale = textStyle.getScale(); - var textText = textStyle.getText(); - var textTextAlign = textStyle.getTextAlign(); - var textTextBaseline = textStyle.getTextBaseline(); - var font = textFont !== undefined ? - textFont : ol.render.canvas.defaultFont; - var textAlign = textTextAlign; - var textBaseline = textTextBaseline !== undefined ? - textTextBaseline : ol.render.canvas.defaultTextBaseline; + textState = this.textState_; - if (!textState) { - textState = this.textState_ = /** @type {ol.CanvasTextState} */ ({}); - } + var font = textStyle.getFont() || ol.render.canvas.defaultFont; ol.render.canvas.checkFont(font); + var textScale = textStyle.getScale(); textState.exceedLength = textStyle.getExceedLength(); textState.font = font; textState.maxAngle = textStyle.getMaxAngle(); textState.placement = textStyle.getPlacement(); - textState.textAlign = textAlign; - textState.textBaseline = textBaseline; + textState.textAlign = textStyle.getTextAlign(); + textState.textBaseline = textStyle.getTextBaseline() || ol.render.canvas.defaultTextBaseline; + textState.scale = textScale === undefined ? 1 : textScale; - this.text_ = textText !== undefined ? textText : ''; - this.textOffsetX_ = textOffsetX !== undefined ? textOffsetX : 0; - this.textOffsetY_ = textOffsetY !== undefined ? textOffsetY : 0; - this.textRotateWithView_ = textRotateWithView !== undefined ? textRotateWithView : false; - this.textRotation_ = textRotation !== undefined ? textRotation : 0; - this.textScale_ = textScale !== undefined ? textScale : 1; + var textOffsetX = textStyle.getOffsetX(); + var textOffsetY = textStyle.getOffsetY(); + var textRotateWithView = textStyle.getRotateWithView(); + var textRotation = textStyle.getRotation(); + this.text_ = textStyle.getText() || ''; + this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX; + this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY; + this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView; + this.textRotation_ = textRotation === undefined ? 0 : textRotation; this.strokeKey_ = strokeState ? (typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : ol.getUid(strokeState.strokeStyle)) + strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth + strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' : ''; - this.textKey_ = textState.font + (textState.textAlign || '?') + this.textScale_; + this.textKey_ = textState.font + (textState.textAlign || '?') + textState.scale; this.fillKey_ = fillState ? (typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + ol.getUid(fillState.fillStyle))) : ''; diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index 761e0d0e1d..69aa608ff5 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -86,6 +86,28 @@ ol.CanvasFillState; ol.CanvasFunctionType; +/** + * @typedef {{currentFillStyle: (ol.ColorLike|undefined), + * currentStrokeStyle: (ol.ColorLike|undefined), + * currentLineCap: (string|undefined), + * currentLineDash: Array., + * currentLineDashOffset: (number|undefined), + * currentLineJoin: (string|undefined), + * currentLineWidth: (number|undefined), + * currentMiterLimit: (number|undefined), + * lastStroke: (number|undefined), + * fillStyle: (ol.ColorLike|undefined), + * strokeStyle: (ol.ColorLike|undefined), + * lineCap: (string|undefined), + * lineDash: Array., + * lineDashOffset: (number|undefined), + * lineJoin: (string|undefined), + * lineWidth: (number|undefined), + * miterLimit: (number|undefined)}|null} + */ +ol.CanvasFillStrokeState; + + /** * @typedef {{lineCap: string, * lineDash: Array.,