mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #583 from wesleyfok/collections

Browse Source 
WIP basic high pixel density support re: openseadragon/openseadragon#541
This commit is contained in:
Ian Gilman 2015-02-04 09:10:50 -08:00
commit bd1dad7829
4 changed files with 83 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/drawer.js
View File

@ -108,6 +108,13 @@ $.Drawer = function( options ) {
// Note that this means overlays you want to be rtl need to be explicitly set to rtl. // Note that this means overlays you want to be rtl need to be explicitly set to rtl.
this.container.dir = 'ltr'; 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.width = "100%";
this.canvas.style.height = "100%"; this.canvas.style.height = "100%";
this.canvas.style.position = "absolute"; this.canvas.style.position = "absolute";
@ -215,7 +222,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
clear: function() { clear: function() {
this.canvas.innerHTML = ""; this.canvas.innerHTML = "";
if ( this.useCanvas ) { if ( this.useCanvas ) {
var viewportSize = this.viewport.getContainerSize(); var viewportSize = this._calculateCanvasSize();
if( this.canvas.width != viewportSize.x || if( this.canvas.width != viewportSize.x ||
this.canvas.height != viewportSize.y ) { this.canvas.height != viewportSize.y ) {
this.canvas.width = viewportSize.x; this.canvas.width = viewportSize.x;
@ -255,22 +262,24 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
drawDebugInfo: function( tile, count, i ){ drawDebugInfo: function( tile, count, i ){
if ( this.useCanvas ) { if ( this.useCanvas ) {
this.context.save(); this.context.save();
this.context.lineWidth = 2; this.context.lineWidth = 2 * $.pixelDensityRatio;
this.context.font = 'small-caps bold 13px ariel'; this.context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
this.context.strokeStyle = this.debugGridColor; this.context.strokeStyle = this.debugGridColor;
this.context.fillStyle = this.debugGridColor; this.context.fillStyle = this.debugGridColor;
this._offsetForRotation( tile, this.canvas, this.context, this.viewport.degrees ); if ( this.viewport.degrees !== 0 ) {
this._offsetForRotation( tile, this.canvas, this.context, this.viewport.degrees );
}
this.context.strokeRect( this.context.strokeRect(
tile.position.x, tile.position.x * $.pixelDensityRatio,
tile.position.y, tile.position.y * $.pixelDensityRatio,
tile.size.x, tile.size.x * $.pixelDensityRatio,
tile.size.y tile.size.y * $.pixelDensityRatio
); );
var tileCenterX = tile.position.x + (tile.size.x / 2); var tileCenterX = (tile.position.x + (tile.size.x / 2)) * $.pixelDensityRatio;
var tileCenterY = tile.position.y + (tile.size.y / 2); var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;
// Rotate the text the right way around. // Rotate the text the right way around.
this.context.translate( tileCenterX, tileCenterY ); this.context.translate( tileCenterX, tileCenterY );
@ -280,46 +289,49 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
if( tile.x === 0 && tile.y === 0 ){ if( tile.x === 0 && tile.y === 0 ){
this.context.fillText( this.context.fillText(
"Zoom: " + this.viewport.getZoom(), "Zoom: " + this.viewport.getZoom(),
tile.position.x, tile.position.x * $.pixelDensityRatio,
tile.position.y - 30 (tile.position.y - 30) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Pan: " + this.viewport.getBounds().toString(), "Pan: " + this.viewport.getBounds().toString(),
tile.position.x, tile.position.x * $.pixelDensityRatio,
tile.position.y - 20 (tile.position.y - 20) * $.pixelDensityRatio
); );
} }
this.context.fillText( this.context.fillText(
"Level: " + tile.level, "Level: " + tile.level,
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 20 (tile.position.y + 20) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Column: " + tile.x, "Column: " + tile.x,
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 30 (tile.position.y + 30) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Row: " + tile.y, "Row: " + tile.y,
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 40 (tile.position.y + 40) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Order: " + i + " of " + count, "Order: " + i + " of " + count,
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 50 (tile.position.y + 50) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Size: " + tile.size.toString(), "Size: " + tile.size.toString(),
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 60 (tile.position.y + 60) * $.pixelDensityRatio
); );
this.context.fillText( this.context.fillText(
"Position: " + tile.position.toString(), "Position: " + tile.position.toString(),
tile.position.x + 10, (tile.position.x + 10) * $.pixelDensityRatio,
tile.position.y + 70 (tile.position.y + 70) * $.pixelDensityRatio
); );
this._restoreRotationChanges( tile, this.canvas, this.context );
if ( this.viewport.degrees !== 0 ) {
this._restoreRotationChanges( tile, this.canvas, this.context );
}
this.context.restore(); this.context.restore();
} }
}, },
@ -328,15 +340,15 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
debugRect: function(rect) { debugRect: function(rect) {
if ( this.useCanvas ) { if ( this.useCanvas ) {
this.context.save(); this.context.save();
this.context.lineWidth = 2; this.context.lineWidth = 2 * $.pixelDensityRatio;
this.context.strokeStyle = this.debugGridColor; this.context.strokeStyle = this.debugGridColor;
this.context.fillStyle = this.debugGridColor; this.context.fillStyle = this.debugGridColor;
this.context.strokeRect( this.context.strokeRect(
rect.x, rect.x * $.pixelDensityRatio,
rect.y, rect.y * $.pixelDensityRatio,
rect.width, rect.width * $.pixelDensityRatio,
rect.height rect.height * $.pixelDensityRatio
); );
this.context.restore(); this.context.restore();
@ -369,6 +381,16 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
tile.position.y = py; tile.position.y = py;
this.context.restore(); this.context.restore();
},
// private
_calculateCanvasSize: function() {
var pixelDensityRatio = $.pixelDensityRatio;
var viewportSize = this.viewport.getContainerSize();
return {
x: viewportSize.x * pixelDensityRatio,
y: viewportSize.y * pixelDensityRatio
};
} }
}; };

19
src/openseadragon.js
View File

@ -820,6 +820,25 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
canvasElement.getContext( '2d' ) ); canvasElement.getContext( '2d' ) );
}()); }());
/**
* A ratio comparing the device screen's pixel density to the canvas's backing store pixel density. Defaults to 1 if canvas isn't supported by the browser.
* @member {Number} pixelDensityRatio
* @memberof OpenSeadragon
*/
$.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;
} else {
return 1;
}
}());
}( OpenSeadragon )); }( OpenSeadragon ));

