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

Fix TiledImage.fitBounds with clipping.

Browse Source
This commit is contained in:
Antoine Vandecreme 2016-03-24 11:48:29 -04:00
parent 3cacc8edcf
commit a52f4cadc5
2 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/tiledimage.js
View File

@ -570,32 +570,50 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
fitBounds: function(bounds, anchor, immediately) { fitBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER; anchor = anchor || $.Placement.CENTER;
var anchorProperties = $.Placement.properties[anchor]; var anchorProperties = $.Placement.properties[anchor];
if (bounds.getAspectRatio() > this.contentAspectX) { var aspectRatio = this.contentAspectX;
var xOffset = 0;
var yOffset = 0;
var displayedWidthRatio = 1;
var displayedHeightRatio = 1;
if (this._clip) {
aspectRatio = this._clip.getAspectRatio();
displayedWidthRatio = this._clip.width / this.source.dimensions.x;
displayedHeightRatio = this._clip.height / this.source.dimensions.y;
if (bounds.getAspectRatio() > aspectRatio) {
xOffset = this._clip.x / this._clip.height * bounds.height;
yOffset = this._clip.y / this._clip.height * bounds.height;
} else {
xOffset = this._clip.x / this._clip.width * bounds.width;
yOffset = this._clip.y / this._clip.width * bounds.width;
}
}
if (bounds.getAspectRatio() > aspectRatio) {
// We will have margins on the X axis // We will have margins on the X axis
var targetWidth = bounds.height * this.contentAspectX; var height = bounds.height / displayedHeightRatio;
var marginLeft = 0; var marginLeft = 0;
if (anchorProperties.isHorizontallyCentered) { if (anchorProperties.isHorizontallyCentered) {
marginLeft = (bounds.width - targetWidth) / 2; marginLeft = (bounds.width - bounds.height * aspectRatio) / 2;
} else if (anchorProperties.isRight) { } else if (anchorProperties.isRight) {
marginLeft = bounds.width - targetWidth; marginLeft = bounds.width - bounds.height * aspectRatio;
} }
this.setPosition( this.setPosition(
new $.Point(bounds.x + marginLeft, bounds.y), new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset),
immediately); immediately);
this.setHeight(bounds.height, immediately); this.setHeight(height, immediately);
} else { } else {
// We will have margins on the Y axis // We will have margins on the Y axis
var targetHeight = bounds.width / this.contentAspectX; var width = bounds.width / displayedWidthRatio;
var marginTop = 0; var marginTop = 0;
if (anchorProperties.isVerticallyCentered) { if (anchorProperties.isVerticallyCentered) {
marginTop = (bounds.height - targetHeight) / 2; marginTop = (bounds.height - bounds.width / aspectRatio) / 2;
} else if (anchorProperties.isBottom) { } else if (anchorProperties.isBottom) {
marginTop = bounds.height - targetHeight; marginTop = bounds.height - bounds.width / aspectRatio;
} }
this.setPosition( this.setPosition(
new $.Point(bounds.x, bounds.y + marginTop), new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop),
immediately); immediately);
this.setWidth(bounds.width, immediately); this.setWidth(width, immediately);
} }
}, },

44
test/modules/tiledimage.js
View File

@ -347,4 +347,48 @@
fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT
}]); }]);
}); });
asyncTest('fitBounds with clipping', function() {
function assertRectEquals(actual, expected, message) {
ok(actual.equals(expected), message + ' should be ' +
expected.toString() + ', found ' + actual.toString());
}
viewer.addHandler('open', function openHandler() {
viewer.removeHandler('open', openHandler);
var squareImage = viewer.world.getItemAt(0);
var actualBounds = squareImage.getBounds(true);
var expectedBounds = new OpenSeadragon.Rect(-1, -1, 2, 2);
assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
var tallImage = viewer.world.getItemAt(1);
actualBounds = tallImage.getBounds(true);
expectedBounds = new OpenSeadragon.Rect(1, 1, 2, 8);
assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
var wideImage = viewer.world.getItemAt(2);
actualBounds = wideImage.getBounds(true);
expectedBounds = new OpenSeadragon.Rect(1, 1, 16, 4);
assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
start();
});
viewer.open([{
tileSource: '/test/data/testpattern.dzi',
clip: new OpenSeadragon.Rect(500, 500, 500, 500),
fitBounds: new OpenSeadragon.Rect(0, 0, 1, 1)
}, {
tileSource: '/test/data/tall.dzi',
clip: new OpenSeadragon.Rect(0, 0, 250, 100),
fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
fitBoundsPlacement: OpenSeadragon.Placement.TOP
}, {
tileSource: '/test/data/wide.dzi',
clip: new OpenSeadragon.Rect(0, 0, 100, 250),
fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT
}]);
});
})(); })();