Fixed rotation with multiple images

This commit is contained in:
Ian Gilman 2014-11-05 16:39:35 -08:00
parent 8bdc55bd63
commit b5a9116a0b
2 changed files with 14 additions and 19 deletions

View File

@ -195,8 +195,6 @@ function updateViewport( tiledImage ) {
haveDrawn = false, haveDrawn = false,
currentTime = $.now(), currentTime = $.now(),
viewportBounds = tiledImage.viewport.getBoundsWithMargins( true ), viewportBounds = tiledImage.viewport.getBoundsWithMargins( true ),
viewportTL = viewportBounds.getTopLeft(),
viewportBR = viewportBounds.getBottomRight(),
zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints( zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints(
tiledImage.source.getPixelRatio( 0 ), tiledImage.source.getPixelRatio( 0 ),
true true
@ -223,10 +221,8 @@ function updateViewport( tiledImage ) {
levelOpacity, levelOpacity,
levelVisibility; levelVisibility;
viewportTL.x -= tiledImage._worldX; viewportBounds.x -= tiledImage._worldX;
viewportTL.y -= tiledImage._worldY; viewportBounds.y -= tiledImage._worldY;
viewportBR.x -= tiledImage._worldX;
viewportBR.y -= tiledImage._worldY;
// Reset tile's internal drawn state // Reset tile's internal drawn state
while ( tiledImage.lastDrawn.length > 0 ) { while ( tiledImage.lastDrawn.length > 0 ) {
@ -236,27 +232,25 @@ function updateViewport( tiledImage ) {
//Change bounds for rotation //Change bounds for rotation
if (degrees === 90 || degrees === 270) { if (degrees === 90 || degrees === 270) {
var rotatedBounds = viewportBounds.rotate( degrees ); viewportBounds = viewportBounds.rotate( degrees );
viewportTL = rotatedBounds.getTopLeft(); } else if (degrees !== 0 && degrees !== 180) {
viewportBR = rotatedBounds.getBottomRight();
} else if (degrees !== 0) {
// This is just an approximation. // This is just an approximation.
var orthBounds = viewportBounds.rotate(90); var orthBounds = viewportBounds.rotate(90);
viewportBounds.x -= orthBounds.width / 2; viewportBounds.x -= orthBounds.width / 2;
viewportBounds.y -= orthBounds.height / 2; viewportBounds.y -= orthBounds.height / 2;
viewportBounds.width += orthBounds.width; viewportBounds.width += orthBounds.width;
viewportBounds.height += orthBounds.height; viewportBounds.height += orthBounds.height;
viewportTL = viewportBounds.getTopLeft();
viewportBR = viewportBounds.getBottomRight();
} }
var viewportTL = viewportBounds.getTopLeft();
var viewportBR = viewportBounds.getBottomRight();
//Don't draw if completely outside of the viewport //Don't draw if completely outside of the viewport
if ( !tiledImage.wrapHorizontal && if ( !tiledImage.wrapHorizontal && (viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidth ) ) {
( viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidth ) ) {
return; return;
} else if }
( !tiledImage.wrapVertical &&
( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeight ) ) { if ( !tiledImage.wrapVertical && ( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeight ) ) {
return; return;
} }
@ -265,6 +259,7 @@ function updateViewport( tiledImage ) {
viewportTL.x = Math.max( viewportTL.x, 0 ); viewportTL.x = Math.max( viewportTL.x, 0 );
viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidth ); viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidth );
} }
if ( !tiledImage.wrapVertical ) { if ( !tiledImage.wrapVertical ) {
viewportTL.y = Math.max( viewportTL.y, 0 ); viewportTL.y = Math.max( viewportTL.y, 0 );
viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeight ); viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeight );

View File

@ -13,7 +13,7 @@
var margins; var margins;
var config = { var config = {
debugMode: true, // debugMode: true,
zoomPerScroll: 1.02, zoomPerScroll: 1.02,
showNavigator: testNavigator, showNavigator: testNavigator,
// wrapHorizontal: true, // wrapHorizontal: true,
@ -86,7 +86,7 @@
} }
// this.crossTest3(); // this.crossTest3();
this.basicTest(); this.gridTest();
}, },
// ---------- // ----------