jtopo限制滚轮缩放范围,zoomOut()与zoomIn()缩放限制

来源:互联网 发布:url存在sql注入漏洞 编辑:程序博客网 时间:2024/06/03 15:57

限制滚轮缩放范围

想要给jtopo的场景缩放加上限制,首先需要找到源代码中控制缩放的代码:

 // 在源码里ctrl+F搜索 onmousewheel 就能找到以下代码             function l(a) {                var b = d(a);                // 原滚轮缩放                a.preventDefault();                n.dispatchEventToScenes("mousewheel", b);                n.dispatchEvent("mousewheel", b),                null != n.wheelZoom && (a.preventDefault ? a.preventDefault() : (a = a || window.event, a.returnValue = !1), 1 == n.eagleEye.visible && n.eagleEye.update()) // 鹰            }            function m(b) {                a.util.isIE || !window.addEventListener ? (b.onmouseout = f, b.onmouseover = e, b.onmousedown = g, b.onmouseup = h, b.onmousemove = i, b.onclick = j, b.ondblclick = k, b.onmousewheel = l, b.touchstart = g, b.touchmove = i, b.touchend = h) : (b.addEventListener("mouseout", f), b.addEventListener("mouseover", e), b.addEventListener("mousedown", g), b.addEventListener("mouseup", h), b.addEventListener("mousemove", i), b.addEventListener("click", j), b.addEventListener("dblclick", k), a.util.isFirefox ? b.addEventListener("DOMMouseScroll", l) : b.addEventListener("mousewheel", l)),                window.addEventListener && (window.addEventListener("keydown",                    function(b) {                        n.dispatchEventToScenes("keydown", a.util.cloneEvent(b));                        var c = b.keyCode; (38 == c || 40 == c) && (b.preventDefault ? b.preventDefault() : (b = b || window.event, b.returnValue = !1))                    },                    !0), window.addEventListener("keyup",                    function(b) {                        n.dispatchEventToScenes("keyup", a.util.cloneEvent(b));                        var c = b.keyCode; (38 == c || 40 == c) && (b.preventDefault ? b.preventDefault() : (b = b || window.event, b.returnValue = !1))                    },                    !0))            }

加上我们的限制滚轮范围的代码:

 if(scale>0.5 && scale < 5){ // scale为现在的缩放比例    // 原滚轮缩放      a.preventDefault();      n.dispatchEventToScenes("mousewheel", b);      n.dispatchEvent("mousewheel", b),      null != n.wheelZoom && (a.preventDefault ? a.preventDefault() : (a = a || window.event, a.returnValue = !1), 1 == n.eagleEye.visible && n.eagleEye.update()) // 鹰眼   }else{       //mytest.scene.zoom(scale, scale);       console.log("不在范围内不执行");   }

细心的同志可能发现了“原滚轮缩放”这段文字注释,是因为jtopo的这段控制缩放源码被我注释掉了(原滚轮个缩放在mac触控板存在bug),具体请看我的这篇文章:
http://blog.csdn.net/qq_39759115/article/details/78539302

so,修改后的代码是:

             function l(a) {                var b = d(a);                // 重写 滚轮缩放                var event = a;                var delta = 0;                if (event.wheelDelta) {                    delta = event.wheelDelta / 120;                } else if (event.detail) {                    delta = -event.detail / 3;                }                if (delta !== 0) {                    // calculate the new scale                    var scale = mytest.scene.scaleX;  // 获取现在的缩放比例                    var zoom = delta / 10;                    if (delta < 0) {                        zoom = zoom / (1 - zoom);                    }                    scale *= 1 + zoom;                    if(scale>0.5 && scale < 5){                        mytest.scene.zoom(scale, scale);                    }else{                        //mytest.scene.zoom(scale, scale);                        console.log("不在范围内不执行");                    }                }                // Prevent default actions caused by mouse wheel.                event.preventDefault();                //     原滚轮缩放                //    a.preventDefault();                n.dispatchEventToScenes("mousewheel", b); //                 //        n.dispatchEvent("mousewheel", b),                //    null != n.wheelZoom && (a.preventDefault ? a.preventDefault() : (a = a || window.event, a.returnValue = !1), 1 == n.eagleEye.visible && n.eagleEye.update()) // 鹰眼            }

zoomOut()与zoomIn()缩放限制

前段事件做了滚轮的缩放限制,后来无意发现+-两个按钮的缩放并没有被限制,一看源码才发现,两个功能并不是使用的同一个方法。
放大按钮使用的是zoomOut()方法

                this.zoomOut = function(a) {                    0 != a && (null == a && (a = .8), this.scaleX /= a, this.scaleY /= a)                },

缩小按钮使用的是zoomIn()方法

                this.zoomIn = function(a) {                    0 != a && (null == a && (a = .8), this.scaleX *= a, this.scaleY *= a)                },

调用这两个方法:

        $('#zoomOutButton').click(function(){            mytest.stage.zoomOut();        });        $('#zoomInButton').click(function(){            mytest.stage.zoomIn();        });

加上限制:

        $('#zoomOutButton').click(function(){            if(mytest.scene.scaleX*1.2< 3)            mytest.stage.zoomOut();        });        $('#zoomInButton').click(function(){            if(mytest.scene.scaleX*0.8 > 0.2)            mytest.stage.zoomIn();        });