mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 21:26:10 +03:00
Fixes made after first code review of rotation.
This commit is contained in:
parent
6c63710131
commit
54e8d8c43f
@ -1203,9 +1203,13 @@ function drawTiles( drawer, lastDrawn ){
|
|||||||
if ( USE_CANVAS ) {
|
if ( USE_CANVAS ) {
|
||||||
// TODO do this in a more performant way
|
// TODO do this in a more performant way
|
||||||
// specifically, don't save,rotate,restore every time we draw a tile
|
// specifically, don't save,rotate,restore every time we draw a tile
|
||||||
|
if( drawer.viewport.degrees !== 0 ) {
|
||||||
offsetForRotation( tile, drawer.canvas, drawer.context, drawer.viewport.degrees );
|
offsetForRotation( tile, drawer.canvas, drawer.context, drawer.viewport.degrees );
|
||||||
tile.drawCanvas( drawer.context );
|
tile.drawCanvas( drawer.context );
|
||||||
restoreRotationChanges( tile, drawer.canvas, drawer.context );
|
restoreRotationChanges( tile, drawer.canvas, drawer.context );
|
||||||
|
} else {
|
||||||
|
tile.drawCanvas( drawer.context );
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
tile.drawHTML( drawer.canvas );
|
tile.drawHTML( drawer.canvas );
|
||||||
}
|
}
|
||||||
|
@ -1927,23 +1927,4 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
|
|||||||
throw new Error(message);
|
throw new Error(message);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* http://stackoverflow.com/questions/246193
|
|
||||||
* /how-do-i-round-a-number-in-javascript
|
|
||||||
* @private
|
|
||||||
* @inner
|
|
||||||
* @function
|
|
||||||
* @param {Number} num
|
|
||||||
* @param {Number} decimals
|
|
||||||
* @return {Number}
|
|
||||||
*/
|
|
||||||
$._round = function ( num, decimals ) {
|
|
||||||
var coefficient;
|
|
||||||
|
|
||||||
decimals = decimals || 10;
|
|
||||||
coefficient = Math.pow( 10, decimals );
|
|
||||||
|
|
||||||
return Math.round( num * coefficient ) / coefficient;
|
|
||||||
};
|
|
||||||
|
|
||||||
}( OpenSeadragon ));
|
}( OpenSeadragon ));
|
||||||
|
@ -204,7 +204,11 @@
|
|||||||
size = size.apply( Math.ceil );
|
size = size.apply( Math.ceil );
|
||||||
|
|
||||||
// rotate the position of the overlay
|
// rotate the position of the overlay
|
||||||
if(this.scales){
|
// TODO only rotate overlays if in canvas mode
|
||||||
|
// TODO replace the size rotation with CSS3 transforms
|
||||||
|
// TODO add an option to overlays to not rotate with the image
|
||||||
|
// Currently only rotates position and size
|
||||||
|
if( degrees !== 0 && this.scales ) {
|
||||||
overlayCenter = new $.Point( size.x / 2, size.y / 2 );
|
overlayCenter = new $.Point( size.x / 2, size.y / 2 );
|
||||||
|
|
||||||
position = position.plus( overlayCenter ).rotate(
|
position = position.plus( overlayCenter ).rotate(
|
||||||
|
10
src/point.js
10
src/point.js
@ -170,14 +170,8 @@ $.Point.prototype = {
|
|||||||
*/
|
*/
|
||||||
rotate: function ( degrees, pivot ) {
|
rotate: function ( degrees, pivot ) {
|
||||||
var angle = degrees * Math.PI / 180.0,
|
var angle = degrees * Math.PI / 180.0,
|
||||||
x = $._round(
|
x = Math.cos( angle ) * ( this.x - pivot.x ) - Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x,
|
||||||
Math.cos( angle ) * ( this.x - pivot.x ) -
|
y = Math.sin( angle ) * ( this.x - pivot.x ) + Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y;
|
||||||
Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x
|
|
||||||
),
|
|
||||||
y = $._round(
|
|
||||||
Math.sin( angle ) * ( this.x - pivot.x ) +
|
|
||||||
Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y
|
|
||||||
);
|
|
||||||
return new $.Point( x, y );
|
return new $.Point( x, y );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -176,6 +176,15 @@ $.Rect.prototype = {
|
|||||||
height = this.height,
|
height = this.height,
|
||||||
newTopLeft;
|
newTopLeft;
|
||||||
|
|
||||||
|
degrees = ( degrees + 360 ) % 360;
|
||||||
|
if( degrees % 90 !== 0 ) {
|
||||||
|
throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if( degrees === 0 ){
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
pivot = pivot || this.getCenter();
|
pivot = pivot || this.getCenter();
|
||||||
|
|
||||||
switch ( degrees ) {
|
switch ( degrees ) {
|
||||||
|
@ -1074,19 +1074,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
|||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* @function
|
|
||||||
* @name OpenSeadragon.Viewer.prototype.rotate
|
|
||||||
* @return {OpenSeadragon.Viewer} Chainable.
|
|
||||||
*/
|
|
||||||
rotate: function(clockwise){
|
|
||||||
clockwise = clockwise || true;
|
|
||||||
this.viewport.degrees = ( this.viewport.degrees + (clockwise ? 90 : -90 ) + 360 ) % 360;
|
|
||||||
//this.raiseEvent( 'rotate', { viewer: this } );
|
|
||||||
this.drawer.update();
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Display a message in the viewport
|
* Display a message in the viewport
|
||||||
* @function
|
* @function
|
||||||
@ -1709,9 +1696,5 @@ function onNext(){
|
|||||||
this.goToPage( next );
|
this.goToPage( next );
|
||||||
}
|
}
|
||||||
|
|
||||||
function onRotate(){
|
|
||||||
this.rotate();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}( OpenSeadragon ));
|
}( OpenSeadragon ));
|
||||||
|
@ -570,6 +570,23 @@ $.Viewport.prototype = {
|
|||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Currently only supports 90 degree rotation.
|
||||||
|
* Currently only works with canvas.
|
||||||
|
* @function
|
||||||
|
* @name OpenSeadragon.Viewport.prototype.rotate
|
||||||
|
* @return {OpenSeadragon.Viewport} Chainable.
|
||||||
|
*/
|
||||||
|
setRotation: function(degrees){
|
||||||
|
degrees = ( degrees + 360 ) % 360;
|
||||||
|
if(degrees % 90 !== 0){
|
||||||
|
throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.');
|
||||||
|
}
|
||||||
|
this.degrees = degrees;
|
||||||
|
this.viewer.drawer.update();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @function
|
* @function
|
||||||
* @return {OpenSeadragon.Viewport} Chainable.
|
* @return {OpenSeadragon.Viewport} Chainable.
|
||||||
|
Loading…
Reference in New Issue
Block a user