利索能及
我要发布
收藏
专利号: 2024103960783
申请人: 山东捷瑞数字科技股份有限公司
专利类型:发明专利
专利状态:已下证
更新日期:2026-06-24
缴费截止日期: 暂无
联系人

摘要:

权利要求书:

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;}使图片自适应视口的宽度和高度,并将视口的高度值作为图片的最小缩放限定值。