mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Added navigator's region rotation

Browse Source 
When the "navigatorRotate" option is set to false, rotate the navigator's region accordigly to the image rotation.
This commit is contained in:
oro.niccolo 2023-05-23 09:27:32 +02:00
parent 01d940b938
commit d897e5454f
2 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/navigator.js
View File

@ -224,6 +224,8 @@ $.Navigator = function( options ){
this.displayRegionContainer.appendChild(this.displayRegion);
this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer);
this._navigatorRotate = options.navigatorRotate;
function rotate(degrees, immediately) {
_setTransformRotate(_this.displayRegionContainer, degrees);
_setTransformRotate(_this.displayRegion, -degrees);
@ -397,6 +399,11 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
.minus( this.totalBorderWidths );
if (!this._navigatorRotate) {
var degrees = viewport.getRotation(true);
_setTransformRotate(this.displayRegion, -degrees);
}
//update style for navigator-box
var style = this.displayRegion.style;
style.display = this.world.getItemCount() ? 'block' : 'none';

34
test/demo/rotating-navigator-region.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Basic Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<style type="text/css">
.openseadragon1 {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div>
Simple demo page. The navigator region is expected to rotate when the image is rotated.
The default behaviour is to keep the region still as the image below it rotates.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<script type="text/javascript">
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
showNavigator: true,
navigatorRotate: false
});
</script>
</body>
</html>