Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix css rotation for canvas and text layer.

Browse Source
This commit is contained in:
Brendan Dahl 2013-10-09 11:29:05 -07:00
parent cdcc26eedf
commit f1a6e9015f
1 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
web/page_view.js
View File

@ -111,29 +111,77 @@ var PageView = function pageView(container, id, scale,
}); });
if (USE_ONLY_CSS_ZOOM && this.canvas) { if (USE_ONLY_CSS_ZOOM && this.canvas) {
this.cssZoom(this.canvas); this.cssTransform(this.canvas);
return; return;
} else if (this.canvas && !this.zoomLayer) { } else if (this.canvas && !this.zoomLayer) {
this.zoomLayer = this.canvas.parentNode; this.zoomLayer = this.canvas.parentNode;
this.zoomLayer.style.position = 'absolute'; this.zoomLayer.style.position = 'absolute';
} }
if (this.zoomLayer) { if (this.zoomLayer) {
this.cssZoom(this.zoomLayer.firstChild); this.cssTransform(this.zoomLayer.firstChild);
} }
this.reset(); this.reset();
}; };
this.cssZoom = function pageViewRescale(canvas) { this.cssTransform = function pageCssTransform(canvas) {
// Need to adjust canvas, canvas wrapper, and page container. // Scale canvas, canvas wrapper, and page container.
var width = this.viewport.width;
var height = this.viewport.height;
canvas.style.width = canvas.parentNode.style.width = div.style.width = canvas.style.width = canvas.parentNode.style.width = div.style.width =
Math.floor(this.viewport.width) + 'px'; Math.floor(width) + 'px';
canvas.style.height = canvas.parentNode.style.height = div.style.height = canvas.style.height = canvas.parentNode.style.height = div.style.height =
Math.floor(this.viewport.height) + 'px'; Math.floor(height) + 'px';
// The canvas may have been originally rotated, so rotate relative to that.
var relativeRotation = this.viewport.rotation - canvas._viewport.rotation;
var absRotation = Math.abs(relativeRotation);
var scaleX = 1, scaleY = 1;
if (absRotation === 90 || absRotation === 270) {
// Scale x and y because of the rotation.
scaleX = height / width;
scaleY = width / height;
}
var cssTransform = 'rotate(' + relativeRotation + 'deg) ' +
'scale(' + scaleX + ',' + scaleY + ')';
CustomStyle.setProp('transform', canvas, cssTransform);
if (this.textLayer) { if (this.textLayer) {
var scale = (this.viewport.width / canvas.width); // Rotating the text layer is more complicated since the divs inside the
var cssScale = 'scale(' + scale + ', ' + scale + ')'; // the text layer are rotated.
// TODO: This could probably be simplified by drawing the text layer in
// one orientation then rotating overall.
var textRelativeRotation = this.viewport.rotation -
this.textLayer.viewport.rotation;
var textAbsRotation = Math.abs(textRelativeRotation);
var scale = (width / canvas.width);
if (textAbsRotation === 90 || textAbsRotation === 270) {
scale = width / canvas.height;
}
var textLayerDiv = this.textLayer.textLayerDiv; var textLayerDiv = this.textLayer.textLayerDiv;
CustomStyle.setProp('transform', textLayerDiv, cssScale); var transX, transY;
switch (textAbsRotation) {
case 0:
transX = transY = 0;
break;
case 90:
transX = 0;
transY = '-' + textLayerDiv.style.height;
break;
case 180:
transX = '-' + textLayerDiv.style.width;
transY = '-' + textLayerDiv.style.height;
break;
case 270:
transX = '-' + textLayerDiv.style.width;
transY = 0;
break;
default:
console.error('Bad rotation value.');
break;
}
CustomStyle.setProp('transform', textLayerDiv,
'rotate(' + textAbsRotation + 'deg) ' +
'scale(' + scale + ', ' + scale + ') ' +
'translate(' + transX + ', ' + transY + ')');
CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%'); CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%');
} }
}; };
@ -412,6 +460,8 @@ var PageView = function pageView(container, id, scale,
canvas.height = Math.floor(viewport.height * outputScale.sy); canvas.height = Math.floor(viewport.height * outputScale.sy);
canvas.style.width = Math.floor(viewport.width) + 'px'; canvas.style.width = Math.floor(viewport.width) + 'px';
canvas.style.height = Math.floor(viewport.height) + 'px'; canvas.style.height = Math.floor(viewport.height) + 'px';
// Add the viewport so it's known what it was originally drawn with.
canvas._viewport = viewport;
var textLayerDiv = null; var textLayerDiv = null;
if (!PDFJS.disableTextLayer) { if (!PDFJS.disableTextLayer) {