OpenSeadragon({
visibilityRatio : 0.3, //图片在框内的最小比例
constrainDuringPan : 规定了图像是否能被拖拽出允许最小范围,true为不允许,false为允许 配合上面的visibilityRatio参数使用,也就是是说,例如visibilityRatio为0.3
constrainDuringPan 为true的时候,图片被拖出70%之后就不能再拖出更多了,将其设置为false的时候,图片可以被完全脱出显示框,但是松开鼠标之后,图片会自动弹回到保留30%的位置。
在上一篇http://www.cnblogs.com/yingjiehit/p/4362377.html的Demo基础上,我们设置这两个属性,运行以下代码,你拖动图片,你将感受到效果:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>OpenSeadragon_Demo1</title>
<script src="openseadragon.min.js"></script>
</head>
<h1>图像显示范围控制</h1>
<div id="openSeadragon1" style="width:500px; height:400px; border:1px solid blue;"></div>
</body>
<script type="text/javascript">
var openSeadragon = OpenSeadragon({
id: "openSeadragon1", //指定显示的div
prefixUrl: "./images/", //库中按钮等图片所在文件夹
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./aaa_files/", //图片库地址
Overlap: "1", //相邻图片重合的像素
TileSize: "256", //单个切片(正方形)的边长
Format : "jpg", //切片格式
Size:{ //图片总大小
Height: "1600",
Width: "2560"
visibilityRatio : 0.3, //图片在框内的最小比例
constrainDuringPan : true //管拖拽,true就不能拖拽了
</script>
</html>
怎么也拖拽不出去更多了:
将visibilityRatio 设为1、将constrainDuringPan 设为true,这样,图像将不能有一点被拖出边框:
(2)设置图像的放大倍数允许范围
defaultZoomLevel :初始化默认放大倍数,按home键也返回显示该放大倍数,值为0时则显示自动适应显示框(view)的倍数,默认值为0
minZoomLevel 最小允许放大倍数 默认值null
maxZoomLevel 最大允许放大倍数 默认值null
(3)移动方向限制
panHorizontal: 水平移动约束,设为true则图片可以水平被拖动,false则不能水平移动,默认值true。
(4)开启调试模式
debugMode:设置为true的时候调试模式开启,此时将会在图片上显示放大倍数、层数等信息,每一张切片的位置也会被显示。
我们将上面的关键代码OpenSeadragon改为:
var openSeadragon = OpenSeadragon({
id: "openSeadragon1", //指定显示的div
prefixUrl: "./images/", //库中按钮等图片所在文件夹
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./aaa_files/", //图片库地址
Overlap: "1", //相邻图片重合的像素
TileSize: "256", //单个切片(正方形)的边长
Format : "jpg", //切片格式
Size:{ //图片总大小
Height: "1600",
Width: "2560"
debugMode : true, //开启调试模式
panHorizontal: false, //不能水平移动了,只能竖直移动
defaultZoomLevel: 5, //初始化默认放大倍数,按home键也返回该层
minZoomLevel: 3, //最小允许放大倍数
maxZoomLevel: 20, //最大允许放大倍数
将会得到以下效果:
发现不能左右拖动,只能上下拖动了,并且多了很多显示的数据,一开始放大倍数为5倍,最多可以放大20倍,最少也要看放大3被的。
如何查看放大倍数呢?我们将 panHorizontal改为true。
var openSeadragon = OpenSeadragon({
panHorizontal: true, //可以水平移动
此时就能将图片往右下方拖,在左上方有标记Zoom显示当前放大了多少倍:
以下是本次用到的属性和一些常用图片查看控制属性总结,读者可以自己试验一下效果:
panHorizontal
(default: true) 水平允许拖拽panVertical
(default: true) 竖直允许拖拽constrainDuringPan
(default: false) 是否限制拖拽出允许显示范围wrapHorizontal
(default: false) 在水平方向会连续显示,例如当图像显示到右边缘以外的时候,会把图像的左边缘跟右边缘结合,接着显示,一般用于显示地图wrapVertical
(default: false) 垂直方向连续显示visibilityRatio
(default: 0.5) 图片在显示框view中被限制的最小百分百minPixelRatio
(default: 0.5) 最小像素比,这个值越高效果,停止显示更高效果的值就约低,比如带宽低的时候可以设置在1.5,具体效果我也没完全读懂minZoomImageRatio
(default: 0.9) 最小允许的缩小比例maxZoomPixelRatio
(default: 2) 像素最大允许放大比例,如果是设置为“infinite”可以无限放大,在HTML5的canvas中用的时候,如果viewing device不可用则效果会不好defaultZoomLevel
(default: 0) 默认显示的放大倍数,页面刚打开或按home键时候的放大倍数,0则自动适应viewminZoomLevel
(default: null) 最小放大倍数maxZoomLevel
(default: null) 最大放大倍数
https://www.cnblogs.com/yingjiehit/p/4365225.html
OpenSeadragon入门了解请看第一篇:http://www.cnblogs.com/yingjiehit/p/4362377.htmlOpenSeadragon给我们提供了很多的可选界面元素,这些界面元素可以通过简单的配置很容易的能使用了。此外,OpenSeadragon旨在让你把它的控制绑定到完全由你自定义的界面(例如,自定义一个按钮,按下就执行OpenSeadragon界面里的...
如果要在自己的项目中使用OpenSeadragon,可以在找到最新的稳定版本,API文档和示例代码。 如果您想修改OpenSeadragon和/或为OpenSeadragon的开发,请阅读以获取指导。
OpenSeadragon在New BSD许可下发布。 有关详细信息,请参见。
OpenSeadragon是一个可以显示多层图片(可放大缩小)的Web库,基于JavaScript,支持桌面和手机。
OpenSeadragon旨在让你把它的控制绑定到完全由你自定义的界面(例如,自定义一个按钮,按下就执行OpenSeadragon界面里的控制)。
OpenSeadragon支持很多图片协议和格式,通常这些图片都是由很多图片的切片组成的,例如一张很大的图,需要剪裁成...
2. 在touchstart事件中记录手指的起始位置,以及canvas的起始位置和尺寸。
3. 在touchmove事件中计算手指移动的距离,根据距离改变canvas的尺寸或位置,从而实现缩放和平移。
4. 在touchend事件中记录canvas的最终位置和尺寸。
下面是一个简单的示例代码,实现了canvas的缩放和平移:
```javascript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var lastX, lastY, startX, startY, startWidth, startHeight;
var isDragging = false, isScaling = false;
canvas.addEventListener('touchstart', function(e) {
var touch = e.touches[0];
lastX = startX = touch.clientX;
lastY = startY = touch.clientY;
startWidth = canvas.width;
startHeight = canvas.height;
isDragging = true;
canvas.addEventListener('touchmove', function(e) {
var touch = e.touches[0];
if (e.touches.length == 1 && isDragging) {
var deltaX = touch.clientX - lastX;
var deltaY = touch.clientY - lastY;
canvas.style.left = (startX + deltaX) + 'px';
canvas.style.top = (startY + deltaY) + 'px';
} else if (e.touches.length == 2) {
isDragging = false;
var touch1 = e.touches[0];
var touch2 = e.touches[1];
var dist = Math.sqrt(Math.pow(touch1.clientX - touch2.clientX, 2) + Math.pow(touch1.clientY - touch2.clientY, 2));
if (!isScaling) {
isScaling = true;
startWidth = canvas.width;
startHeight = canvas.height;
var scale = dist / Math.sqrt(Math.pow(lastX - lastY, 2) + Math.pow(touch1.clientY - touch2.clientY, 2));
canvas.width = startWidth * scale;
canvas.height = startHeight * scale;
lastX = touch.clientX;
lastY = touch.clientY;
canvas.addEventListener('touchend', function(e) {
isDragging = false;
isScaling = false;
这段代码中,我们监听了canvas的touchstart、touchmove和touchend事件,用于实现canvas的缩放和平移。在touchstart事件中记录了手指的起始位置和canvas的起始尺寸和位置,在touchmove事件中计算手指移动的距离,并根据距离改变canvas的尺寸和位置,从而实现缩放和平移。在touchend事件中记录canvas的最终位置和尺寸。