mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
396fcb33a5
An outer div has been added to the internal HTML of the overlay element to allow for independent flipping of the content. Flipping will invert the `scaleX` value of the transform property for the style of the element. By setting the value `overlayContentFlipped: true` in the OSD config we can flip the content in the opposite direction to the overlay, but by setting this to false we can flip the content along with the overlay. This allows for some people who are using images in their overlay to flip the images along with the overlay.
114 lines
4.1 KiB
HTML
114 lines
4.1 KiB
HTML
<html>
|
|
<title>OpenSeadragon Overlay 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 id="contentDiv" class="openseadragon1"></div>
|
|
<div id="annotation-div">
|
|
<input type="button" value="Hide Overlays" id="hideOverlays">
|
|
<input type="button" value="Rotate" id="rotate">
|
|
<span id="degrees">0deg</span>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var viewer = OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
tileSources: "../data/testpattern.dzi",
|
|
minZoomImageRatio: 0,
|
|
maxZoomPixelRatio: 10,
|
|
overlayContentFlipped: true // change this to true to test overlay content flipping
|
|
});
|
|
|
|
viewer.addHandler("open", function(event) {
|
|
var elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "green";
|
|
elt.style.outline = "3px solid red";
|
|
elt.style.opacity = "0.7";
|
|
elt.textContent = "Scaled overlay";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
|
});
|
|
|
|
// test with image of letter B to see that images flip too
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.outline = "1px solid blue";
|
|
elt.style.height = "100px";
|
|
elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.0, 0.0),
|
|
width: 0.1,
|
|
height: 0.1
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.outline = "3px solid red";
|
|
elt.style.width = "100px";
|
|
elt.textContent = "Scaled vertically";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.6, 0.6),
|
|
height: 0.1,
|
|
placement: OpenSeadragon.Placement.TOP_LEFT,
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.opacity = "0.5";
|
|
elt.style.outline = "1px solid blue";
|
|
elt.style.height = "100px";
|
|
elt.textContent = "Scaled horizontally";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.1, 0.5),
|
|
width: 0.1
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.opacity = "0.5";
|
|
elt.style.outline = "5px solid pink";
|
|
elt.style.width = "100px";
|
|
elt.style.height = "100px";
|
|
elt.textContent = "Not scaled, centered in the middle";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.5, 0.5),
|
|
placement: OpenSeadragon.Placement.CENTER,
|
|
checkResize: false,
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
|
|
});
|
|
|
|
});
|
|
$("#hideOverlays").click(function(){
|
|
$(".runtime-overlay").toggle();
|
|
});
|
|
$("#rotate").click(function() {
|
|
viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);
|
|
$("#degrees").text(viewer.viewport.getRotation() + "deg");
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|