From 12b799cd024f62861235d3b11a68ebf4020c0a52 Mon Sep 17 00:00:00 2001 From: Julian Viereck Date: Sat, 23 Jun 2012 15:52:30 +0200 Subject: [PATCH] Use a canvas to measure the width of the text layer div instead of using the slow offsetWidth property --- web/viewer.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index d371c3242..05aec6075 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -1498,6 +1498,9 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { var renderInterval = 0; var resumeInterval = 500; // in ms + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext('2d'); + // Render the text layer, one div at a time function renderTextLayer() { if (textDivs.length === 0) { @@ -1511,9 +1514,12 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { if (textDiv.dataset.textLength > 1) { // avoid div by zero // Adjust div width to match canvas text - // Due to the .offsetWidth calls, this is slow - // This needs to come after appending to the DOM - var textScale = textDiv.dataset.canvasWidth / textDiv.offsetWidth; + + ctx.font = textDiv.style.fontSize + ' sans-serif'; + var width = ctx.measureText(textDiv.textContent).width; + + var textScale = textDiv.dataset.canvasWidth / width; + CustomStyle.setProp('transform' , textDiv, 'scale(' + textScale + ', 1)'); CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%');