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

Take line-height into account when measuring text height

Browse Source
This commit is contained in:
ahocevar
2019-03-09 08:25:09 +01:00
parent d25a534dea
commit 4a7b3cde56
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/ol/render/canvas.js
View File

@@ -288,22 +288,22 @@ function getMeasureContext() {
* @return {import("../size.js").Size} Measurement. * @return {import("../size.js").Size} Measurement.
*/ */
export const measureTextHeight = (function() { export const measureTextHeight = (function() {
let span; let div;
const heights = textHeights; const heights = textHeights;
return function(font) { return function(font) {
let height = heights[font]; let height = heights[font];
if (height == undefined) { if (height == undefined) {
if (!span) { if (!div) {
span = document.createElement('span'); div = document.createElement('div');
span.textContent = 'M'; div.innerHTML = 'M';
span.style.margin = span.style.padding = '0 !important'; div.style.margin = div.style.padding = '0 !important';
span.style.position = 'absolute !important'; div.style.position = 'absolute !important';
span.style.left = '-99999px !important'; div.style.left = '-99999px !important';
} }
span.style.font = font; div.style.font = font;
document.body.appendChild(span); document.body.appendChild(div);
height = heights[font] = span.offsetHeight; height = heights[font] = div.offsetHeight;
document.body.removeChild(span); document.body.removeChild(div);
} }
return height; return height;
}; };

8
test/spec/ol/render/canvas/index.test.js
View File

@@ -76,6 +76,14 @@ describe('ol.render.canvas', function() {
}); });
describe('measureTextHeight', function() {
it('respects line-height', function() {
const height = render.measureTextHeight('12px/1.2 sans-serif');
expect(render.measureTextHeight('12px/2.4 sans-serif')).to.be.greaterThan(height);
expect(render.measureTextHeight('12px/0.1 sans-serif')).to.be.lessThan(height);
});
});
describe('rotateAtOffset', function() { describe('rotateAtOffset', function() {
it('rotates a canvas at an offset point', function() { it('rotates a canvas at an offset point', function() {