围绕一个点的缩放问题

假设的情形是缩放的时候，例如点击屏幕上的一个点进行缩放，缩放后的点相对于手指或者说屏幕的位置是不变的。

下面的例子设定的情形是在距离顶部是100px，左右占满的容器中，点击容器中的甲板图中的舱房，被点击的舱房即使在甲板图放大后也是处在当初点击的位置，如下图
点击前：

WechatIMG16.jpeg

点击后：

WechatIMG17.jpeg

 /**
  * [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);
   }
 }

围绕一个点的缩放问题

推荐阅读更多精彩内容