16
src/tile.js
View File

@ -268,10 +268,10 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{
//clearing only the inside of the rectangle occupied //clearing only the inside of the rectangle occupied
//by the png prevents edge flikering //by the png prevents edge flikering
context.clearRect( context.clearRect(
position.x+1, (position.x * $.pixelDensityRatio)+1,
position.y+1, (position.y * $.pixelDensityRatio)+1,
size.x-2, (size.x * $.pixelDensityRatio)-2,
size.y-2 (size.y * $.pixelDensityRatio)-2
); );
} }
@ -297,10 +297,10 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{
0, 0,
rendered.canvas.width, rendered.canvas.width,
rendered.canvas.height, rendered.canvas.height,
position.x, position.x * $.pixelDensityRatio,
position.y, position.y * $.pixelDensityRatio,
size.x, size.x * $.pixelDensityRatio,
size.y size.y * $.pixelDensityRatio
); );
}, },

4
src/tiledimage.js
View File

@ -262,7 +262,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// private // private
_viewportToImageDelta: function( viewerX, viewerY, current ) { _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);
return new $.Point(viewerX * (this.source.dimensions.x / scale), return new $.Point(viewerX * (this.source.dimensions.x / scale),
viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale));
}, },
@ -294,7 +294,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// private // private
_imageToViewportDelta: function( imageX, imageY, current ) { _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);
return new $.Point((imageX / this.source.dimensions.x) * scale, return new $.Point((imageX / this.source.dimensions.x) * scale,
(imageY / this.source.dimensions.y / this.contentAspectX) * scale); (imageY / this.source.dimensions.y / this.contentAspectX) * scale);
}, },