From c0df61468ffd4027381094ba1d72e16479f6c775 Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Wed, 14 Nov 2018 18:20:38 +0100 Subject: [PATCH] Move drawText along line to executor --- src/ol/render/canvas/InstructionsExecutor.js | 38 ++++++++++++++++---- src/ol/render/canvas/TextBuilder.js | 30 +++------------- 2 files changed, 35 insertions(+), 33 deletions(-) diff --git a/src/ol/render/canvas/InstructionsExecutor.js b/src/ol/render/canvas/InstructionsExecutor.js index 471e4a254a..2ce3008acc 100644 --- a/src/ol/render/canvas/InstructionsExecutor.js +++ b/src/ol/render/canvas/InstructionsExecutor.js @@ -22,7 +22,7 @@ import { import {createCanvasContext2D} from '../../dom.js'; -import {labelCache, defaultTextAlign, measureTextHeight, measureTextWidths} from '../canvas.js'; +import {labelCache, defaultTextAlign, measureTextHeight, measureTextWidth, measureTextWidths} from '../canvas.js'; /** @@ -206,6 +206,14 @@ class CanvasInstructionsExecutor { * @type {!Object} */ this.textStates = {}; + + // Adaptations + + /** + * @private + * @type {Object>} + */ + this.widths_ = {}; } @@ -697,19 +705,35 @@ class CanvasInstructionsExecutor { const overflow = /** @type {number} */ (instruction[5]); const fillKey = /** @type {string} */ (instruction[6]); const maxAngle = /** @type {number} */ (instruction[7]); - const measure = /** @type {function(string):number} */ (instruction[8]); + const measurePixelRatio = /** @type {number} */ (instruction[8]); const offsetY = /** @type {number} */ (instruction[9]); const strokeKey = /** @type {string} */ (instruction[10]); const strokeWidth = /** @type {number} */ (instruction[11]); const text = /** @type {string} */ (instruction[12]); const textKey = /** @type {string} */ (instruction[13]); - const textScale = /** @type {number} */ (instruction[14]); + const pixelRatioScale = /** @type {number} */ (instruction[14]); + + const textState = this.textStates[textKey]; + const font = textState.font; + const textScale = textState.scale; + + let widths = this.widths_[font]; + if (!widths) { + this.widths_[font] = widths = {}; + } + + const measure = function(text) { + let width = widths[text]; + if (!width) { + width = widths[text] = measureTextWidth(font, text); + } + return width * textScale * measurePixelRatio; + }; const pathLength = lineStringLength(pixelCoordinates, begin, end, 2); const textLength = measure(text); if (overflow || textLength <= pathLength) { - /** @type {import("./TextBuilder.js").default} */ - const textReplay = /** @type {?} */ (this); + const textReplay = this; const textAlign = textReplay.textStates[textKey].textAlign; const startM = (pathLength - textLength) * TEXT_ALIGN[textAlign]; const parts = drawTextOnPath( @@ -726,7 +750,7 @@ class CanvasInstructionsExecutor { this.replayImage_(context, /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label, anchorX, anchorY, declutterGroup, label.height, 1, 0, 0, - /** @type {number} */ (part[3]), textScale, false, label.width, + /** @type {number} */ (part[3]), pixelRatioScale, false, label.width, defaultPadding, null, null); } } @@ -740,7 +764,7 @@ class CanvasInstructionsExecutor { this.replayImage_(context, /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label, anchorX, anchorY, declutterGroup, label.height, 1, 0, 0, - /** @type {number} */ (part[3]), textScale, false, label.width, + /** @type {number} */ (part[3]), pixelRatioScale, false, label.width, defaultPadding, null, null); } } diff --git a/src/ol/render/canvas/TextBuilder.js b/src/ol/render/canvas/TextBuilder.js index 3586556c88..c516a99a86 100644 --- a/src/ol/render/canvas/TextBuilder.js +++ b/src/ol/render/canvas/TextBuilder.js @@ -8,7 +8,7 @@ import {intersects} from '../../extent.js'; import {matchingChunk} from '../../geom/flat/straightchunk.js'; import GeometryType from '../../geom/GeometryType.js'; import {CANVAS_LINE_DASH} from '../../has.js'; -import {labelCache, measureTextWidth, measureTextWidths, defaultTextAlign, measureTextHeight, defaultPadding, defaultLineCap, defaultLineDashOffset, defaultLineDash, defaultLineJoin, defaultFillStyle, checkFont, defaultFont, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline} from '../canvas.js'; +import {labelCache, measureTextWidths, defaultTextAlign, measureTextHeight, defaultPadding, defaultLineCap, defaultLineDashOffset, defaultLineDash, defaultLineJoin, defaultFillStyle, checkFont, defaultFont, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline} from '../canvas.js'; import CanvasInstruction from './Instruction.js'; import CanvasInstructionsBuilder from './InstructionsBuilder.js'; import {TEXT_ALIGN} from '../replay.js'; @@ -119,12 +119,6 @@ class CanvasTextBuilder extends CanvasInstructionsBuilder { */ this.strokeKey_ = ''; - /** - * @private - * @type {Object>} - */ - this.widths_ = {}; - labelCache.prune(); } @@ -409,35 +403,19 @@ class CanvasTextBuilder extends CanvasInstructionsBuilder { const offsetY = this.textOffsetY_ * pixelRatio; const text = this.text_; - const font = textState.font; const textScale = textState.scale; const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0; - let widths = this.widths_[font]; - if (!widths) { - this.widths_[font] = widths = {}; - } + this.instructions.push([CanvasInstruction.DRAW_CHARS, begin, end, baseline, declutterGroup, textState.overflow, fillKey, textState.maxAngle, - function(text) { - let width = widths[text]; - if (!width) { - width = widths[text] = measureTextWidth(font, text); - } - return width * textScale * pixelRatio; - }, + pixelRatio, offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1 ]); this.hitDetectionInstructions.push([CanvasInstruction.DRAW_CHARS, begin, end, baseline, declutterGroup, textState.overflow, fillKey, textState.maxAngle, - function(text) { - let width = widths[text]; - if (!width) { - width = widths[text] = measureTextWidth(font, text); - } - return width * textScale; - }, + 1, offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio ]); }