diff --git a/src/drawer.js b/src/drawer.js index fd19b86b..f49b44c5 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1122,7 +1122,7 @@ function drawOverlay( viewport, overlay, container ){ overlay.bounds.getSize(), true ); - overlay.drawHTML( container ); + overlay.drawHTML( container, viewport ); } function drawTiles( drawer, lastDrawn ){ diff --git a/src/overlay.js b/src/overlay.js index 8635499f..66036c13 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -171,12 +171,18 @@ * @function * @param {Element} container */ - drawHTML: function( container ) { + drawHTML: function( container, viewport ) { var element = this.element, style = this.style, scales = this.scales, + drawerCenter = new $.Point( + viewport.viewer.drawer.canvas.width / 2, + viewport.viewer.drawer.canvas.height / 2 + ), + degrees = viewport.degrees, position, - size; + size, + overlayCenter; if ( element.parentNode != container ) { //save the source parent for later if we need it @@ -197,6 +203,19 @@ position = position.apply( Math.floor ); size = size.apply( Math.ceil ); + // rotate the position of the overlay + if(this.scales){ + overlayCenter = new $.Point( size.x / 2, size.y / 2 ); + + position = position.plus( overlayCenter ).rotate( + degrees, + drawerCenter + ).minus( overlayCenter ); + + size = size.rotate( degrees, new $.Point( 0, 0 ) ); + size = new $.Point( Math.abs( size.x ), Math.abs( size.y ) ); + } + // call the onDraw callback if there is one to allow, this allows someone to overwrite // the drawing/positioning/sizing of the overlay if (this.onDraw) {