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);
    else
        element.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的实例

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

时间: 2024-09-28 15:35:06

mxGraph绘图区域使用鼠标滚轮实现放大/缩小的相关文章

鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

jquery鼠标移入某区域屏蔽鼠标滚轮 滚动滚动条

<script> var firefox = navigator.userAgent.indexOf('Firefox') != -1; function MouseWheel(e) { ///对img按下鼠标滚路,阻止视窗滚动 e = e || window.event; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(

Winform 图片鼠标滚动查看(放大,缩小,旋转,拖动查看)[日常随笔]

方法千千万,我只是其中一笔[通过控制PictureBox来控制图片,图片完全施展在控件中]...几久不做,还真有点陌生! 窗体构造中添加鼠标滚动: 1 /// <summary> 2 /// 窗体构造方法 3 /// </summary> 4 public CandidateForm() 5 { 6 InitializeComponent(); 7 this.MouseWheel += new MouseEventHandler(CandidateForm_MouseWheel);

C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框

最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大概介绍一下原因,GDI画矩形框就不说了,很简单的.这里面最主要的就是滚轮放大和左键移动两个事件,要计算矩形框的坐标位置.下面将代码贴出如下: 先是定义需要的变量,就四个变量. //矩形框坐标        private Rectangle DrawRect = new Rectangle(0, 0

VC 鼠标滚轮事件控制绘图的问题

问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚轮事件中更新:重绘标识,新坐标轴值,此时时间: 利用OnTimer函数,在重绘标识为真时,判断当前时间与滚轮事件时间的差,超过预定值(比如500ms)就重绘,并置重绘标识为假. 方案待验证.

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

mxGraph定位盲区图形到绘图区域中心位置

往往在一个绘图区域会有很多个图形,如果通过右键拖动画布或者通过滚动条来查找,是一件很烦人的事情.下面我就给出解决这个问题的方案. 前提是有一个整个绘图区域的tree或者datagrid,我们需要选择直接要定位的图形cell. 首先我们需要一个mxGraph的全局对象,暂且就定义为ylEditor.ylCanvas吧. 接下来我们要定义一个查找图形cell的方法,只有通过这个方法,才能找到画布中我们想要的那个cell. ylCommon.findCellById=function(id){ ylE

echarts区域缩放(鼠标滚轮、滚动条、拉选框)

当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15;i++){ arr.push(10*(Math.random()-0.5)) } myCharts.setOption({ title:{ text:"鼠标滚轮缩放数据" }, tooltip:{ trigger:'axis' }, xAxis:{ data:[1,2,3,4,5,6,7

zedgraph中禁用鼠标滚轮变焦(禁止画图区域随鼠标滚动改变XY轴,定位)(转)

禁用鼠标滚轮变焦的zedgraph功能 如果zgc是你ZedGraphControl实例,请使用: zgc.ZoomButtons = MouseButtons.None; zgc.ZoomButtons2 = MouseButtons.None; 这将禁用用鼠标选择区域缩放. 您还需要设置: zgc.ZoomStepFraction = 0; 要禁用使用鼠标滚轮缩放.