jQuery pinch 이벤트, pinch zoom 구현

나날이 격무에 시달리고있는 또름입니다......살려주세요

 

너무 포스트를 안올려서 오늘은 간단하게 pinch zoom 구현한 것을 포스팅하겠습니다 

 

//pinch 진행 상태
let scaling  = false;
//pinch 초기 거리
let setDist = 0;



$("#img").on("touchstart", function(event){
    if(event.originalEvent.touches.length  === 2){
        scaling  = true;
    }
})

 

 

터치스타트 이용해서 2개의 터치포인터가 이벤트에 잡히면 scaling 변수를 true로...

 

 

$("#img").on("touchmove", function(event){

    if(scaling){
        var dist = Math.hypot(
            event.originalEvent.touches[0].pageX - event.originalEvent.touches[1].pageX,
            event.originalEvent.touches[1].pageY - event.originalEvent.touches[1].pageY
        );
        dist = Math.floor(dist/20);

        if(setDist == 0) setDist = dist;

        if(setDist < dist){
            $(this).css("width", 1.1*parseFloat(imgWidth));
            $(this).css("height", 1.1*parseFloat(imgHeight));
            setDist = dist;

        } else if(setDist > dist){
            $(this).css("width", 0.9*parseFloat(imgWidth));
            $(this).css("height", 0.9*parseFloat(imgHeight));
            setDist = dist;
        }

        imgWidth = $("#img")[0].clientWidth;
        imgHeight = $("#img")[0].clientHeight;

    }
})

touchmove 이벤트를 이용해서, 양 터치간의 간극을 확인. 멀어지면 확대, 가까워지면 축소.

확대 및 축소에 따라 이미지 크기를 css로 조절!

$("#img").on("touchend", function(event){	
    scaling = false;
    setDist = 0;
})

touch가 끝난 시점에 scaling 변수를 false로, 초기 pinch 이벤트 거리를 0 으로 초기화 (안해주면 중구난방 날뛰는 이미지를 보게 됩니다 )

 

테스트할때 이미지 위에서 pinch 해보시면 뚝뚝 끊기는 감이 있지만 잘 실행 될겁니다 ( 일부러 조절했습니다.  )

이게 싫으신 분들은 dist 변수에 Math.floor(dist/20) 부분을 없애거나 숫자를 늘리거나 줄여서 조절하면 됩니다.

 

없애면 굉장히 민감히 반응을 하니 조절하는것을 추천드립니다.

 

이상~끝