mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-26 15:16:10 +03:00
7552806a47
Flipping an image changes the bounds of each tile. The existing code assumes that cannot happen. getTile() calculates the tile bounds the first time it is asked for a particular tile. It then caches and returns the same time on every subsequent call. getTile() has a check to test if a tile exists in the cache. If it does not, the tile is created and inserted. In order to make tiles be rebuilt after a flip, we only need to check if the tile's flip matches the image's flip. If not, we can recreate the tile as if it did not exist. To make this a bit clearer, the tile's flipped flag is now set in getTile() rather than positionTile(). This makes setFlip() work.
111 lines
2.8 KiB
HTML
111 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>OpenSeadragon Flipping 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;
|
|
float: left;
|
|
}
|
|
|
|
.options {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.button {
|
|
margin: 0.3em;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
Simple demo page to show image flipping.
|
|
</div>
|
|
<div id="contentDiv" class="openseadragon1">
|
|
|
|
|
|
</div>
|
|
<div class="options">
|
|
First
|
|
<div class="button">
|
|
<input type="checkbox" id="ffirst" onchange="flip(0, this.checked)">
|
|
<label for="ffirst">Flip</label>
|
|
</div>
|
|
<div class="button">
|
|
<input type="checkbox" id="rfirst" onchange="rotate(0, this.checked * 45)">
|
|
<label for="rfirst">Rotate</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
Second
|
|
<div class="button">
|
|
<input type="checkbox" id="fsecond" onchange="flip(1, this.checked)" checked>
|
|
<label for="fsecond">Flip</label>
|
|
</div>
|
|
<div class="button">
|
|
<input type="checkbox" id="rsecond" onchange="rotate(1, this.checked * 45)">
|
|
<label for="rsecond">Rotate</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="button">
|
|
<input type="checkbox" id="fview" onchange="flipViewport(this.checked)">
|
|
<label for="fview">Flip Viewport</label>
|
|
</div>
|
|
|
|
<div class="button">
|
|
<input type="checkbox" id="debug" onchange="debug(this.checked)">
|
|
<label for="debug">Debug Mode</label>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
var viewer = OpenSeadragon({
|
|
// debugMode: true,
|
|
id: "contentDiv",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
showNavigator:true
|
|
});
|
|
|
|
var first = viewer.addTiledImage({
|
|
tileSource: "../data/testpattern.dzi",
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
|
|
var second = viewer.addTiledImage({
|
|
tileSource: "../data/testpattern.dzi",
|
|
x: 1,
|
|
y: 0,
|
|
flipped: true,
|
|
});
|
|
|
|
function debug(v) {
|
|
viewer.setDebugMode(v);
|
|
}
|
|
|
|
function flip(n, v) {
|
|
viewer.world.getItemAt(n).setFlip(v);
|
|
}
|
|
|
|
function rotate(n, v) {
|
|
viewer.world.getItemAt(n).setRotation(v);
|
|
}
|
|
|
|
function flipViewport(v) {
|
|
viewer.viewport.setFlip(v);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|