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(); });
阅读全文
0 0
- jtopo限制滚轮缩放范围,zoomOut()与zoomIn()缩放限制
- 改写jtopo滚轮缩放代码
- google map限制地图缩放级别和显示范围
- google map限制地图缩放级别和显示范围
- 限制窗体的移动范围和缩放大小
- delphi中使用mapx想用鼠标滚轮实现自定义倍率的缩放,并且限制一定的缩放倍数
- Google Maps API V3学习【限制地图缩放级别和显示范围 包含V2版本程序】
- Google Maps API V3学习【限制地图缩放级别和显示范围 包含V2版本程序】
- 缩放图片限制横宽区域内
- 限制webview缩放和隐藏zoombar(2.3)
- Opencv cv::resize ZoomIn ZoomOut
- android页面切换效果zoomin、zoomout
- Extjs中TextField的自动缩放和字数限制示例
- Extjs中TextField的自动缩放和字数限制示例
- 用滚轮实现图片缩放
- 鼠标滚轮缩放图片javascript
- 用滚轮实现图片缩放
- js 鼠标滚轮缩放图片
- Oracle
- IntelliJ IDEA使用手册——打jar包
- Android--Json数据及Xml数据解析
- CentOS 7 安装 GlusterFS集群
- 14-CSS3提高 重点部分 盒模型 浮动和定位
- jtopo限制滚轮缩放范围,zoomOut()与zoomIn()缩放限制
- Android中activity和xml的第一个项目
- Android接入支付宝实现支付功能
- HTTP状态码
- Python 迭代(iteration)
- Qt:基于TCP的多线程文件传输工具
- excel导出数据很多,拆分成多个,以Excel的方式导出
- hibernate_day02
- KSM:Kernel Same-page Merging