mxGraph画图区域使用鼠标滚轮实现放大/缩小

// 重写鼠标滚轮事件
mxEvent.addMouseWheelListener = function (funct) {}// 添加初次载入事件
window.onload = function () {var element= document.getElementById('graph');addScrollListener(element, wheelHandle);
}function addScrollListener(element, wheelHandle) {if (typeof element != 'object') return;if (typeof wheelHandle != 'function') return;// 监測浏览器if (typeof arguments.callee.browser == 'undefined') {var user = navigator.userAgent;var b = {};b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera;b.ie = user.indexOf("MSIE") > -1 && !b.opera;b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;arguments.callee.browser = b;}if (element == window)element = document;if (arguments.callee.browser.ie)element.attachEvent('onmousewheel', wheelHandle);elseelement.addEventListener(arguments.callee.browser.gecko ?

'DOMMouseScroll' : 'mousewheel', wheelHandle, false); } function wheelHandle(e) { var upcheck; if (e.wheelDelta) { upcheck = e.wheelDelta > 0 ? 1 : 0; } else { upcheck = e.detail < 0 ? 1 : 0; } if (upcheck) { myGraph.zoomIn(); } else { myGraph.zoomOut(); } if (window.event) { e.returnValue = false; window.event.cancelBubble = true; } else { e.preventDefault(); e.stopPropagation(); } }

PS:myGraph是一个全局变量，mxGraph的实例

转载于:https://www.cnblogs.com/ldxsuanfa/p/10701882.html

mxGraph画图区域使用鼠标滚轮实现放大/缩小相关推荐

mxGraph绘图区域使用鼠标滚轮实现放大/缩小
// 重写鼠标滚轮事件 mxEvent.addMouseWheelListener = function (funct) {}// 增加初次加载事件 window.onload = function ...
python字体大小快捷键_PyCharm（2019.1版本）用鼠标滚轮控制放大缩小字体
今天准备使用pycharm来编写scrapy爬虫,结果发现字体很小,习惯性用Ctrl+鼠标滚轮来控制字体大小,发现它竟然不听使唤,才想起来PyCharm是新安装的一直没用,赶紧来设置一番吧. 使用过p ...
pycharm编辑器如何用鼠标滚轮随时放大缩小代码
pycharm编辑器如何用鼠标滚轮随时放大缩小代码我们用pycharm的时候发现不能快捷的像其他编辑器那样用鼠标滚轮随时放大缩小代码,这是因为你还没有设置,下面我们就来设置一下. 1.放大代码设置 ...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
系列文章目录文章目录系列文章目录背景与效果图 1.背景如下(功能图): 2.效果图如下: 拖拽后的效果缩放的效果放大的效果一.功能:支持鼠标长按拖拽 1.鼠标事件: 2.拖拽功能流程 3. ...
Unity 在zSpace上使用鼠标控制相机旋转和鼠标指引式放大缩小，在触屏上手势位置为中心放大缩小
在zSpace上使用鼠标控制相机旋转和鼠标指引式放大缩小,在触屏上手势位置为中心放大缩小鼠标和触屏的操作下面展示一些内联代码片. using System; using System.Colle ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
鼠标滚动导航放大缩小
进入页面的样式鼠标向下的样式滚轮向上还是可以变大,直接上代码, <!DOCTYPE html> <html lang="zh-CN"> <head ...
关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...
vue实现鼠标滚动图片放大缩小拖拽
1.封装可放大缩小拖拽组件 <template><div class="drag-outer"ref="dragWrap":style=&qu ...

mxGraph画图区域使用鼠标滚轮实现放大/缩小

mxGraph画图区域使用鼠标滚轮实现放大/缩小相关推荐

最新文章

热门文章