1.一种基于云平台的限制图像缩放和拖拽方法,其特征在于,包括以下步骤:S1、将图片的操作原点定位在图片的左上角;
S2、使图片自适应视口的宽度和高度,并将视口的宽度和高度作为图片的最小缩放限定值,获取视口宽度w1和视口高度h1,所述视口宽度w1和视口高度h1也即缩放前图片的宽高尺寸;
S3、将图片定位在视口最中央;
S4、响应于鼠标滚轮在视口内对图片的滑动操作,通过触发鼠标滚轮事件对图片执行有限制的缩放操作;具体包括:S41、通过鼠标滚轮事件$(‘...’).on("mousewheel",function(e){})获取所述鼠标滚轮事件返回结果对象的接收值“e”;
S42、基于所述接收值“e”中的步长值e.originalEvent.wheelDelta,求出相应的缩放倍数currentScale;
S43、将求出的缩放倍数currentScale赋值给图片css中的transfrom属性,即transfrom:scale(currentScale),实现图片的缩放功能,得到缩放后的图片宽度w2和图片高度h2;
S44、当图片缩小到最小也即与视口宽高尺寸一致时,不再执行缩小事件;
S5、响应于鼠标在视口内对图片的拖拽操作,分别获取按下鼠标的坐标点(xa,ya)和鼠标移动后的坐标点(xb,xb);
S6、将鼠标移动后的坐标点(xb,xb)与按下鼠标时的坐标点(xa,ya)作差值处理,获得两坐标点的差值(xc,yc),通过设置$(‘...’).css({“left”:xc,“top”:yc})将该差值(xc,yc)分别赋给图片样式的left和top属性,从而定位图片;
S7、将缩放前的图片宽度也即视口宽度w1减去缩放后的图片宽度w2,得到缩放前后图片的宽度差值w3=w1‑w2;将缩放前图片的高度h1也即视口高度减去缩放后图片的高度h2,得到缩放前后图片的高度差值h3=h1‑h2;
S8、基于S6中所获取的xc和yc,作以下判断:
当xc <= 0 且 xc>w3时,基于图片的操作原点将图片定位在距离视口左边框xc像素的位置,以此限制图片在视口左右方向的拖拽,使之不能离开视口左右边框边界;
当yc <= 0 且 yc>h3时,基于图片的操作原点将图片定位在距离视口上边框yc像素的位置,以此限制图片在视口上下方向的拖拽,使之不能离开视口上下边框边界。
2.如权利要求1所述的一种基于云平台的限制图像缩放和拖拽方法,其特征在于,所述S2中,通过在图片的css中设置img{width:100%;min‑height:100%;object‑fit:contain;}使图片自适应视口的宽度和高度,并将视口的高度值作为图片的最小缩放限定值。