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

Add scaleWidth and scaleHeight options to overlays.

Browse Source
This commit is contained in:
Antoine Vandecreme 2016-03-25 16:49:58 -04:00
parent d631d97545
commit 3e3ce188b1
4 changed files with 156 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.txt
View File

@ -30,6 +30,7 @@ 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)
* Added scaledWidth and scaleHeight options to Rect overlays to allow to scale in only one dimension.
2.1.0:

141
src/overlay.js
View File

@ -75,6 +75,12 @@
* 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.
* @param {Boolean} [options.scaleWidth=true] Whether the width of the
* overlay should be adjusted when the zoom changes when using a
* {@link OpenSeadragon.Rect} as options.location
* @param {Boolean} [options.scaleHeight=true] Whether the height of the
* overlay should be adjusted when the zoom changes when using a
* {@link OpenSeadragon.Rect} as options.location
*/
$.Overlay = function(element, location, placement) {
@ -105,29 +111,35 @@
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
);
options.location.height);
// this.position is never read by this class but is kept for backward
// compatibility
this.position = this.bounds.getTopLeft();
// this.size is only used by PointOverlay with options.checkResize === false
this.size = this.bounds.getSize();
this.style = options.element.style;
// rects are always top-left
// rects are always top-left (RectOverlays don't use placement)
this.placement = options.location instanceof $.Point ?
options.placement : $.Placement.TOP_LEFT;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
this.scaleWidth = options.scaleWidth === undefined ?
true : options.scaleWidth;
this.scaleHeight = options.scaleHeight === undefined ?
true : options.scaleHeight;
};
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
/**
* Internal function to adjust the position of a PointOverlay
* depending on it size and anchor.
* @function
* @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
@ -153,8 +165,8 @@
* @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);
@ -178,9 +190,13 @@
style.position = "";
if (this.scales) {
if (this.scaleWidth) {
style.width = "";
}
if (this.scaleHeight) {
style.height = "";
}
}
},
/**
@ -188,18 +204,8 @@
* @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 ) {
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;
@ -207,67 +213,65 @@
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.scales ?
this._getRectOverlayPositionAndSize(viewport) :
this._getPointOverlayPositionAndSize(viewport);
this.position = position;
this.size = size;
this.adjust( position, size );
var position = this.position = positionAndSize.position;
var size = this.size = positionAndSize.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 ) );
}
// 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 );
this.onDraw(position, size, this.element);
} else {
var style = this.style;
style.left = position.x + "px";
style.top = position.y + "px";
if (this.scales) {
if (this.scaleWidth) {
style.width = size.x + "px";
}
if (this.scaleHeight) {
style.height = size.y + "px";
}
}
style.position = "absolute";
if (style.display != 'none') {
if (style.display !== 'none') {
style.display = 'block';
}
if ( scales ) {
style.width = size.x + "px";
style.height = size.y + "px";
}
}
},
// private
_getRectOverlayPositionAndSize: function(viewport) {
return {
position: viewport.pixelFromPoint(
this.bounds.getTopLeft(), true),
size: viewport.deltaPixelsFromPoints(
this.bounds.getSize(), true)
};
},
// private
_getPointOverlayPositionAndSize: function(viewport) {
var element = this.element;
var position = viewport.pixelFromPoint(
this.bounds.getTopLeft(), true);
var size = this.checkResize ? $.getElementSize(element) : this.size;
this.adjust(position, size);
return {
position: position,
size: size
};
},
/**
* Changes the location and placement of the overlay.
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @param {OpenSeadragon.Placement} position
@ -278,8 +282,7 @@
location.x,
location.y,
location.width,
location.height
);
location.height);
// rects are always top-left
this.placement = location instanceof $.Point ?
placement : $.Placement.TOP_LEFT;

8
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
@ -2237,7 +2239,9 @@ function getOverlayObject( viewer, overlay ) {
location: location,
placement: placement,
onDraw: overlay.onDraw,
checkResize: overlay.checkResize
checkResize: overlay.checkResize,
scaleWidth: overlay.scaleWidth,
scaleHeight: overlay.scaleHeight
});
}

54
test/demo/overlay.html
View File

@ -14,7 +14,7 @@
<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">
</div>
<script type="text/javascript">
@ -22,19 +22,61 @@
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.textContent = "Scaled overlay";
viewer.addOverlay(elt, new OpenSeadragon.Rect(0.2, 0.2, 0.1, 0.1));
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.border = "3px solid red";
elt.style.width = "100px";
elt.textContent = "Scaled vertically";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.6, 0.6, 0.1, 0.1),
scaleWidth: false
});
$("#hideOverlay").click(function(){
$("#runtime-overlay").toggle();
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
elt.style.border = "1px solid blue";
elt.style.height = "100px";
elt.textContent = "Scaled horizontally";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.1, 0.5, 0.1, 0.1),
scaleHeight: false
});
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
elt.style.border = "1px 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
});
});
$("#hideOverlays").click(function(){
$(".runtime-overlay").toggle();
});
</script>