Zooming

Script

/**
 * 특정 위치를 확대 축소 한다.
 */
var Zooming = {
		auto: false,		//자동 사이즈 조정.
    	rectWidth : 1424,
    	rectHeight: 730,
    	zoomTarget : "",	//".zoom"
    	init : function(selector,isAuto){
    		if(selector !== undefined) this.zoomTarget =selector;	//"#arcContainer"
    		if(isAuto !== undefined) this.auto = isAuto;
 
    		if(this.auto){
        		//자동 사이즈 변경
        	    $(window).resize(function () {
        	    	Zooming.autoResize();
        	    });
        		this.autoResize();
    		}
    	},
    	//확대
    	zoomIn : function(per){
    		var old_per = $(this.zoomTarget).css('zoom');
    		var n = Number(old_per.replace("%",""));
    		if(per === undefined) per = 10;
    		this._changeSize((n + per) +"%");
    	},
    	//축소
    	zoomOut : function(per){
    		var old_per = $(this.zoomTarget).css('zoom');
    		var n = Number(old_per.replace("%",""));
    		if(per === undefined) per = 10;
    		this._changeSize((n - per) +"%");
    	},
    	autoResize : function() {
    		var scale = this._getScale();
			if(scale.x > 1){
				this._resetSize();
			}else{
				this._changeSize(scale.x);  //x 사이즈 변경.
			}
		},
		//현재 사이즈에서 zoom비율을 역으로 계산한다.
		_getScale : function(){
			var swidth = $(window).width();
			var sheight = $(window).height();
			var scaleX = 1;
			var scaleY = 1;
 
    		scaleX = swidth / this.rectWidth;
    		scaleY = sheight / this.rectHeight;

    		return {x:scaleX,y:scaleY};
		},
		_resetSize: function(){
			$(this.zoomTarget).css({'zoom': 1,'position':'absolute'});
			$("body").css("overflow-x","auto");		//스크롤 원복
		},
		_changeSize : function(scale){
			$(this.zoomTarget).css({'zoom': scale,'position':'absolute'});
			$("body").css("overflow-x","hidden");	//스크롤 가리기.
		},
		ResetSize : function(){
			this._resetSize();
		},
		MatchSize : function(){
			this._changeSize(this._getScale().x);		//x만 맞춘다.
		}
    };
// 	$(function () {
// 		Zooming.init();
//     });