From 10627e56eb48c5c9aae3daab7f1cb52c7a5ba442 Mon Sep 17 00:00:00 2001 From: Kevin Kwok Date: Wed, 2 Apr 2014 22:21:39 -0400 Subject: [PATCH] Added support for HiDPI displays --- .../public/js/libs/pdfListView/PdfListView.js | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/services/web/public/js/libs/pdfListView/PdfListView.js b/services/web/public/js/libs/pdfListView/PdfListView.js index 13e2cb83c8..539a574973 100644 --- a/services/web/public/js/libs/pdfListView/PdfListView.js +++ b/services/web/public/js/libs/pdfListView/PdfListView.js @@ -445,6 +445,7 @@ var RenderingStates = { var idCounter = 0; + /** * The view for a single page. */ @@ -477,16 +478,30 @@ PageView.prototype = { // Only change the width/height property of the canvas if it really // changed. Every assignment to the width/height property clears the // content of the canvas. + + var outputScale = this.getOutputScale(); + + var scaledWidth = (Math.floor(viewport.width) * outputScale.sx) | 0; + var scaledHeight = (Math.floor(viewport.height) * outputScale.sy) | 0; + var newWidth = Math.floor(viewport.width); var newHeight = Math.floor(viewport.height); + if (this.canvas.width !== newWidth) { - this.canvas.width = newWidth; + this.canvas.width = scaledWidth; + this.canvas.style.width = newWidth + 'px'; this.resetRenderState(); } if (this.canvas.height !== newHeight) { - this.canvas.height = newHeight; + this.canvas.height = scaledHeight; + this.canvas.style.height = newHeight + 'px'; this.resetRenderState(); } + + if(outputScale.scaled){ + var ctx = this.getCanvasContext() + ctx.scale(outputScale.sx, outputScale.sy) + } this.width = viewport.width; this.height = viewport.height; @@ -523,6 +538,28 @@ PageView.prototype = { return this.canvas.getContext('2d'); }, + /** + * Returns scale factor for the canvas. It makes sense for the HiDPI displays. + * @return {Object} The object with horizontal (sx) and vertical (sy) + scales. The scaled property is set to false if scaling is + not required, true otherwise. + */ + + getOutputScale: function(){ + var ctx = this.getCanvasContext() + var devicePixelRatio = window.devicePixelRatio || 1; + var backingStoreRatio = ctx.webkitBackingStorePixelRatio || + ctx.mozBackingStorePixelRatio || + ctx.msBackingStorePixelRatio || + ctx.oBackingStorePixelRatio || + ctx.backingStorePixelRatio || 1; + var pixelRatio = devicePixelRatio / backingStoreRatio; + return { + sx: pixelRatio, + sy: pixelRatio, + scaled: pixelRatio != 1 + }; + }, createNewCanvas: function() { if (this.canvas) { this.dom.removeChild(this.canvas);