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

Merge pull request #243 from avandecreme/master

Browse Source 
Add coordinates conversion methods to viewport.
This commit is contained in:
iangilman 2013-10-10 10:38:09 -07:00
commit 9050a39387
5 changed files with 303 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/viewport.js
View File

@ -602,7 +602,7 @@ $.Viewport.prototype = {
/**
* Gets the current rotation in degrees.
* @function
* @name OpenSeadragon.Viewport.prototype.setRotation
* @name OpenSeadragon.Viewport.prototype.getRotation
* @return {Number} The current rotation in degrees.
*/
getRotation: function() {
@ -678,6 +678,7 @@ $.Viewport.prototype = {
/**
* Convert a delta (translation vector) from pixels coordinates to viewport coordinates
* @function
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
*/
@ -688,6 +689,7 @@ $.Viewport.prototype = {
},
/**
* Convert a delta (translation vector) from viewport coordinates to pixels coordinates.
* @function
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
*/
@ -698,6 +700,7 @@ $.Viewport.prototype = {
},
/**
* Convert image pixel coordinates to viewport coordinates.
* @function
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
*/
@ -711,6 +714,7 @@ $.Viewport.prototype = {
},
/**
* Convert viewport coordinates to image pixel coordinates.
* @function
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
*/
@ -831,6 +835,106 @@ $.Viewport.prototype = {
coordB.x,
coordB.y
);
},
/**
* Convert pixel coordinates relative to the viewer element to image
* coordinates.
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
viewerElementToImageCoordinates: function( pixel ) {
var point = this.pointFromPixel( pixel, true );
return this.viewportToImageCoordinates( point );
},
/**
* Convert pixel coordinates relative to the image to
* viewer element coordinates.
* @param {OpenSeadragon.Point} point
* @returns {OpenSeadragon.Point}
*/
imageToViewerElementCoordinates: function( point ) {
var pixel = this.pixelFromPoint( point, true );
return this.imageToViewportCoordinates( pixel );
},
/**
* Convert pixel coordinates relative to the window to image coordinates.
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
windowToImageCoordinates: function( pixel ) {
var viewerCoordinates = pixel.minus(
OpenSeadragon.getElementPosition( this.viewer.element ));
return this.viewerElementToImageCoordinates( viewerCoordinates );
},
/**
* Convert image coordinates to pixel coordinates relative to the window.
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
imageToWindowCoordinates: function( pixel ) {
var viewerCoordinates = this.imageToViewerElementCoordinates( pixel );
return viewerCoordinates.plus(
OpenSeadragon.getElementPosition( this.viewer.element ));
},
/**
* Convert pixel coordinates relative to the viewer element to viewport
* coordinates.
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
viewerElementToViewportCoordinates: function( pixel ) {
return this.pointFromPixel( pixel, true );
},
/**
* Convert viewport coordinates to pixel coordinates relative to the
* viewer element.
* @param {OpenSeadragon.Point} point
* @returns {OpenSeadragon.Point}
*/
viewportToViewerElementCoordinates: function( point ) {
return this.pixelFromPoint( point, true );
},
/**
* Convert pixel coordinates relative to the window to viewport coordinates.
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
windowToViewportCoordinates: function( pixel ) {
var viewerCoordinates = pixel.minus(
OpenSeadragon.getElementPosition( this.viewer.element ));
return this.viewerElementToViewportCoordinates( viewerCoordinates );
},
/**
* Convert viewport coordinates to pixel coordinates relative to the window.
* @param {OpenSeadragon.Point} point
* @returns {OpenSeadragon.Point}
*/
viewportToWindowCoordinates: function( point ) {
var viewerCoordinates = this.viewportToViewerElementCoordinates( point );
return viewerCoordinates.plus(
OpenSeadragon.getElementPosition( this.viewer.element ));
},
/**
* Get the zoom ratio of the image. 1 means original image size, 0.5 half size...
* @function
* @param {Boolean} current If true gives the current zoom otherwise gives the
* target zoom.
* @returns {Number}
*/
getImageZoomRatio: function( current ) {
var imageWidth = this.viewer.source.dimensions.x;
var containerWidth = this.getContainerSize().x;
var zoomToZoomLevelRatio = containerWidth / imageWidth;
return this.getZoom( current ) * zoomToZoomLevelRatio;
}
};

77
test/demo/coordinates.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Basic 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>
Simple demo page to show a default OpenSeadragon viewer.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<div>
<table border="1">
<tr>
<th></th>
<th>Window (pixel)</th>
<th>Container (pixel)</th>
<th>Image (pixel)</th>
<th>Viewport (point)</th>
</tr>
<tr>
<th>Cursor position</th>
<td id="windowPosition"></td>
<td id="containerPosition"></td>
<td id="imagePosition"></td>
<td id="viewportPosition"></td>
<tr>
</table>
</div>
<script type="text/javascript">
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
showNavigator:true
});
function pointToString(point) {
return point.x.toPrecision(4) + "," + point.y.toPrecision(4);
}
var onMouseTrackerMove = function(eventSender, eventData) {
var viewerX = eventData.position.x;
var viewerY = eventData.position.y;
var windowPoint = new OpenSeadragon.Point(viewerX, viewerY);
$("#windowPosition").text( pointToString(windowPoint));
var containerPoint = windowPoint.minus(
OpenSeadragon.getElementPosition(viewer.element));
$("#containerPosition").text( pointToString(containerPoint));
var imagePoint = viewer.viewport.windowToImageCoordinates(windowPoint);
$("#imagePosition").text( pointToString(imagePoint));
var viewportPoint = viewer.viewport.windowToViewportCoordinates(windowPoint);
$("#viewportPosition").text( pointToString(viewportPoint));
};
mouseTracker = new OpenSeadragon.MouseTracker({
element: document,
moveHandler: onMouseTrackerMove
}).setTracking(true);
</script>
</body>
</html>

