申请/专利权人：山东捷瑞数字科技股份有限公司

申请日：2024-04-03

公开（公告）日：2024-06-18

公开（公告）号：CN117991962B

主分类号：G06F3/04845

分类号：G06F3/04845;G06F3/04847

优先权：

专利状态码：有效-授权

法律状态：2024.06.18#授权;2024.05.24#实质审查的生效;2024.05.07#公开

摘要：本发明涉及一种基于云平台的限制图像缩放和拖拽方法，属于计算机可视化操作技术领域。所述包括：S1、定位图片原点；S2、使图片自适应视口宽高，并将视口高度值作为图片最小缩放限定值；S3、定位图片在视口中央；S4、触发鼠标滚轮事件对图片执行有限制的缩放操作；S5、获取按下鼠标的坐标点和鼠标移动后的坐标点；S6、将鼠标移动后的坐标点与按下鼠标时的坐标点作差值处理，获得两坐标点的差值并赋给图片样式的left和top属性；S7、求出缩放前后图片的宽度差值和高度差值；S8、基于S6中所获取的两坐标点的差值进行拖拽限制。本发明通过对图片设置定位和缩放的限制，提高了图片操作的便利性和体验感。

主权项：1.一种基于云平台的限制图像缩放和拖拽方法，其特征在于，包括以下步骤：S1、将图片的操作原点定位在图片的左上角；S2、使图片自适应视口的宽度和高度，并将视口的宽度和高度作为图片的最小缩放限定值，获取视口宽度w1和视口高度h1，所述视口宽度w1和视口高度h1也即缩放前图片的宽高尺寸；S3、将图片定位在视口最中央；S4、响应于鼠标滚轮在视口内对图片的滑动操作，通过触发鼠标滚轮事件对图片执行有限制的缩放操作；具体包括：S41、通过鼠标滚轮事件$‘...’.on"mousewheel"，functione{}获取所述鼠标滚轮事件返回结果对象的接收值“e”；S42、基于所述接收值“e”中的步长值e.originalEvent.wheelDelta，求出相应的缩放倍数currentScale；S43、将求出的缩放倍数currentScale赋值给图片css中的transfrom属性，即transfrom：scalecurrentScale，实现图片的缩放功能，得到缩放后的图片宽度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且xcw3时，基于图片的操作原点将图片定位在距离视口左边框xc像素的位置，以此限制图片在视口左右方向的拖拽，使之不能离开视口左右边框边界；当yc=0且ych3时，基于图片的操作原点将图片定位在距离视口上边框yc像素的位置，以此限制图片在视口上下方向的拖拽，使之不能离开视口上下边框边界。

全文数据：

权利要求：

百度查询： 山东捷瑞数字科技股份有限公司 一种基于云平台的限制图像缩放和拖拽方法

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD