Merge pull request #5137 from CodingFabian/optimize-textbuilder-renderLayer
Optimize TextLayerBuilder_renderLayer() for text heavy documents.
This commit is contained in:
commit
666cf02f91
@ -56,20 +56,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var lastFontSize;
|
||||||
|
var lastFontFamily;
|
||||||
for (var i = 0; i < textDivsLength; i++) {
|
for (var i = 0; i < textDivsLength; i++) {
|
||||||
var textDiv = textDivs[i];
|
var textDiv = textDivs[i];
|
||||||
if (textDiv.dataset.isWhitespace !== undefined) {
|
if (textDiv.dataset.isWhitespace !== undefined) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.font = textDiv.style.fontSize + ' ' + textDiv.style.fontFamily;
|
var fontSize = textDiv.style.fontSize;
|
||||||
|
var fontFamily = textDiv.style.fontFamily;
|
||||||
|
|
||||||
|
// Only build font string and set to context if different from last.
|
||||||
|
if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
|
||||||
|
ctx.font = fontSize + ' ' + fontFamily;
|
||||||
|
lastFontSize = fontSize;
|
||||||
|
lastFontFamily = fontFamily;
|
||||||
|
}
|
||||||
|
|
||||||
var width = ctx.measureText(textDiv.textContent).width;
|
var width = ctx.measureText(textDiv.textContent).width;
|
||||||
if (width > 0) {
|
if (width > 0) {
|
||||||
textLayerFrag.appendChild(textDiv);
|
textLayerFrag.appendChild(textDiv);
|
||||||
|
// Dataset values come of type string.
|
||||||
var textScale = textDiv.dataset.canvasWidth / width;
|
var textScale = textDiv.dataset.canvasWidth / width;
|
||||||
var rotation = textDiv.dataset.angle;
|
var rotation = textDiv.dataset.angle;
|
||||||
var transform = 'scale(' + textScale + ', 1)';
|
var transform = 'scale(' + textScale + ', 1)';
|
||||||
|
if (rotation) {
|
||||||
transform = 'rotate(' + rotation + 'deg) ' + transform;
|
transform = 'rotate(' + rotation + 'deg) ' + transform;
|
||||||
|
}
|
||||||
CustomStyle.setProp('transform' , textDiv, transform);
|
CustomStyle.setProp('transform' , textDiv, transform);
|
||||||
CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%');
|
CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%');
|
||||||
}
|
}
|
||||||
@ -114,18 +128,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
|
|||||||
angle += Math.PI / 2;
|
angle += Math.PI / 2;
|
||||||
}
|
}
|
||||||
var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
|
var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
|
||||||
var fontAscent = (style.ascent ? style.ascent * fontHeight :
|
var fontAscent = fontHeight;
|
||||||
(style.descent ? (1 + style.descent) * fontHeight : fontHeight));
|
if (style.ascent) {
|
||||||
|
fontAscent = style.ascent * fontAscent;
|
||||||
|
} else if (style.descent) {
|
||||||
|
fontAscent = (1 + style.descent) * fontAscent;
|
||||||
|
}
|
||||||
|
|
||||||
|
var left;
|
||||||
|
var top;
|
||||||
|
if (angle === 0) {
|
||||||
|
left = tx[4];
|
||||||
|
top = tx[5] - fontAscent;
|
||||||
|
} else {
|
||||||
|
left = tx[4] + (fontAscent * Math.sin(angle));
|
||||||
|
top = tx[5] - (fontAscent * Math.cos(angle));
|
||||||
|
}
|
||||||
textDiv.style.position = 'absolute';
|
textDiv.style.position = 'absolute';
|
||||||
textDiv.style.left = (tx[4] + (fontAscent * Math.sin(angle))) + 'px';
|
textDiv.style.left = left + 'px';
|
||||||
textDiv.style.top = (tx[5] - (fontAscent * Math.cos(angle))) + 'px';
|
textDiv.style.top = top + 'px';
|
||||||
textDiv.style.fontSize = fontHeight + 'px';
|
textDiv.style.fontSize = fontHeight + 'px';
|
||||||
textDiv.style.fontFamily = style.fontFamily;
|
textDiv.style.fontFamily = style.fontFamily;
|
||||||
|
|
||||||
textDiv.textContent = geom.str;
|
textDiv.textContent = geom.str;
|
||||||
textDiv.dataset.fontName = geom.fontName;
|
textDiv.dataset.fontName = geom.fontName;
|
||||||
|
// Storing into dataset will convert number into string.
|
||||||
|
if (angle !== 0) {
|
||||||
textDiv.dataset.angle = angle * (180 / Math.PI);
|
textDiv.dataset.angle = angle * (180 / Math.PI);
|
||||||
|
}
|
||||||
if (style.vertical) {
|
if (style.vertical) {
|
||||||
textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
|
textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
|
||||||
} else {
|
} else {
|
||||||
@ -324,4 +354,3 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
|
|||||||
};
|
};
|
||||||
return TextLayerBuilder;
|
return TextLayerBuilder;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user