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

Use canvas and css width/height instead of css transform for high dpi.

Browse Source
This commit is contained in:
Brendan Dahl 2013-09-20 12:11:14 -07:00
parent 31fda50123
commit 6ef44da10b
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/page_view.js
View File

@ -357,9 +357,13 @@ var PageView = function pageView(container, id, scale,
this.canvas = canvas; this.canvas = canvas;
var scale = this.scale; var scale = this.scale;
var outputScale = getOutputScale(); var ctx = canvas.getContext('2d');
var outputScale = getOutputScale(ctx);
canvas.width = Math.floor(viewport.width) * outputScale.sx; canvas.width = Math.floor(viewport.width) * outputScale.sx;
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.height = Math.floor(viewport.height) + 'px';
var textLayerDiv = null; var textLayerDiv = null;
if (!PDFJS.disableTextLayer) { if (!PDFJS.disableTextLayer) {
@ -377,25 +381,19 @@ var PageView = function pageView(container, id, scale,
viewport: this.viewport, viewport: this.viewport,
isViewerInPresentationMode: PDFView.isPresentationMode isViewerInPresentationMode: PDFView.isPresentationMode
}) : null; }) : null;
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform' , canvas, cssScale);
CustomStyle.setProp('transformOrigin' , canvas, '0% 0%');
if (textLayerDiv) {
CustomStyle.setProp('transform' , textLayerDiv, cssScale);
CustomStyle.setProp('transformOrigin' , textLayerDiv, '0% 0%');
}
}
var ctx = canvas.getContext('2d');
// TODO(mack): use data attributes to store these // TODO(mack): use data attributes to store these
ctx._scaleX = outputScale.sx; ctx._scaleX = outputScale.sx;
ctx._scaleY = outputScale.sy; ctx._scaleY = outputScale.sy;
if (outputScale.scaled) { if (outputScale.scaled) {
ctx.scale(outputScale.sx, outputScale.sy); ctx.scale(outputScale.sx, outputScale.sy);
} }
if (outputScale.scaled && textLayerDiv) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform' , textLayerDiv, cssScale);
CustomStyle.setProp('transformOrigin' , textLayerDiv, '0% 0%');
}
//#if (FIREFOX || MOZCENTRAL) //#if (FIREFOX || MOZCENTRAL)
// // Checking if document fonts are used only once // // Checking if document fonts are used only once
// var checkIfDocumentFontsUsed = !PDFView.pdfDocument.embeddedFontsUsed; // var checkIfDocumentFontsUsed = !PDFView.pdfDocument.embeddedFontsUsed;

10
web/ui_utils.js
View File

@ -82,8 +82,14 @@ function getFileName(url) {
scales. The scaled property is set to false if scaling is scales. The scaled property is set to false if scaling is
not required, true otherwise. not required, true otherwise.
*/ */
function getOutputScale() { function getOutputScale(ctx) {
var pixelRatio = 'devicePixelRatio' in window ? window.devicePixelRatio : 1; var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var pixelRatio = devicePixelRatio / backingStoreRatio;
return { return {
sx: pixelRatio, sx: pixelRatio,
sy: pixelRatio, sy: pixelRatio,