diff --git a/src/viewport.js b/src/viewport.js index 49f70478..6d834564 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -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; } }; diff --git a/test/demo/coordinates.html b/test/demo/coordinates.html new file mode 100644 index 00000000..be8cbb4c --- /dev/null +++ b/test/demo/coordinates.html @@ -0,0 +1,77 @@ + + + + OpenSeadragon Basic Demo + + + + + +
+ Simple demo page to show a default OpenSeadragon viewer. +
+
+
+ + + + + + + + + + + + + + + +
Window (pixel)Container (pixel)Image (pixel)Viewport (point)
Cursor position
+
+ + + diff --git a/test/test.css b/test/test.css index 3b1617bc..eb651b16 100644 --- a/test/test.css +++ b/test/test.css @@ -13,3 +13,7 @@ width: 300px; } +#unitsexample { + height: 500px; + width: 500px; +} diff --git a/test/test.html b/test/test.html index fe42bec6..3bd6f919 100644 --- a/test/test.html +++ b/test/test.html @@ -22,5 +22,6 @@ + diff --git a/test/units.js b/test/units.js new file mode 100644 index 00000000..1417b801 --- /dev/null +++ b/test/units.js @@ -0,0 +1,116 @@ +/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */ + +(function() { + var viewer; + + module('Units', { + setup: function () { + var example = $('
').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'); + }); + + +})();