archive-gh-me/viewerjs
1
0
Fork 0
mirror of https://github.com/fengyuanchen/viewerjs.git synced 2026-01-25 15:23:40 +00:00
Code Issues Projects Releases Wiki Activity

docs: move the image into view if it is invisible after zoomed out

Browse Source 
Fix #429
This commit is contained in:
Chen Fengyuan 2020-12-08 20:15:21 +08:00
parent 9ee9124110
commit b8a0fd4e69
1 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/examples/moving-range-limit.html
View File

@ -54,13 +54,13 @@
<script>
window.addEventListener('DOMContentLoaded', function () {
var galley = document.getElementById('galley');
var maxOffsetPercentage = 0.9;
var viewer = new Viewer(galley, {
url: 'data-original',
backdrop: 'static',
move: function (event) {
var viewerData = viewer.viewerData;
var imageData = viewer.imageData;
var maxOffsetPercentage = 0.9;
var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
var detail = event.detail;
@ -68,23 +68,61 @@
var top = detail.y;
var right = viewerData.width - (left + imageData.width);
var bottom = viewerData.height - (top + imageData.height);
if (
// Move up
(detail.y < detail.oldY && bottom > 0 && bottom > maxOffsetVertical)
// Move down
|| (detail.y > detail.oldY && top > 0 && top > maxOffsetVertical)
// Move left
|| (detail.x < detail.oldX && right > 0 && right > maxOffsetHorizontal)
(detail.x < detail.oldX && right > 0 && right > maxOffsetHorizontal)
// Move right
|| (detail.x > detail.oldX && left > 0 && left > maxOffsetHorizontal)
// Move up
|| (detail.y < detail.oldY && bottom > 0 && bottom > maxOffsetVertical)
// Move down
|| (detail.y > detail.oldY && top > 0 && top > maxOffsetVertical)
) {
event.preventDefault();
}
},
zoomed: function (event) {
var detail = event.detail;
// Zoom out
if (detail.ratio < detail.oldRatio) {
var viewerData = viewer.viewerData;
var imageData = viewer.imageData;
var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
var left = imageData.x;
var top = imageData.y;
var right = viewerData.width - (left + imageData.width);
var bottom = viewerData.height - (top + imageData.height);
var x = 0;
var y = 0;
if (right > 0 && right > maxOffsetHorizontal) {
x = maxOffsetHorizontal - right;
}
if (left > 0 && left > maxOffsetHorizontal) {
x = maxOffsetHorizontal - left;
}
if (bottom > 0 && bottom > maxOffsetVertical) {
y = bottom - maxOffsetVertical;
}
if (top > 0 && top > maxOffsetVertical) {
y = top - maxOffsetVertical;
}
// Move the image into view if it is invisible
if (x !== 0 || y !== 0) {
viewer.move(x, y);
}
}
},
});
});
</script>