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

Merge branch 'master' of https://github.com/openseadragon/openseadragon into home-clip

Browse Source
This commit is contained in:
Antoine Vandecreme 2016-04-09 11:16:16 -04:00
commit ea86237a4a
8 changed files with 1289 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.txt
View File

@ -5,6 +5,12 @@ OPENSEADRAGON CHANGELOG
* BREAKING CHANGE: Viewport.homeBounds, Viewport.contentSize, Viewport.contentAspectX and
Viewport.contentAspectY have been removed. (#846)
* BREAKING CHANGE: The Overlay.getBounds method now takes the viewport as parameter. (#896)
* DEPRECATION: Overlay.scales, Overlay.bounds and Overlay.position have been deprecated. (#896)
* Overlay.width !== null should be used to test whether the overlay scales horizontally
* Overlay.height !== null should be used to test whether the overlay scales vertically
* The Overlay.getBounds method should be used to get the bounds of the overlay in viewport coordinates
* Overlay.location replaces Overlay.position
* DEPRECATION: Viewport.setHomeBounds has been deprecated (#846)
* DEPRECATION: the Viewport constructor is now ignoring the contentSize option (#846)
* Tile edge smoothing at high zoom (#764)
@ -30,6 +36,8 @@ OPENSEADRAGON CHANGELOG
* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
* Added addOnceHandler method to EventSource (#887)
* Added TiledImage.fitBounds method (#888)
* Overlays can now be scaled in a single dimension by providing a point location and either width or height (#896)
* Added full rotation support to overlays (#729, #193)
2.1.0:

43
src/openseadragon.js
View File

@ -1337,6 +1337,49 @@ if (typeof define === 'function' && define.amd) {
return window.getComputedStyle( element, "" );
},
/**
* Returns the property with the correct vendor prefix appended.
* @param {String} property the property name
* @returns {String} the property with the correct prefix or null if not
* supported.
*/
getCssPropertyWithVendorPrefix: function(property) {
var memo = {};
$.getCssPropertyWithVendorPrefix = function(property) {
if (memo[property] !== undefined) {
return memo[property];
}
var style = document.createElement('div').style;
var result = null;
if (style[property] !== undefined) {
result = property;
} else {
var prefixes = ['Webkit', 'Moz', 'MS', 'O',
'webkit', 'moz', 'ms', 'o'];
var suffix = $.capitalizeFirstLetter(property);
for (var i = 0; i < prefixes.length; i++) {
var prop = prefixes[i] + suffix;
if (style[prop] !== undefined) {
result = prop;
break;
}
}
}
memo[property] = result;
return result;
};
return $.getCssPropertyWithVendorPrefix(property);
},
/**
* Capitalizes the first letter of a string
* @param {String} string
* @returns {String} The string with the first letter capitalized
*/
capitalizeFirstLetter: function(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
},
/**
* Determines if a point is within the bounding rectangle of the given element (hit-test).

428
src/overlay.js
View File

@ -32,7 +32,7 @@
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
(function( $ ){
(function($) {
/**
* An enumeration of positions that an overlay may be assigned relative to
@ -55,6 +55,23 @@
*/
$.OverlayPlacement = $.Placement;
/**
* An enumeration of possible ways to handle overlays rotation
* @memberOf OpenSeadragon
* @static
* @property {Number} NO_ROTATION The overlay ignore the viewport rotation.
* @property {Number} EXACT The overlay use CSS 3 transforms to rotate with
* the viewport. If the overlay contains text, it will get rotated as well.
* @property {Number} BOUNDING_BOX The overlay adjusts for rotation by
* taking the size of the bounding box of the rotated bounds.
* Only valid for overlays with Rect location and scalable in both directions.
*/
$.OverlayRotationMode = {
NO_ROTATION: 1,
EXACT: 2,
BOUNDING_BOX: 3
};
/**
* @class Overlay
* @classdesc Provides a way to float an HTML element on top of the viewer element.
@ -64,19 +81,27 @@
* @param {Element} options.element
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} options.location - The
* location of the overlay on the image. If a {@link OpenSeadragon.Point}
* is specified, the overlay will keep a constant size independently of the
* zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will
* be adjusted when the zoom changes.
* is specified, the overlay will be located at this location with respect
* to the placement option. If a {@link OpenSeadragon.Rect} is specified,
* the overlay will be placed at this location with the corresponding width
* and height and placement TOP_LEFT.
* @param {OpenSeadragon.Placement} [options.placement=OpenSeadragon.Placement.TOP_LEFT]
* Relative position to the viewport.
* Only used if location is a {@link OpenSeadragon.Point}.
* Defines what part of the overlay should be at the specified options.location
* @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
* @param {Boolean} [options.checkResize=true] Set to false to avoid to
* check the size of the overlay everytime it is drawn when using a
* {@link OpenSeadragon.Point} as options.location. It will improve
* performances but will cause a misalignment if the overlay size changes.
* check the size of the overlay everytime it is drawn in the directions
* which are not scaled. It will improve performances but will cause a
* misalignment if the overlay size changes.
* @param {Number} [options.width] The width of the overlay in viewport
* coordinates. If specified, the width of the overlay will be adjusted when
* the zoom changes.
* @param {Number} [options.height] The height of the overlay in viewport
* coordinates. If specified, the height of the overlay will be adjusted when
* the zoom changes.
* @param {Boolean} [options.rotationMode=OpenSeadragon.OverlayRotationMode.EXACT]
* How to handle the rotation of the viewport.
*/
$.Overlay = function( element, location, placement ) {
$.Overlay = function(element, location, placement) {
/**
* onDraw callback signature used by {@link OpenSeadragon.Overlay}.
@ -89,7 +114,7 @@
*/
var options;
if ( $.isPlainObject( element ) ) {
if ($.isPlainObject(element)) {
options = element;
} else {
options = {
@ -99,35 +124,49 @@
};
}
this.element = options.element;
this.scales = options.location instanceof $.Rect;
this.bounds = new $.Rect(
options.location.x,
options.location.y,
options.location.width,
options.location.height
);
this.position = new $.Point(
options.location.x,
options.location.y
);
this.size = new $.Point(
options.location.width,
options.location.height
);
this.style = options.element.style;
// rects are always top-left
this.placement = options.location instanceof $.Point ?
options.placement : $.Placement.TOP_LEFT;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
this.element = options.element;
this.style = options.element.style;
this._init(options);
};
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
// private
_init: function(options) {
this.location = options.location;
this.placement = options.placement === undefined ?
$.Placement.TOP_LEFT : options.placement;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
// When this.width is not null, the overlay get scaled horizontally
this.width = options.width === undefined ? null : options.width;
// When this.height is not null, the overlay get scaled vertically
this.height = options.height === undefined ? null : options.height;
this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
// Having a rect as location is a syntactic sugar
if (this.location instanceof $.Rect) {
this.width = this.location.width;
this.height = this.location.height;
this.location = this.location.getTopLeft();
this.placement = $.Placement.TOP_LEFT;
}
// Deprecated properties kept for backward compatibility.
this.scales = this.width !== null && this.height !== null;
this.bounds = new $.Rect(
this.location.x, this.location.y, this.width, this.height);
this.position = this.location;
},
/**
* Internal function to adjust the position of an overlay
* depending on it size and placement.
* @function
* @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
@ -153,20 +192,20 @@
* @function
*/
destroy: function() {
var element = this.element,
style = this.style;
var element = this.element;
var style = this.style;
if ( element.parentNode ) {
element.parentNode.removeChild( element );
if (element.parentNode) {
element.parentNode.removeChild(element);
//this should allow us to preserve overlays when required between
//pages
if ( element.prevElementParent ) {
if (element.prevElementParent) {
style.display = 'none';
//element.prevElementParent.insertBefore(
// element,
// element.prevNextSibling
//);
document.body.appendChild( element );
document.body.appendChild(element);
}
}
@ -177,121 +216,258 @@
style.left = "";
style.position = "";
if ( this.scales ) {
if (this.width !== null) {
style.width = "";
}
if (this.height !== null) {
style.height = "";
}
var transformOriginProp = $.getCssPropertyWithVendorPrefix(
'transformOrigin');
var transformProp = $.getCssPropertyWithVendorPrefix(
'transform');
if (transformOriginProp && transformProp) {
style[transformOriginProp] = "";
style[transformProp] = "";
}
},
/**
* @function
* @param {Element} container
*/
drawHTML: function( container, viewport ) {
var element = this.element,
style = this.style,
scales = this.scales,
degrees = viewport.degrees,
position = viewport.pixelFromPoint(
this.bounds.getTopLeft(),
true
),
size,
overlayCenter;
if ( element.parentNode != container ) {
drawHTML: function(container, viewport) {
var element = this.element;
if (element.parentNode !== container) {
//save the source parent for later if we need it
element.prevElementParent = element.parentNode;
element.prevNextSibling = element.nextSibling;
container.appendChild( element );
this.size = $.getElementSize( element );
element.prevElementParent = element.parentNode;
element.prevNextSibling = element.nextSibling;
container.appendChild(element);
// this.size is used by overlays which don't get scaled in at
// least one direction when this.checkResize is set to false.
this.size = $.getElementSize(element);
}
if ( scales ) {
size = viewport.deltaPixelsFromPoints(
this.bounds.getSize(),
true
);
} else if ( this.checkResize ) {
size = $.getElementSize( element );
} else {
size = this.size;
}
var positionAndSize = this._getOverlayPositionAndSize(viewport);
this.position = position;
this.size = size;
this.adjust( position, size );
position = position.apply( Math.round );
size = size.apply( Math.round );
// rotate the position of the overlay
// TODO only rotate overlays if in canvas mode
// TODO replace the size rotation with CSS3 transforms
// TODO add an option to overlays to not rotate with the image
// Currently only rotates position and size
if( degrees !== 0 && this.scales ) {
overlayCenter = new $.Point( size.x / 2, size.y / 2 );
var drawerCenter = new $.Point(
viewport.viewer.drawer.canvas.width / 2,
viewport.viewer.drawer.canvas.height / 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 ) );
}
var position = positionAndSize.position;
var size = this.size = positionAndSize.size;
var rotate = positionAndSize.rotate;
// call the onDraw callback if it exists to allow one to overwrite
// the drawing/positioning/sizing of the overlay
if ( this.onDraw ) {
this.onDraw( position, size, element );
if (this.onDraw) {
this.onDraw(position, size, this.element);
} else {
style.left = position.x + "px";
style.top = position.y + "px";
var style = this.style;
style.left = position.x + "px";
style.top = position.y + "px";
if (this.width !== null) {
style.width = size.x + "px";
}
if (this.height !== null) {
style.height = size.y + "px";
}
var transformOriginProp = $.getCssPropertyWithVendorPrefix(
'transformOrigin');
var transformProp = $.getCssPropertyWithVendorPrefix(
'transform');
if (transformOriginProp && transformProp) {
if (rotate) {
style[transformOriginProp] = this._getTransformOrigin();
style[transformProp] = "rotate(" + rotate + "deg)";
} else {
style[transformOriginProp] = "";
style[transformProp] = "";
}
}
style.position = "absolute";
if (style.display != 'none') {
style.display = 'block';
}
if ( scales ) {
style.width = size.x + "px";
style.height = size.y + "px";
if (style.display !== 'none') {
style.display = 'block';
}
}
},
/**
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @param {OpenSeadragon.Placement} position
*/
update: function( location, placement ) {
this.scales = location instanceof $.Rect;
this.bounds = new $.Rect(
location.x,
location.y,
location.width,
location.height
);
// rects are always top-left
this.placement = location instanceof $.Point ?
placement : $.Placement.TOP_LEFT;
// private
_getOverlayPositionAndSize: function(viewport) {
var position = viewport.pixelFromPoint(this.location, true);
var size = this._getSizeInPixels(viewport);
this.adjust(position, size);
var rotate = 0;
if (viewport.degrees &&
this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
// BOUNDING_BOX is only valid if both directions get scaled.
// Get replaced by EXACT otherwise.
if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
this.width !== null && this.height !== null) {
var rect = new $.Rect(position.x, position.y, size.x, size.y);
var boundingBox = this._getBoundingBox(rect, viewport.degrees);
position = boundingBox.getTopLeft();
size = boundingBox.getSize();
} else {
rotate = viewport.degrees;
}
}
return {
position: position,
size: size,
rotate: rotate
};
},
// private
_getSizeInPixels: function(viewport) {
var width = this.size.x;
var height = this.size.y;
if (this.width !== null || this.height !== null) {
var scaledSize = viewport.deltaPixelsFromPointsNoRotate(
new $.Point(this.width || 0, this.height || 0), true);
if (this.width !== null) {
width = scaledSize.x;
}
if (this.height !== null) {
height = scaledSize.y;
}
}
if (this.checkResize &&
(this.width === null || this.height === null)) {
var eltSize = this.size = $.getElementSize(this.element);
if (this.width === null) {
width = eltSize.x;
}
if (this.height === null) {
height = eltSize.y;
}
}
return new $.Point(width, height);
},
// private
_getBoundingBox: function(rect, degrees) {
var refPoint = this._getPlacementPoint(rect);
return rect.rotate(degrees, refPoint).getBoundingBox();
},
// private
_getPlacementPoint: function(rect) {
var result = new $.Point(rect.x, rect.y);
var properties = $.Placement.properties[this.placement];
if (properties) {
if (properties.isHorizontallyCentered) {
result.x += rect.width / 2;
} else if (properties.isRight) {
result.x += rect.width;
}
if (properties.isVerticallyCentered) {
result.y += rect.height / 2;
} else if (properties.isBottom) {
result.y += rect.height;
}
}
return result;
},
// private
_getTransformOrigin: function() {
var result = "";
var properties = $.Placement.properties[this.placement];
if (!properties) {
return result;
}
if (properties.isLeft) {
result = "left";
} else if (properties.isRight) {
result = "right";
}
if (properties.isTop) {
result += " top";
} else if (properties.isBottom) {
result += " bottom";
}
return result;
},
/**
* Changes the overlay settings.
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect|Object} location
* If an object is specified, the options are the same than the constructor
* except for the element which can not be changed.
* @param {OpenSeadragon.Placement} position
*/
update: function(location, placement) {
var options = $.isPlainObject(location) ? location : {
location: location,
placement: placement
};
this._init({
location: options.location || this.location,
placement: options.placement !== undefined ?
options.placement : this.placement,
onDraw: options.onDraw || this.onDraw,
checkResize: options.checkResize || this.checkResize,
width: options.width !== undefined ? options.width : this.width,
height: options.height !== undefined ? options.height : this.height,
rotationMode: options.rotationMode || this.rotationMode
});
},
/**
* Returns the current bounds of the overlay in viewport coordinates
* @function
* @param {OpenSeadragon.Viewport} viewport the viewport
* @returns {OpenSeadragon.Rect} overlay bounds
*/
getBounds: function() {
return this.bounds.clone();
getBounds: function(viewport) {
$.console.assert(viewport,
'A viewport must now be passed to Overlay.getBounds.');
var width = this.width;
var height = this.height;
if (width === null || height === null) {
var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
if (width === null) {
width = size.x;
}
if (height === null) {
height = size.y;
}
}
var location = this.location.clone();
this.adjust(location, new $.Point(width, height));
return this._adjustBoundsForRotation(
viewport, new $.Rect(location.x, location.y, width, height));
},
// private
_adjustBoundsForRotation: function(viewport, bounds) {
if (!viewport ||
viewport.degrees === 0 ||
this.rotationMode === $.OverlayRotationMode.EXACT) {
return bounds;
}
if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX) {
// If overlay not fully scalable, BOUNDING_BOX falls back to EXACT
if (this.width === null || this.height === null) {
return bounds;
}
// It is easier to just compute the position and size and
// convert to viewport coordinates.
var positionAndSize = this._getOverlayPositionAndSize(viewport);
return viewport.viewerElementToViewportRectangle(new $.Rect(
positionAndSize.position.x,
positionAndSize.position.y,
positionAndSize.size.x,
positionAndSize.size.y));
}
// NO_ROTATION case
return bounds.rotate(-viewport.degrees,
this._getPlacementPoint(bounds));
}
};
}( OpenSeadragon ));
}(OpenSeadragon));

29
src/rectangle.js
View File

@ -110,6 +110,33 @@ $.Rect = function(x, y, width, height, degrees) {
}
};
/**
* Builds a rectangle having the 3 specified points as summits.
* @static
* @memberof OpenSeadragon.Rect
* @param {OpenSeadragon.Point} topLeft
* @param {OpenSeadragon.Point} topRight
* @param {OpenSeadragon.Point} bottomLeft
* @returns {OpenSeadragon.Rect}
*/
$.Rect.fromSummits = function(topLeft, topRight, bottomLeft) {
var width = topLeft.distanceTo(topRight);
var height = topLeft.distanceTo(bottomLeft);
var diff = topRight.minus(topLeft);
var radians = Math.atan(diff.y / diff.x);
if (diff.x < 0) {
radians += Math.PI;
} else if (diff.y < 0) {
radians += 2 * Math.PI;
}
return new $.Rect(
topLeft.x,
topLeft.y,
width,
height,
radians / Math.PI * 180);
};
/** @lends OpenSeadragon.Rect.prototype */
$.Rect.prototype = {
/**
@ -284,7 +311,7 @@ $.Rect.prototype = {
* Rotates a rectangle around a point.
* @function
* @param {Number} degrees The angle in degrees to rotate.
* @param {OpenSeadragon.Point} pivot The point about which to rotate.
* @param {OpenSeadragon.Point} [pivot] The point about which to rotate.
* Defaults to the center of the rectangle.
* @return {OpenSeadragon.Rect}
*/

50
src/viewer.js
View File

@ -1788,7 +1788,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* is closed which include when changing page.
* @method
* @param {Element|String|Object} element - A reference to an element or an id for
* the element which will be overlayed. Or an Object specifying the configuration for the overlay
* the element which will be overlayed. Or an Object specifying the configuration for the overlay.
* If using an object, see {@link OpenSeadragon.Overlay} for a list of
* all available options.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.Placement} placement - The position of the
@ -2199,32 +2201,23 @@ function getOverlayObject( viewer, overlay ) {
}
var location = overlay.location;
if ( !location ) {
if ( overlay.width && overlay.height ) {
location = overlay.px !== undefined ?
viewer.viewport.imageToViewportRectangle( new $.Rect(
overlay.px,
overlay.py,
overlay.width,
overlay.height
) ) :
new $.Rect(
overlay.x,
overlay.y,
overlay.width,
overlay.height
);
} else {
location = overlay.px !== undefined ?
viewer.viewport.imageToViewportCoordinates( new $.Point(
overlay.px,
overlay.py
) ) :
new $.Point(
overlay.x,
overlay.y
);
var width = overlay.width;
var height = overlay.height;
if (!location) {
var x = overlay.x;
var y = overlay.y;
if (overlay.px !== undefined) {
var rect = viewer.viewport.imageToViewportRectangle(new $.Rect(
overlay.px,
overlay.py,
width || 0,
height || 0));
x = rect.x;
y = rect.y;
width = width !== undefined ? rect.width : undefined;
height = height !== undefined ? rect.height : undefined;
}
location = new $.Point(x, y);
}
var placement = overlay.placement;
@ -2237,7 +2230,10 @@ function getOverlayObject( viewer, overlay ) {
location: location,
placement: placement,
onDraw: overlay.onDraw,
checkResize: overlay.checkResize
checkResize: overlay.checkResize,
width: width,
height: height,
rotationMode: overlay.rotationMode
});
}

28
src/viewport.js
View File

@ -1312,6 +1312,34 @@ $.Viewport.prototype = {
return this.pixelFromPoint( point, true );
},
/**
* Convert a rectangle in pixel coordinates relative to the viewer element
* to viewport coordinates.
* @param {OpenSeadragon.Rect} rectangle the rectangle to convert
* @returns {OpenSeadragon.Rect} the converted rectangle
*/
viewerElementToViewportRectangle: function(rectangle) {
return $.Rect.fromSummits(
this.pointFromPixel(rectangle.getTopLeft(), true),
this.pointFromPixel(rectangle.getTopRight(), true),
this.pointFromPixel(rectangle.getBottomLeft(), true)
);
},
/**
* Convert a rectangle in viewport coordinates to pixel coordinates relative
* to the viewer element.
* @param {OpenSeadragon.Rect} rectangle the rectangle to convert
* @returns {OpenSeadragon.Rect} the converted rectangle
*/
viewportToViewerElementRectangle: function(rectangle) {
return $.Rect.fromSummits(
this.pixelFromPoint(rectangle.getTopLeft(), true),
this.pixelFromPoint(rectangle.getTopRight(), true),
this.pixelFromPoint(rectangle.getBottomLeft(), true)
);
},
/**
* Convert pixel coordinates relative to the window to viewport coordinates.
* @param {OpenSeadragon.Point} pixel

73
test/demo/overlay.html
View File

@ -14,7 +14,9 @@
<body>
<div id="contentDiv" class="openseadragon1"></div>
<div id="annotation-div">
<input type="button" value="Hide Overlay" id="hideOverlay">
<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">
@ -22,19 +24,74 @@
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi"
tileSources: "../data/testpattern.dzi",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10
});
viewer.addHandler("open", function(event) {
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "green";
elt.id = "runtime-overlay";
elt.style.border = "1px solid red";
viewer.addOverlay( elt, new OpenSeadragon.Rect(0.2, 0.2, 0.75, 0.75) );
});
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
});
$("#hideOverlay").click(function(){
$("#runtime-overlay").toggle();
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>

1043
test/modules/overlays.js
View File

File diff suppressed because it is too large Load Diff