限制滚轮缩放范围
想要给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();
});