mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 21:26:10 +03:00
116 lines
4.6 KiB
HTML
116 lines
4.6 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>
|
|
<canvas id="test-canvas" width = "400" height="400" style="image-rendering: pixelated; position:fixed;right:10px;top:10px;width:400px;height:400px;background-color:white;border:thin gray solid;"></canvas>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var canvas = document.getElementById('test-canvas');// width == height == 400
|
|
var context = canvas.getContext("2d");
|
|
context.fillRect(0, 0, 400, 400); // fill entire canvas with black rectangle
|
|
context.translate(200, 200); // translate to center
|
|
context.rotate(1 * Math.PI/180); // rotate by 1 degree
|
|
context.clearRect(-100, -100, 200, 200); // clear a 200 x 200 rectangle
|
|
context.fillRect(-100, -100, 100, 200); // draw a 100 x 200 rectangle in the left half
|
|
context.fillRect(-00, -100, 100, 200); // draw a 100 x 200 rectangle in the right half
|
|
|
|
window.context = context;
|
|
|
|
var viewer = OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
tileSources: "../data/testpattern.dzi",
|
|
minZoomImageRatio: 0,
|
|
maxZoomPixelRatio: 10,
|
|
subPixelRoundingForTransparency: OpenSeadragon.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS
|
|
});
|
|
window.c = viewer.drawer.canvas.getContext("2d");
|
|
|
|
viewer.addHandler("open", function(event) {
|
|
viewer.world.getItemAt(0).source.hasTransparency = function(){ return true; }
|
|
viewer.viewport.rotateTo(1);
|
|
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
|
|
});
|
|
|
|
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>
|