From 3402d33088b067eea6cc9ddc379df2fadf855a53 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 29 Jan 2015 11:19:49 -0500 Subject: [PATCH] WIP basic high pixel density support re: openseadragon/openseadragon#541 --- src/drawer.js | 21 +++++++++++++++++++-- src/openseadragon.js | 26 ++++++++++++++++++++++++++ src/tiledimage.js | 4 ++-- src/viewport.js | 10 +++++++++- 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index cfd2c71d..3ae136de 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -108,6 +108,13 @@ $.Drawer = function( options ) { // Note that this means overlays you want to be rtl need to be explicitly set to rtl. this.container.dir = 'ltr'; + // check canvas available width and height, set canvas width and height such that the canvas backing store is set to the proper pixel density + if (this.useCanvas) { + var viewportSize = this._calculateCanvasSize(); + this.canvas.width = viewportSize.x; + this.canvas.height = viewportSize.y; + } + this.canvas.style.width = "100%"; this.canvas.style.height = "100%"; this.canvas.style.position = "absolute"; @@ -215,7 +222,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ clear: function() { this.canvas.innerHTML = ""; if ( this.useCanvas ) { - var viewportSize = this.viewport.getContainerSize(); + var viewportSize = this._calculateCanvasSize(); if( this.canvas.width != viewportSize.x || this.canvas.height != viewportSize.y ) { this.canvas.width = viewportSize.x; @@ -256,7 +263,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ if ( this.useCanvas ) { this.context.save(); this.context.lineWidth = 2; - this.context.font = 'small-caps bold 13px ariel'; + this.context.font = 'small-caps bold 13px arial'; this.context.strokeStyle = this.debugGridColor; this.context.fillStyle = this.debugGridColor; @@ -369,6 +376,16 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ tile.position.y = py; this.context.restore(); + }, + + // private + _calculateCanvasSize: function() { + var pixelDensityRatio = $.pixelDensityRatio; + var viewportSize = this.viewport.getContainerSize(); + return { + x: viewportSize.x * pixelDensityRatio, + y: viewportSize.y * pixelDensityRatio + }; } }; diff --git a/src/openseadragon.js b/src/openseadragon.js index 1db57c67..44a02ef6 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -816,6 +816,32 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ canvasElement.getContext( '2d' ) ); }()); + /** + * @private + * @inner + * @function + * @returns {Number} The device's pixel density ratio, or null if canvas isn't supported by the browser. + */ + $.pixelDensityRatio = (function () { + if ( $.supportsCanvas ) { + var context = document.createElement('canvas').getContext('2d'); + var devicePixelRatio = window.devicePixelRatio || 1; + var backingStoreRatio = context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + return devicePixelRatio / backingStoreRatio; + // var viewportSize = this.viewport.getContainerSize(); + // return { + // x: viewportSize.x * canvasDensityRatio, + // y: viewportSize.y * canvasDensityRatio, + // ratio: canvasDensityRatio + // }; + } else { + return 1; + } + }()); }( OpenSeadragon )); diff --git a/src/tiledimage.js b/src/tiledimage.js index fc444b83..34c8cd3b 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -262,7 +262,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // private _viewportToImageDelta: function( viewerX, viewerY, current ) { - var scale = current ? this._scaleSpring.current.value : this._scaleSpring.target.value; + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value) / $.pixelDensityRatio; return new $.Point(viewerX * (this.source.dimensions.x / scale), viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); }, @@ -294,7 +294,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // private _imageToViewportDelta: function( imageX, imageY, current ) { - var scale = current ? this._scaleSpring.current.value : this._scaleSpring.target.value; + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value) / $.pixelDensityRatio; return new $.Point((imageX / this.source.dimensions.x) * scale, (imageY / this.source.dimensions.y / this.contentAspectX) * scale); }, diff --git a/src/viewport.js b/src/viewport.js index 44654f7e..d1f52223 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -897,6 +897,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ deltaPixelsFromPoints: function( deltaPoints, current ) { return deltaPoints.times( this._containerInnerSize.x * this.getZoom( current ) + ).times( + $.pixelDensityRatio ); }, @@ -908,6 +910,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ deltaPointsFromPixels: function( deltaPixels, current ) { return deltaPixels.divide( this._containerInnerSize.x * this.getZoom( current ) + ).divide( + $.pixelDensityRatio ); }, @@ -928,6 +932,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ this._containerInnerSize.x / bounds.width ).plus( new $.Point(this._margins.left, this._margins.top) + ).times( + $.pixelDensityRatio ); }, @@ -938,7 +944,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ pointFromPixel: function( pixel, current ) { var bounds = this.getBounds( current ); - return pixel.minus( + return pixel.divide( + $.pixelDensityRatio + ).minus( new $.Point(this._margins.left, this._margins.top) ).divide( this._containerInnerSize.x / bounds.width