Use a canvas to measure the width of the text layer div instead of using the slow offsetWidth property

This commit is contained in:
Julian Viereck 2012-06-23 15:52:30 +02:00
parent e2b0c76585
commit 12b799cd02

View File

@ -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%');