mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +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.
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;
@ -255,22 +262,24 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
drawDebugInfo: function( tile, count, i ){
if ( this.useCanvas ) {
this.context.save();
this.context.lineWidth = 2;
this.context.font = 'small-caps bold 13px ariel';
this.context.lineWidth = 2 * $.pixelDensityRatio;
this.context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
this.context.strokeStyle = 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(
tile.position.x,
tile.position.y,
tile.size.x,
tile.size.y
tile.position.x * $.pixelDensityRatio,
tile.position.y * $.pixelDensityRatio,
tile.size.x * $.pixelDensityRatio,
tile.size.y * $.pixelDensityRatio
);
var tileCenterX = tile.position.x + (tile.size.x / 2);
var tileCenterY = tile.position.y + (tile.size.y / 2);
var tileCenterX = (tile.position.x + (tile.size.x / 2)) * $.pixelDensityRatio;
var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;
// Rotate the text the right way around.
this.context.translate( tileCenterX, tileCenterY );
@ -280,46 +289,49 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
if( tile.x === 0 && tile.y === 0 ){
this.context.fillText(
"Zoom: " + this.viewport.getZoom(),
tile.position.x,
tile.position.y - 30
tile.position.x * $.pixelDensityRatio,
(tile.position.y - 30) * $.pixelDensityRatio
);
this.context.fillText(
"Pan: " + this.viewport.getBounds().toString(),
tile.position.x,
tile.position.y - 20
tile.position.x * $.pixelDensityRatio,
(tile.position.y - 20) * $.pixelDensityRatio
);
}
this.context.fillText(
"Level: " + tile.level,
tile.position.x + 10,
tile.position.y + 20
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 20) * $.pixelDensityRatio
);
this.context.fillText(
"Column: " + tile.x,
tile.position.x + 10,
tile.position.y + 30
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 30) * $.pixelDensityRatio
);
this.context.fillText(
"Row: " + tile.y,
tile.position.x + 10,
tile.position.y + 40
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 40) * $.pixelDensityRatio
);
this.context.fillText(
"Order: " + i + " of " + count,
tile.position.x + 10,
tile.position.y + 50
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 50) * $.pixelDensityRatio
);
this.context.fillText(
"Size: " + tile.size.toString(),
tile.position.x + 10,
tile.position.y + 60
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 60) * $.pixelDensityRatio
);
this.context.fillText(
"Position: " + tile.position.toString(),
tile.position.x + 10,
tile.position.y + 70
(tile.position.x + 10) * $.pixelDensityRatio,
(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();
}
},
@ -328,15 +340,15 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
debugRect: function(rect) {
if ( this.useCanvas ) {
this.context.save();
this.context.lineWidth = 2;
this.context.lineWidth = 2 * $.pixelDensityRatio;
this.context.strokeStyle = this.debugGridColor;
this.context.fillStyle = this.debugGridColor;
this.context.strokeRect(
rect.x,
rect.y,
rect.width,
rect.height
rect.x * $.pixelDensityRatio,
rect.y * $.pixelDensityRatio,
rect.width * $.pixelDensityRatio,
rect.height * $.pixelDensityRatio
);
this.context.restore();
@ -369,6 +381,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
};
}
};

19
src/openseadragon.js
View File

@ -820,6 +820,25 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
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 ));

16
src/tile.js
View File

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

4
src/tiledimage.js
View File

@ -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);
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);
return new $.Point((imageX / this.source.dimensions.x) * scale,
(imageY / this.source.dimensions.y / this.contentAspectX) * scale);
},