mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
Fix coordinates conversion with rotation.
This commit is contained in:
Antoine Vandecreme
parent
d1afae6ca0
commit
52f8ad6aa2
@ -267,13 +267,14 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from OpenSeadragon viewer rectangle to drawer rectangle.
|
||||
* Scale from OpenSeadragon viewer rectangle to drawer rectangle
|
||||
* (ignoring rotation)
|
||||
* @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
|
||||
* @return {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
|
||||
*/
|
||||
viewportToDrawerRectangle: function(rectangle) {
|
||||
var topLeft = this.viewport.pixelFromPoint(rectangle.getTopLeft(), true);
|
||||
var size = this.viewport.deltaPixelsFromPoints(rectangle.getSize(), true);
|
||||
var topLeft = this.viewport.scalePixelFromPoint(rectangle.getTopLeft(), true);
|
||||
var size = this.viewport.scaleDeltaPixelsFromPoints(rectangle.getSize(), true);
|
||||
|
||||
return new $.Rect(
|
||||
topLeft.x * $.pixelDensityRatio,
|
||||
@ -300,15 +301,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
if (this.useCanvas) {
|
||||
var context = this._getContext(useSketch);
|
||||
scale = scale || 1;
|
||||
// TODO do this in a more performant way
|
||||
// specifically, don't save,rotate,restore every time we draw a tile
|
||||
if( this.viewport.degrees !== 0 ) {
|
||||
this._offsetForRotation( tile, this.viewport.degrees, useSketch );
|
||||
tile.drawCanvas(context, drawingHandler, scale, translate);
|
||||
this._restoreRotationChanges( tile, useSketch );
|
||||
} else {
|
||||
tile.drawCanvas( context, drawingHandler, scale, translate );
|
||||
}
|
||||
} else {
|
||||
tile.drawHTML( this.canvas );
|
||||
}
|
||||
@ -418,7 +411,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
context.fillStyle = this.debugGridColor;
|
||||
|
||||
if ( this.viewport.degrees !== 0 ) {
|
||||
this._offsetForRotation( tile, this.viewport.degrees );
|
||||
this._offsetForRotation(this.viewport.degrees);
|
||||
}
|
||||
|
||||
context.strokeRect(
|
||||
@ -480,7 +473,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
);
|
||||
|
||||
if ( this.viewport.degrees !== 0 ) {
|
||||
this._restoreRotationChanges( tile );
|
||||
this._restoreRotationChanges();
|
||||
}
|
||||
context.restore();
|
||||
},
|
||||
@ -506,9 +499,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
},
|
||||
|
||||
// private
|
||||
_offsetForRotation: function( tile, degrees, useSketch ){
|
||||
var cx = this.canvas.width / 2,
|
||||
cy = this.canvas.height / 2;
|
||||
_offsetForRotation: function(degrees, useSketch) {
|
||||
var cx = this.canvas.width / 2;
|
||||
var cy = this.canvas.height / 2;
|
||||
|
||||
var context = this._getContext(useSketch);
|
||||
context.save();
|
||||
@ -519,7 +512,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
|
||||
},
|
||||
|
||||
// private
|
||||
_restoreRotationChanges: function( tile, useSketch ){
|
||||
_restoreRotationChanges: function(useSketch) {
|
||||
var context = this._getContext(useSketch);
|
||||
context.restore();
|
||||
},
|
||||
|
||||
@ -307,8 +307,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
|
||||
|
||||
if( viewport && this.viewport ) {
|
||||
bounds = viewport.getBounds( true );
|
||||
topleft = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
|
||||
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false )
|
||||
topleft = this.viewport.scalePixelFromPoint(bounds.getTopLeft(), false);
|
||||
bottomright = this.viewport.scalePixelFromPoint(bounds.getBottomRight(), false)
|
||||
.minus( this.totalBorderWidths );
|
||||
|
||||
//update style for navigator-box
|
||||
|
||||
12
src/point.js
12
src/point.js
@ -179,13 +179,17 @@ $.Point.prototype = /** @lends OpenSeadragon.Point.prototype */{
|
||||
* From http://stackoverflow.com/questions/4465931/rotate-rectangle-around-a-point
|
||||
* @function
|
||||
* @param {Number} degress to rotate around the pivot.
|
||||
* @param {OpenSeadragon.Point} pivot Point about which to rotate.
|
||||
* @param {OpenSeadragon.Point} [pivot=(0,0)] Point around which to rotate.
|
||||
* Defaults to the origin.
|
||||
* @returns {OpenSeadragon.Point}. A new point representing the point rotated around the specified pivot
|
||||
*/
|
||||
rotate: function (degrees, pivot) {
|
||||
var angle = degrees * Math.PI / 180.0,
|
||||
x = Math.cos( angle ) * ( this.x - pivot.x ) - Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x,
|
||||
y = Math.sin( angle ) * ( this.x - pivot.x ) + Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y;
|
||||
pivot = pivot || new $.Point(0, 0);
|
||||
var angle = degrees * Math.PI / 180.0;
|
||||
var cos = Math.cos(angle);
|
||||
var sin = Math.sin(angle);
|
||||
var x = cos * (this.x - pivot.x) - sin * (this.y - pivot.y) + pivot.x;
|
||||
var y = sin * (this.x - pivot.x) + cos * (this.y - pivot.y) + pivot.y;
|
||||
return new $.Point(x, y);
|
||||
},
|
||||
|
||||
|
||||
@ -351,7 +351,7 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{
|
||||
(Math.round(this.y * 100) / 100) + "," +
|
||||
(Math.round(this.width * 100) / 100) + "x" +
|
||||
(Math.round(this.height * 100) / 100) + "," +
|
||||
(Math.round(this.degrees * 100) / 100) + "°" +
|
||||
(Math.round(this.degrees * 100) / 100) + "deg" +
|
||||
"]";
|
||||
}
|
||||
};
|
||||
|
||||
@ -357,23 +357,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
|
||||
* @return {OpenSeadragon.Rect} A rect representing the coordinates in the viewport.
|
||||
*/
|
||||
imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight, current ) {
|
||||
if (imageX instanceof $.Rect) {
|
||||
var rect = imageX;
|
||||
if (rect instanceof $.Rect) {
|
||||
//they passed a rect instead of individual components
|
||||
current = imageY;
|
||||
pixelWidth = imageX.width;
|
||||
pixelHeight = imageX.height;
|
||||
imageY = imageX.y;
|
||||
imageX = imageX.x;
|
||||
} else {
|
||||
rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
|
||||
}
|
||||
|
||||
var coordA = this.imageToViewportCoordinates(imageX, imageY, current);
|
||||
var coordB = this._imageToViewportDelta(pixelWidth, pixelHeight, current);
|
||||
var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current);
|
||||
var coordB = this._imageToViewportDelta(rect.width, rect.height, current);
|
||||
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordB.x,
|
||||
coordB.y
|
||||
coordB.y,
|
||||
rect.degrees
|
||||
);
|
||||
},
|
||||
|
||||
@ -389,23 +389,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
|
||||
* @return {OpenSeadragon.Rect} A rect representing the coordinates in the image.
|
||||
*/
|
||||
viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) {
|
||||
var rect = viewerX;
|
||||
if (viewerX instanceof $.Rect) {
|
||||
//they passed a rect instead of individual components
|
||||
current = viewerY;
|
||||
pointWidth = viewerX.width;
|
||||
pointHeight = viewerX.height;
|
||||
viewerY = viewerX.y;
|
||||
viewerX = viewerX.x;
|
||||
} else {
|
||||
rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
|
||||
}
|
||||
|
||||
var coordA = this.viewportToImageCoordinates(viewerX, viewerY, current);
|
||||
var coordB = this._viewportToImageDelta(pointWidth, pointHeight, current);
|
||||
var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current);
|
||||
var coordB = this._viewportToImageDelta(rect.width, rect.height, current);
|
||||
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordB.x,
|
||||
coordB.y
|
||||
coordB.y,
|
||||
rect.degrees
|
||||
);
|
||||
},
|
||||
|
||||
@ -652,7 +652,7 @@ function updateViewport( tiledImage ) {
|
||||
haveDrawn = false,
|
||||
currentTime = $.now(),
|
||||
viewportBounds = tiledImage.viewport.getBoundsWithMargins( true ),
|
||||
zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints(
|
||||
zeroRatioC = tiledImage.viewport.scaleDeltaPixelsFromPoints(
|
||||
tiledImage.source.getPixelRatio( 0 ),
|
||||
true
|
||||
).x * tiledImage._scaleSpring.current.value,
|
||||
@ -733,7 +733,7 @@ function updateViewport( tiledImage ) {
|
||||
drawLevel = false;
|
||||
|
||||
//Avoid calculations for draw if we have already drawn this
|
||||
renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints(
|
||||
renderPixelRatioC = tiledImage.viewport.scaleDeltaPixelsFromPoints(
|
||||
tiledImage.source.getPixelRatio( level ),
|
||||
true
|
||||
).x * tiledImage._scaleSpring.current.value;
|
||||
@ -747,12 +747,12 @@ function updateViewport( tiledImage ) {
|
||||
}
|
||||
|
||||
//Perform calculations for draw if we haven't drawn this
|
||||
renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints(
|
||||
renderPixelRatioT = tiledImage.viewport.scaleDeltaPixelsFromPoints(
|
||||
tiledImage.source.getPixelRatio( level ),
|
||||
false
|
||||
).x * tiledImage._scaleSpring.current.value;
|
||||
|
||||
zeroRatioT = tiledImage.viewport.deltaPixelsFromPoints(
|
||||
zeroRatioT = tiledImage.viewport.scaleDeltaPixelsFromPoints(
|
||||
tiledImage.source.getPixelRatio(
|
||||
Math.max(
|
||||
tiledImage.source.getClosestLevel( tiledImage.viewport.containerSize ) - 1,
|
||||
@ -1140,10 +1140,10 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility,
|
||||
boundsSize.x *= tiledImage._scaleSpring.current.value;
|
||||
boundsSize.y *= tiledImage._scaleSpring.current.value;
|
||||
|
||||
var positionC = viewport.pixelFromPoint( boundsTL, true ),
|
||||
positionT = viewport.pixelFromPoint( boundsTL, false ),
|
||||
sizeC = viewport.deltaPixelsFromPoints( boundsSize, true ),
|
||||
sizeT = viewport.deltaPixelsFromPoints( boundsSize, false ),
|
||||
var positionC = viewport.scalePixelFromPoint(boundsTL, true),
|
||||
positionT = viewport.scalePixelFromPoint(boundsTL, false),
|
||||
sizeC = viewport.scaleDeltaPixelsFromPoints(boundsSize, true),
|
||||
sizeT = viewport.scaleDeltaPixelsFromPoints(boundsSize, false),
|
||||
tileCenter = positionT.plus( sizeT.divide( 2 ) ),
|
||||
tileDistance = viewportCenter.distanceTo( tileCenter );
|
||||
|
||||
@ -1331,6 +1331,10 @@ function drawTiles( tiledImage, lastDrawn ) {
|
||||
tiledImage._drawer._clear( true );
|
||||
}
|
||||
|
||||
if (tiledImage.viewport.degrees !== 0) {
|
||||
tiledImage._drawer._offsetForRotation(tiledImage.viewport.degrees, useSketch);
|
||||
}
|
||||
|
||||
var usedClip = false;
|
||||
if ( tiledImage._clip ) {
|
||||
tiledImage._drawer.saveContext(useSketch);
|
||||
@ -1396,6 +1400,10 @@ function drawTiles( tiledImage, lastDrawn ) {
|
||||
tiledImage._drawer.restoreContext( useSketch );
|
||||
}
|
||||
|
||||
if (tiledImage.viewport.degrees !== 0) {
|
||||
tiledImage._drawer._restoreRotationChanges(useSketch);
|
||||
}
|
||||
|
||||
if ( useSketch ) {
|
||||
tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale, sketchTranslate );
|
||||
}
|
||||
|
||||
141
src/viewport.js
141
src/viewport.js
@ -704,7 +704,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
this.centerSpringX.target.value,
|
||||
this.centerSpringY.target.value
|
||||
);
|
||||
delta = delta.rotate( -this.degrees, new $.Point( 0, 0 ) );
|
||||
return this.panTo( center.plus( delta ), immediately );
|
||||
},
|
||||
|
||||
@ -751,13 +750,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
* @fires OpenSeadragon.Viewer.event:zoom
|
||||
*/
|
||||
zoomBy: function(factor, refPoint, immediately) {
|
||||
if( refPoint instanceof $.Point && !isNaN( refPoint.x ) && !isNaN( refPoint.y ) ) {
|
||||
refPoint = refPoint.rotate(
|
||||
-this.degrees,
|
||||
new $.Point( this.centerSpringX.target.value, this.centerSpringY.target.value )
|
||||
);
|
||||
}
|
||||
return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
|
||||
return this.zoomTo(
|
||||
this.zoomSpring.target.value * factor, refPoint, immediately);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -936,40 +930,79 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
return changed;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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).
|
||||
* Scale a delta (translation vector) from pixels coordinates to viewport
|
||||
* coordinates. This method does not take rotation into account.
|
||||
* Consider using deltaPixelsFromPoints if you need to account for rotation.
|
||||
* @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
|
||||
* @param {Boolean} [current=false] - Pass true for the current location;
|
||||
* defaults to false (target location).
|
||||
* @returns {OpenSeadragon.Point}
|
||||
*/
|
||||
deltaPixelsFromPoints: function( deltaPoints, current ) {
|
||||
scaleDeltaPixelsFromPoints: function(deltaPoints, current) {
|
||||
return deltaPoints.times(
|
||||
this._containerInnerSize.x * this.getZoom(current)
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 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).
|
||||
* Convert a delta (translation vector) from pixels coordinates to viewport
|
||||
* coordinates.
|
||||
* @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
|
||||
* @param {Boolean} [current=false] - Pass true for the current location;
|
||||
* defaults to false (target location).
|
||||
* @returns {OpenSeadragon.Point}
|
||||
*/
|
||||
deltaPointsFromPixels: function( deltaPixels, current ) {
|
||||
deltaPixelsFromPoints: function(deltaPoints, current) {
|
||||
return this.scaleDeltaPixelsFromPoints(
|
||||
deltaPoints.rotate(this.getRotation()),
|
||||
current);
|
||||
},
|
||||
|
||||
/**
|
||||
* Scale a delta (translation vector) from viewport coordinates to pixels
|
||||
* coordinates. This method does not take rotation into account.
|
||||
* Consider using deltaPointsFromPixels if you need to account for rotation.
|
||||
* @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
|
||||
* @param {Boolean} [current=false] - Pass true for the current location;
|
||||
* defaults to false (target location).
|
||||
* @returns {OpenSeadragon.Point}
|
||||
*/
|
||||
scaleDeltaPointsFromPixels: function(deltaPixels, current) {
|
||||
return deltaPixels.divide(
|
||||
this._containerInnerSize.x * this.getZoom(current)
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert a delta (translation vector) from viewport coordinates to pixels coordinates.
|
||||
* @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
|
||||
* @param {Boolean} [current=false] - Pass true for the current location;
|
||||
* defaults to false (target location).
|
||||
* @returns {OpenSeadragon.Point}
|
||||
*/
|
||||
deltaPointsFromPixels: function(deltaPixels, current) {
|
||||
return this.scaleDeltaPointsFromPixels(deltaPixels, current)
|
||||
.rotate(-this.getRotation());
|
||||
},
|
||||
|
||||
scalePixelFromPoint: function(point, current) {
|
||||
return this._scalePixelFromPoint(point, this.getBounds(current));
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert image pixel coordinates to viewport coordinates.
|
||||
* @function
|
||||
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
|
||||
* @param {Boolean} [current=false] - Pass true for the current location;
|
||||
* defaults to false (target location).
|
||||
* @param {Boolean} [ignoreRotation=false] - Pass true to ignore the rotation
|
||||
*/
|
||||
pixelFromPoint: function(point, current) {
|
||||
return this._pixelFromPoint(point, this.getBounds(current));
|
||||
},
|
||||
|
||||
// private
|
||||
_pixelFromPoint: function( point, bounds ) {
|
||||
_scalePixelFromPoint: function(point, bounds) {
|
||||
return point.minus(
|
||||
bounds.getTopLeft()
|
||||
).times(
|
||||
@ -979,12 +1012,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert viewport coordinates to image pixel coordinates.
|
||||
* @function
|
||||
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
|
||||
*/
|
||||
pointFromPixel: function( pixel, current ) {
|
||||
// private
|
||||
_pixelFromPoint: function(point, bounds) {
|
||||
return this._scalePixelFromPoint(
|
||||
point.rotate(this.getRotation(), this.getCenter(true)),
|
||||
bounds);
|
||||
},
|
||||
|
||||
scalePointFromPixel: function(pixel, current) {
|
||||
var bounds = this.getBounds( current );
|
||||
return pixel.minus(
|
||||
new $.Point(this._margins.left, this._margins.top)
|
||||
@ -995,6 +1030,18 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert viewport coordinates to image pixel coordinates.
|
||||
* @function
|
||||
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
|
||||
*/
|
||||
pointFromPixel: function(pixel, current) {
|
||||
return this.scalePointFromPixel(pixel, current).rotate(
|
||||
-this.getRotation(),
|
||||
this.getCenter(true)
|
||||
);
|
||||
},
|
||||
|
||||
// private
|
||||
_viewportToImageDelta: function( viewerX, viewerY ) {
|
||||
var scale = this.homeBounds.width;
|
||||
@ -1076,28 +1123,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
* @param {Number} pixelHeight the height in pixel of the rectangle.
|
||||
*/
|
||||
imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight) {
|
||||
var coordA,
|
||||
coordB,
|
||||
rect;
|
||||
if( arguments.length == 1 ) {
|
||||
//they passed a rectangle instead of individual components
|
||||
rect = imageX;
|
||||
return this.imageToViewportRectangle(
|
||||
rect.x, rect.y, rect.width, rect.height
|
||||
);
|
||||
var rect = imageX;
|
||||
if (!(rect instanceof $.Rect)) {
|
||||
//they passed individual components instead of a rectangle
|
||||
rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
|
||||
}
|
||||
|
||||
coordA = this.imageToViewportCoordinates(
|
||||
imageX, imageY
|
||||
);
|
||||
coordB = this._imageToViewportDelta(
|
||||
pixelWidth, pixelHeight
|
||||
);
|
||||
var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
|
||||
var coordB = this._imageToViewportDelta(rect.width, rect.height);
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordB.x,
|
||||
coordB.y
|
||||
coordB.y,
|
||||
rect.degrees
|
||||
);
|
||||
},
|
||||
|
||||
@ -1117,24 +1156,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
|
||||
* @param {Number} pointHeight the height of the rectangle in viewport coordinate system.
|
||||
*/
|
||||
viewportToImageRectangle: function(viewerX, viewerY, pointWidth, pointHeight) {
|
||||
var coordA,
|
||||
coordB,
|
||||
rect;
|
||||
if ( arguments.length == 1 ) {
|
||||
//they passed a rectangle instead of individual components
|
||||
rect = viewerX;
|
||||
return this.viewportToImageRectangle(
|
||||
rect.x, rect.y, rect.width, rect.height
|
||||
);
|
||||
var rect = viewerX;
|
||||
if (!(rect instanceof $.Rect)) {
|
||||
//they passed individual components instead of a rectangle
|
||||
rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
|
||||
}
|
||||
|
||||
coordA = this.viewportToImageCoordinates( viewerX, viewerY );
|
||||
coordB = this._viewportToImageDelta(pointWidth, pointHeight);
|
||||
var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
|
||||
var coordB = this._viewportToImageDelta(rect.width, rect.height);
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordB.x,
|
||||
coordB.y
|
||||
coordB.y,
|
||||
rect.degrees
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
@ -24,38 +24,55 @@
|
||||
<th></th>
|
||||
<th>Window (pixel)</th>
|
||||
<th>Container (pixel)</th>
|
||||
<th>Image 1 - top left (pixel)</th>
|
||||
<th>Image 2 - bottom right (pixel)</th>
|
||||
<th>Viewport (point)</th>
|
||||
<th>Big Image (pixel)</th>
|
||||
<th>Small Image (pixel)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Cursor position</th>
|
||||
<td id="windowPosition"></td>
|
||||
<td id="containerPosition"></td>
|
||||
<td id="image1Position"></td>
|
||||
<td id="image2Position"></td>
|
||||
<td id="viewportPosition"></td>
|
||||
<td id="cursorWindowPosition"></td>
|
||||
<td id="cursorContainerPosition"></td>
|
||||
<td id="cursorViewportPosition"></td>
|
||||
<td id="cursorImage1Position"></td>
|
||||
<td id="cursorImage2Position"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Big Image top left position</th>
|
||||
<td id="image1WindowPosition"></td>
|
||||
<td id="image1ContainerPosition"></td>
|
||||
<td id="image1ViewportPosition"></td>
|
||||
<td id="image1Image1Position"></td>
|
||||
<td id="image1Image2Position"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Small Image top left position</th>
|
||||
<td id="image2WindowPosition"></td>
|
||||
<td id="image2ContainerPosition"></td>
|
||||
<td id="image2ViewportPosition"></td>
|
||||
<td id="image2Image1Position"></td>
|
||||
<td id="image2Image2Position"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zoom</th>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td id="viewportZoom"></td>
|
||||
<td id="image1Zoom"></td>
|
||||
<td id="image2Zoom"></td>
|
||||
<td id="viewportZoom"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<button onclick="rotate();">Rotate</button>
|
||||
<script type="text/javascript">
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
// debugMode: true,
|
||||
debugMode: true,
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
tileSources: [{
|
||||
tileSource: "../data/testpattern.dzi"
|
||||
},
|
||||
{
|
||||
tileSource: "../data/testpattern.dzi",
|
||||
clip: new OpenSeadragon.Rect(0, 0, 500, 1000)
|
||||
}, {
|
||||
tileSource: "../data/testpattern.dzi",
|
||||
x: 1,
|
||||
y: 1,
|
||||
@ -64,28 +81,29 @@
|
||||
],
|
||||
showNavigator: true
|
||||
});
|
||||
viewer.addHandler("open", onAnimation);
|
||||
|
||||
function pointToString(point) {
|
||||
return point.x.toPrecision(4) + "," + point.y.toPrecision(4);
|
||||
}
|
||||
|
||||
var onMouseTrackerMove = function (event) {
|
||||
function onMouseTrackerMove(event) {
|
||||
var viewerX = event.position.x;
|
||||
var viewerY = event.position.y;
|
||||
var windowPoint = new OpenSeadragon.Point(viewerX, viewerY);
|
||||
$("#windowPosition").text(pointToString(windowPoint));
|
||||
$("#cursorWindowPosition").text(pointToString(windowPoint));
|
||||
var containerPoint = windowPoint.minus(
|
||||
OpenSeadragon.getElementPosition(viewer.element));
|
||||
$("#containerPosition").text(pointToString(containerPoint));
|
||||
$("#cursorContainerPosition").text(pointToString(containerPoint));
|
||||
var image1 = viewer.world.getItemAt(0);
|
||||
var imagePoint = image1.windowToImageCoordinates(windowPoint);
|
||||
$("#image1Position").text(pointToString(imagePoint));
|
||||
$("#cursorImage1Position").text(pointToString(imagePoint));
|
||||
var image2 = viewer.world.getItemAt(1);
|
||||
var imagePoint = image2.windowToImageCoordinates(windowPoint);
|
||||
$("#image2Position").text(pointToString(imagePoint));
|
||||
$("#cursorImage2Position").text(pointToString(imagePoint));
|
||||
var viewportPoint = viewer.viewport.windowToViewportCoordinates(windowPoint);
|
||||
$("#viewportPosition").text(pointToString(viewportPoint));
|
||||
};
|
||||
$("#cursorViewportPosition").text(pointToString(viewportPoint));
|
||||
}
|
||||
mouseTracker = new OpenSeadragon.MouseTracker({
|
||||
element: document,
|
||||
moveHandler: onMouseTrackerMove
|
||||
@ -100,9 +118,40 @@
|
||||
var image2 = viewer.world.getItemAt(1);
|
||||
var image2Zoom = image2.viewportToImageZoom(viewportZoom);
|
||||
$("#image2Zoom").text(image2Zoom.toFixed(3));
|
||||
|
||||
var origin = new OpenSeadragon.Point(0, 0);
|
||||
var image1WindowPoint = image1.imageToWindowCoordinates(origin);
|
||||
$("#image1WindowPosition").text(pointToString(image1WindowPoint));
|
||||
var image1ContainerPoint = image1.imageToViewerElementCoordinates(origin);
|
||||
$("#image1ContainerPosition").text(pointToString(image1ContainerPoint));
|
||||
var image1Image1Position = image1.viewportToImageCoordinates(
|
||||
image1.getBounds(true).getTopLeft());
|
||||
$("#image1Image1Position").text(pointToString(image1Image1Position));
|
||||
var image1Image2Position = image1.viewportToImageCoordinates(
|
||||
image2.getBounds(true).getTopLeft());
|
||||
$("#image1Image2Position").text(pointToString(image1Image2Position));
|
||||
var image1ViewportPoint = image1.imageToViewportCoordinates(origin);
|
||||
$("#image1ViewportPosition").text(pointToString(image1ViewportPoint));
|
||||
|
||||
var image2WindowPoint = image2.imageToWindowCoordinates(origin);
|
||||
$("#image2WindowPosition").text(pointToString(image2WindowPoint));
|
||||
var image2ContainerPoint = image2.imageToViewerElementCoordinates(origin);
|
||||
$("#image2ContainerPosition").text(pointToString(image2ContainerPoint));
|
||||
var image2Image1Position = image2.viewportToImageCoordinates(
|
||||
image1.getBounds(true).getTopLeft());
|
||||
$("#image2Image1Position").text(pointToString(image2Image1Position));
|
||||
var image2Image2Position = image2.viewportToImageCoordinates(
|
||||
image2.getBounds(true).getTopLeft());
|
||||
$("#image2Image2Position").text(pointToString(image2Image2Position));
|
||||
var image2ViewportPoint = image2.imageToViewportCoordinates(origin);
|
||||
$("#image2ViewportPosition").text(pointToString(image2ViewportPoint));
|
||||
}
|
||||
viewer.addHandler("animation", onAnimation);
|
||||
|
||||
function rotate() {
|
||||
viewer.viewport.setRotation(viewer.viewport.getRotation() + 45);
|
||||
onAnimation();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user