ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rich text labels

Browse Source
This commit is contained in:
Andreas Hocevar
2022-02-21 23:25:33 +01:00
parent 1f8338d3b8
commit 18f06b8b9a
10 changed files with 313 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/render/canvas.js
+26 -11
View File
@@ -367,21 +367,36 @@ export function measureAndCacheTextWidth(font, text, cache) {
}
/**
* @param {string} font Font to use for measuring.
* @param {Array<string>} lines Lines to measure.
* @param {Array<number>} widths Array will be populated with the widths of
* each line.
* @return {number} Width of the whole text.
* @param {TextState} baseStyle Base style.
* @param {Array<string>} chunks Text chunks to measure.
* @return {{width: number, height: number, widths: Array<number>, heights: Array<number>, lineWidths: Array<number>}}} Text metrics.
*/
export function measureTextWidths(font, lines, widths) {
const numLines = lines.length;
export function getTextDimensions(baseStyle, chunks) {
const widths = [];
const heights = [];
const lineWidths = [];
let width = 0;
for (let i = 0; i < numLines; ++i) {
const currentWidth = measureTextWidth(font, lines[i]);
width = Math.max(width, currentWidth);
let lineWidth = 0;
let height = 0;
let lineHeight = 0;
for (let i = 0, ii = chunks.length; i <= ii; i += 2) {
const text = chunks[i];
if (text === '\n' || i === ii) {
width = Math.max(width, lineWidth);
lineWidths.push(lineWidth);
lineWidth = 0;
height += lineHeight;
continue;
}
const font = chunks[i + 1] || baseStyle.font;
const currentWidth = measureTextWidth(font, text);
widths.push(currentWidth);
lineWidth += currentWidth;
const currentHeight = measureTextHeight(font);
heights.push(currentHeight);
lineHeight = Math.max(lineHeight, currentHeight);
}
return width;
return {width, height, widths, heights, lineWidths};
}
/**
src/ol/render/canvas/Executor.js
+71 -30
View File
@@ -16,9 +16,8 @@ import {
defaultTextAlign,
defaultTextBaseline,
drawImageOrLabel,
getTextDimensions,
measureAndCacheTextWidth,
measureTextHeight,
measureTextWidths,
} from '../canvas.js';
import {drawTextOnPath} from '../../geom/flat/textpath.js';
import {equals} from '../../array.js';
@@ -102,6 +101,20 @@ function horizontalTextAlign(text, align) {
return TEXT_ALIGN[align];
}
/**
* @param {Array<string>} acc Accumulator.
* @param {string} line Line of text.
* @param {number} i Index
* @return {Array<string>} Accumulator.
*/
function createTextChunks(acc, line, i) {
if (i > 0) {
acc.push('\n', '');
}
acc.push(line, '');
return acc;
}
class Executor {
/**
* @param {number} resolution Resolution.
@@ -206,7 +219,7 @@ class Executor {
}
/**
* @param {string} text Text.
* @param {string|Array<string>} text Text.
* @param {string} textKey Text style key.
* @param {string} fillKey Fill style key.
* @param {string} strokeKey Stroke style key.
@@ -225,19 +238,22 @@ class Executor {
textState.scale[0] * pixelRatio,
textState.scale[1] * pixelRatio,
];
const textIsArray = Array.isArray(text);
const align = horizontalTextAlign(
text,
textIsArray ? text[0] : text,
textState.textAlign || defaultTextAlign
);
const strokeWidth =
strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
const lines = text.split('\n');
const numLines = lines.length;
const widths = [];
const width = measureTextWidths(textState.font, lines, widths);
const lineHeight = measureTextHeight(textState.font);
const height = lineHeight * numLines;
const chunks = textIsArray
? text
: text.split('\n').reduce(createTextChunks, []);
const {width, height, widths, heights, lineWidths} = getTextDimensions(
textState,
chunks
);
const renderWidth = width + strokeWidth;
const contextInstructions = [];
// make canvas 2 pixels wider to account for italic text width measurement errors
@@ -252,7 +268,6 @@ class Executor {
if (scale[0] != 1 || scale[1] != 1) {
contextInstructions.push('scale', scale);
}
contextInstructions.push('font', textState.font);
if (strokeKey) {
contextInstructions.push('strokeStyle', strokeState.strokeStyle);
contextInstructions.push('lineWidth', strokeWidth);
@@ -272,26 +287,52 @@ class Executor {
contextInstructions.push('textBaseline', 'middle');
contextInstructions.push('textAlign', 'center');
const leftRight = 0.5 - align;
const x = align * renderWidth + leftRight * strokeWidth;
let i;
if (strokeKey) {
for (i = 0; i < numLines; ++i) {
contextInstructions.push('strokeText', [
lines[i],
x + leftRight * widths[i],
0.5 * (strokeWidth + lineHeight) + i * lineHeight,
]);
let x = align * renderWidth + leftRight * strokeWidth;
const strokeInstructions = [];
const fillInstructions = [];
let lineHeight = 0;
let lineOffset = 0;
let widthHeightIndex = 0;
let lineWidthIndex = 0;
let previousFont;
for (let i = 0, ii = chunks.length; i < ii; i += 2) {
const text = chunks[i];
if (text === '\n') {
lineOffset += lineHeight;
lineHeight = 0;
x = align * renderWidth + leftRight * strokeWidth;
++lineWidthIndex;
continue;
}
}
if (fillKey) {
for (i = 0; i < numLines; ++i) {
contextInstructions.push('fillText', [
lines[i],
x + leftRight * widths[i],
0.5 * (strokeWidth + lineHeight) + i * lineHeight,
]);
const font = chunks[i + 1] || textState.font;
if (font !== previousFont) {
if (strokeKey) {
strokeInstructions.push('font', font);
}
if (fillKey) {
fillInstructions.push('font', font);
}
previousFont = font;
}
lineHeight = Math.max(lineHeight, heights[widthHeightIndex]);
const fillStrokeArgs = [
text,
x +
leftRight * widths[widthHeightIndex] +
align * (widths[widthHeightIndex] - lineWidths[lineWidthIndex]),
0.5 * (strokeWidth + lineHeight) + lineOffset,
];
x += widths[widthHeightIndex];
if (strokeKey) {
strokeInstructions.push('strokeText', fillStrokeArgs);
}
if (fillKey) {
fillInstructions.push('fillText', fillStrokeArgs);
}
++widthHeightIndex;
}
Array.prototype.push.apply(contextInstructions, strokeInstructions);
Array.prototype.push.apply(contextInstructions, fillInstructions);
this.labels_[key] = label;
return label;
}
@@ -550,7 +591,7 @@ class Executor {
/**
* @private
* @param {string} text The text to draw.
* @param {string|Array<string>} text The text to draw.
* @param {string} textKey The key of the text state.
* @param {string} strokeKey The key for the stroke state.
* @param {string} fillKey The key for the fill state.
@@ -564,7 +605,7 @@ class Executor {
const strokeState = this.strokeStates[strokeKey];
const pixelRatio = this.pixelRatio;
const align = horizontalTextAlign(
text,
Array.isArray(text) ? text[0] : text,
textState.textAlign || defaultTextAlign
);
const baseline = TEXT_ALIGN[textState.textBaseline || defaultTextBaseline];
src/ol/render/canvas/Immediate.js
+6 -1
View File
@@ -1146,7 +1146,12 @@ class CanvasImmediateRenderer extends VectorContext {
? textTextBaseline
: defaultTextBaseline,
};
this.text_ = textText !== undefined ? textText : '';
this.text_ =
textText !== undefined
? Array.isArray(textText)
? textText.reduce((acc, t, i) => (acc += i % 2 ? ' ' : t), '')
: textText
: '';
this.textOffsetX_ =
textOffsetX !== undefined ? this.pixelRatio_ * textOffsetX : 0;
this.textOffsetY_ =
src/ol/render/canvas/TextBuilder.js
+1 -1
View File
@@ -60,7 +60,7 @@ class CanvasTextBuilder extends CanvasBuilder {
/**
* @private
* @type {string}
* @type {string|Array<string>}
*/
this.text_ = '';
src/ol/style/Text.js
+7 -3
View File
@@ -27,7 +27,11 @@ const DEFAULT_FILL_COLOR = '#333';
* @property {number|import("../size.js").Size} [scale] Scale.
* @property {boolean} [rotateWithView=false] Whether to rotate the text with the view.
* @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
* @property {string} [text] Text content.
* @property {string|Array<string>} [text] Text content or rich text content. For plain text provide a string, which can
* contain line breaks (`\n`). For rich text provide an array of text/font tuples. A tuple consists of the text to
* render and the font to use (or `''` to use the text style's font). A line break has to be a separate tuple (i.e. `'\n', ''`).
* **Example:** `['foo', 'bold 10px sans-serif', ' bar', 'italic 10px sans-serif', ' baz', '']` will yield "**foo** *bar* baz".
* **Note:** Rich text is not supported for the immediate rendering API.
* @property {string} [textAlign] Text alignment. Possible values: 'left', 'right', 'center', 'end' or '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.
@@ -87,7 +91,7 @@ class Text {
/**
* @private
* @type {string|undefined}
* @type {string|Array<string>|undefined}
*/
this.text_ = options.text;
@@ -314,7 +318,7 @@ class Text {
/**
* Get the text to be rendered.
* @return {string|undefined} Text.
* @return {string|Array<string>|undefined} Text.
* @api
*/
getText() {