4
test/test.css
View File

@ -13,3 +13,7 @@
width: 300px;
}
#unitsexample {
height: 500px;
width: 500px;
}

1
test/test.html
View File

@ -22,5 +22,6 @@
<script src="/test/formats.js"></script>
<script src="/test/utils.js"></script>
<script src="/test/events.js"></script>
<script src="/test/units.js"></script>
</body>
</html>

116
test/units.js Normal file
View File

@ -0,0 +1,116 @@
/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
(function() {
var viewer;
module('Units', {
setup: function () {
var example = $('<div id="unitsexample"></div>').appendTo("#qunit-fixture");
testLog.reset();
viewer = OpenSeadragon({
id: 'unitsexample',
prefixUrl: '/build/openseadragon/images/',
springStiffness: 100 // Faster animation = faster tests
});
},
teardown: function () {
if (viewer && viewer.close) {
viewer.close();
}
viewer = null;
}
});
function pointEqual(a, b, message) {
ok(a.x === b.x && a.y === b.y, message);
}
// ----------
asyncTest('Coordinates conversions', function() {
viewer.addHandler("open", function () {
var viewport = viewer.viewport;
var point0_0 = new OpenSeadragon.Point(0, 0);
var point = viewport.viewerElementToViewportCoordinates(point0_0);
pointEqual(point, point0_0, 'When opening, viewer coordinate 0,0 is also point 0,0');
var pixel = viewport.viewerElementToImageCoordinates(point0_0);
pointEqual(pixel, point0_0, 'When opening, viewer coordinate 0,0 is also pixel 0,0');
var viewerWidth = $(viewer.element).width();
var imageWidth = viewer.source.dimensions.x;
var point1_0 = new OpenSeadragon.Point(1, 0);
var viewerTopRight = new OpenSeadragon.Point(viewerWidth, 0);
var imageTopRight = new OpenSeadragon.Point(imageWidth, 0);
var point = viewport.viewerElementToViewportCoordinates(viewerTopRight);
pointEqual(point, point1_0, 'Viewer top right has viewport coordinates 1,0.');
var pixel = viewport.viewerElementToImageCoordinates(viewerTopRight);
pointEqual(pixel, imageTopRight, 'Viewer top right has viewport coordinates imageWidth,0.');
var point = new OpenSeadragon.Point(15, 12);
var result = viewport.viewerElementToImageCoordinates(
viewport.imageToViewerElementCoordinates(point));
pointEqual(result, point, 'viewerElement and image');
var result = viewport.windowToImageCoordinates(
viewport.imageToWindowCoordinates(point));
pointEqual(result, point, 'window and image');
var result = viewport.viewerElementToViewportCoordinates(
viewport.viewportToViewerElementCoordinates(point));
pointEqual(result, point, 'viewerElement and viewport');
var result = viewport.windowToViewportCoordinates(
viewport.viewportToWindowCoordinates(point));
pointEqual(result, point, 'window and viewport');
start();
});
viewer.open('/test/data/testpattern.dzi');
});
// ----------
asyncTest('ZoomRatio', function() {
viewer.addHandler("open", function () {
var viewport = viewer.viewport;
var imageWidth = 1000;
function getCurrentImageWidth() {
return viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(1, 0)).minus(
viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0, 0))).x;
}
function checkZoom() {
var currentImageWidth = getCurrentImageWidth();
var expected = currentImageWidth / imageWidth;
var actual = viewport.getImageZoomRatio(true);
equal(actual, expected);
}
checkZoom();
var zoomHandler = function() {
viewer.removeHandler('animationfinish', zoomHandler);
checkZoom();
start();
};
viewer.addHandler('animationfinish', zoomHandler);
viewport.zoomTo(2);
start();
});
viewer.open('/test/data/testpattern.dzi');
});
})();