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

限制滚轮缩放范围

想要给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();
        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值