假设的情形是缩放的时候,例如点击屏幕上的一个点进行缩放,缩放后的点相对于手指或者说屏幕的位置是不变的。
下面的例子设定的情形是 在距离顶部是100px,左右占满的容器中,点击容器中的甲板图中的舱房,被点击的舱房即使在甲板图放大后也是处在当初点击的位置,如下图
点击前:
点击后:
/**
* [clickChangeBig 点击甲板图区域变大1.3倍]
* @return {[type]} [description]
*/
clickChangeBig = function (){
var e = window.event;
//只有当页面初始缩放倍数是1时点击才放大
if(stateMap.current_scale_rate == 1){
stateMap.current_scale_rate = 1.3;
//获取手指或者鼠标的坐标
var x_origin = e.originalEvent ? e.originalEvent.targetTouches[0].pageX : e.pageX;
var y_origin = e.originalEvent ? e.originalEvent.targetTouches[0].pageY : e.pageY;
//获取缩放前已滚动的距离
var this_scrollTop = jqueryMap.$room_sec.scrollTop();
var this_scrollLeft = jqueryMap.$room_sec.scrollLeft();
//100是假设缩放的区域距顶部是100px的容器中
y_origin = y_origin - 100 + this_scrollTop;
x_origin = x_origin + this_scrollLeft;
//围绕中心点放大 需要时间做 此处获取到屏幕返回的pagex pagey
jqueryMap.$room_cont.css({
'-webkit-transform':'scale('+stateMap.current_scale_rate+')',
'-moz-transform':'scale('+stateMap.current_scale_rate+')',
'-ms-transform':'scale('+stateMap.current_scale_rate+')',
'transform':'scale('+stateMap.current_scale_rate+')',
// 'transform-origin':'' + e.originalEvent.targetTouches[0].pageX + ' ' +e.originalEvent.targetTouches[0].pageY,
// '-ms-transform-origin':'' + e.originalEvent.targetTouches[0].pageX + ' ' +e.originalEvent.targetTouches[0].pageY,
// '-moz-transform-origin':'' + e.originalEvent.targetTouches[0].pageX + ' ' +e.originalEvent.targetTouches[0].pageY,
// '-webkit-transform-origin':'' + e.originalEvent.targetTouches[0].pageX + ' ' +e.originalEvent.targetTouches[0].pageY
'transform-origin':'0 0',
'-ms-transform-origin':'0 0',
'-moz-transform-origin':'0 0',
'-webkit-transform-origin':'0 0'
});
jqueryMap.$room_cont.css('width',380*stateMap.current_scale_rate+'px');
//设置容器的scrollLeft 和 scrollTop 使得点击放大后,点击的舱房相对手指的位置不变 ,因为是居中显示放大 所以向左的位置是0.15
jqueryMap.$room_sec.scrollTop(this_scrollTop + y_origin*0.3);
jqueryMap.$room_sec.scrollLeft(this_scrollLeft + x_origin*0.15);
}
}