mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
Merge pull request #583 from wesleyfok/collections
WIP basic high pixel density support re: openseadragon/openseadragon#541
This commit is contained in:
commit
bd1dad7829
@ -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
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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
16
src/tile.js
@ -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
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user