Fixes made after first code review of rotation.

This commit is contained in:
Robert Hickman 2013-08-15 16:15:20 -06:00
parent 6c63710131
commit 54e8d8c43f
7 changed files with 40 additions and 48 deletions

View File

@ -1203,9 +1203,13 @@ function drawTiles( drawer, lastDrawn ){
if ( USE_CANVAS ) {
// TODO do this in a more performant way
// 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 );
tile.drawCanvas( drawer.context );
restoreRotationChanges( tile, drawer.canvas, drawer.context );
} else {
tile.drawCanvas( drawer.context );
}
} else {
tile.drawHTML( drawer.canvas );
}

View File

@ -1927,23 +1927,4 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
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 ));

View File

@ -204,7 +204,11 @@
size = size.apply( Math.ceil );
// 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 );
position = position.plus( overlayCenter ).rotate(

View File

@ -170,14 +170,8 @@ $.Point.prototype = {
*/
rotate: function ( degrees, pivot ) {
var angle = degrees * Math.PI / 180.0,
x = $._round(
Math.cos( angle ) * ( this.x - pivot.x ) -
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
);
x = Math.cos( angle ) * ( this.x - pivot.x ) - Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x,
y = Math.sin( angle ) * ( this.x - pivot.x ) + Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y;
return new $.Point( x, y );
},

View File

@ -176,6 +176,15 @@ $.Rect.prototype = {
height = this.height,
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();
switch ( degrees ) {

View File

@ -1074,19 +1074,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
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
* @function
@ -1709,9 +1696,5 @@ function onNext(){
this.goToPage( next );
}
function onRotate(){
this.rotate();
}
}( OpenSeadragon ));

View File

@ -570,6 +570,23 @@ $.Viewport.prototype = {
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
* @return {OpenSeadragon.Viewport} Chainable.