【技术实现步骤摘要】
本专利技术涉及一种基于云平台的限制图像缩放和拖拽方法，属于计算机可视化操作。
技术介绍
1、目前，信息化、智能化、网络化已经成为时代发展的标志，人们在追求生活便利的同时，对审美的水平和要求也就越来越高。基于此，平台的图片展示功能应当更加全面、便利、美观去满足大众的需求和审美。
2、目前，现有的基于jquery所提供的插件虽然能实现图片的缩放和拖拽功能，但对图片的缩放和拖拽却没有设置限制功能，实践中主要存在以下两方面的弊端：
3、1、当图片缩小到突破最小值时，图片会因缺少缩放限制而产生反向倒置放大；
4、2、由于对视口内的图片没有设定拖拽限制，当拖拽图片时，经常会发生图片被拖拽到视口外，无法确定图片所在的位置的问题。
5、鉴于以上，本专利技术提出一种基于云平台的限制图像缩放和拖拽方法。
技术实现思路
1、为解决上述问题，本专利技术提出了一种基于云平台的限制图像缩放和拖拽方法。
2、一种基于云平台的限制图像缩放和拖拽方法，包括以下步骤：
3、s1、将图片的操作原点定位在图片的左上角；
4、s2、使图片自适应视口的宽度和高度，并将视口的宽度和高度作为图片的最小缩放限定值，获取视口宽度w1和视口高度h1，所述视口宽度w1和视口高度h1也即缩放前图片的宽高尺寸；
5、s3、将图片定位在视口最中央；
6、s4、响应于鼠标滚轮在视口内对图片的滑动操作，通过触发鼠标滚轮事件对图片执行有限制的
7、s5、响应于鼠标在视口内对图片的拖拽操作，分别获取按下鼠标的坐标点(xa,ya)和鼠标移动后的坐标点（xb,xb）；
8、s6、将鼠标移动后的坐标点（xb,xb）与按下鼠标时的坐标点(xa,ya)作差值处理，获得两坐标点的差值(xc,yc)，通过设置$(‘...’).css({“left”：xc，“top”：yc})将该差值(xc,yc)分别赋给图片样式的left和top属性，从而定位图片；
9、s7、将缩放前的图片宽度也即视口宽度w1减去缩放后的图片宽度w2，得到缩放前后图片的宽度差值w3=w1-w2；将缩放前图片的高度h1也即视口高度减去缩放后图片的高度h2，得到缩放前后图片的高度差值h3=h1-h2；
10、s8、基于s6中所获取的xc和yc，作以下判断：
11、当xc<= 0 且 xc>w3时，基于图片的操作原点将图片定位在距离视口左边框xc像素的位置，以此限制图片在视口左右方向的拖拽，使之不能离开视口左右边框边界；
12、当yc<= 0 且 yc>h3时，基于图片的操作原点将图片定位在距离视口上边框yc像素的位置，以此限制图片在视口上下方向的拖拽，使之不能离开视口上下边框边界。
13、进一步地，所述s2中，通过在图片的css中设置
14、img{width:100%;min-height:100%;object-fit:contain;}使图片自适应视口的宽度和高度，并将视口的高度值作为图片的最小缩放限定值。
15、进一步地，所述s4的具体步骤包括：
16、s41、通过鼠标滚轮事件$(‘...’).on("mousewheel"，function(e){})获取该事件返回结果对象的接收值“e”；
17、s42、基于所述接收值“e”中的步长值e.originalevent.wheeldelta，求出相应的缩放倍数currentscale；
18、s43、将求出的缩放倍数currentscale赋值给图片css中的transfrom属性，即transfrom：scale(currentscale)，实现图片的缩放功能，得到缩放后的图片宽度w2和图片高度h2；
19、s44、当图片缩小到最小也即与视口宽高尺寸一致时，不再执行缩小事件。
20、本专利技术的一种基于云平台的限制图像缩放和拖拽方法，基于jquery的图片功能，通过对图片设置定位和缩放的限制，使图片不能拖拽到离开视口边界的位置、不能无限缩小。保持图片始终在视口中央，可以防止图片无限缩小挪空丢失，提高了观看图片的便利性，有着很好的观感体验效果。
本文档来自技高网...【技术保护点】
1.一种基于云平台的限制图像缩放和拖拽方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种基于云平台的限制图像缩放和拖拽方法，其特征在于，所述S2中，通过在图片的css中设置
3.如权利要求1所述的一种基于云平台的限制图像缩放和拖拽方法，其特征在于，所述S4的具体步骤包括：
【技术特征摘要】
1.一种基于云平台的限制图像缩放和拖拽方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种基于云平台的限制图像缩放和拖拽方法，其特征在...
【专利技术属性】
技术研发人员：朱春华，朱倩瑜，
申请(专利权)人：山东捷瑞数字科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。