mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 13:16: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 ) {
|
||||
// TODO do this in a more performant way
|
||||
// specifically, don't save,rotate,restore every time we draw a tile
|
||||
offsetForRotation( tile, drawer.canvas, drawer.context, drawer.viewport.degrees );
|
||||
tile.drawCanvas( drawer.context );
|
||||
restoreRotationChanges( tile, drawer.canvas, drawer.context );
|
||||
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 );
|
||||
}
|
||||
|
@ -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 ));
|
||||
|
@ -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(
|
||||
|
10
src/point.js
10
src/point.js
@ -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 );
|
||||
},
|
||||
|
||||
|
@ -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 ) {
|
||||
|
@ -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 ));
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user