Javascript 객체 확대 축소 이동 라이브러리 Panzoom

Javascript jquery 객체 확대 축소 이동 라이브러리 Panzoom

 

 

이번 포스팅에서 소개할 JavaScript 라이브러리는 panzoom 입니다.

 

위 동영상 처럼 마우스 휠을 사용하여 객체의 확대 축소가 가능하고,

드래그로 객체를 이동할 수 있습니다.

상하, 좌우축만 움직이도록 제한 할 수도 있으며, 이미지 뿐 아니라, dom 객체도 컨트롤이 가능합니다.

 

다운로드는 아래의 링크를 통해 가능합니다.

 

Download Link : https://github.com/anvaka/panzoom

 

위의 깃허브에서 다운로드 하셔서 압축을 풀면, 아래와 같은 폴더를 보실 수 있습니다.

 

 

 

demo 폴더의 index.html 을 열어 기능과 코드를 확인하신 후

dist\jquery.panzoom.min.js 파일만 프로젝트에 추가하셔서 사용하시면 됩니다.

 

index.html 파일을 열어보시면 아시겠지만, 사용법도 매우 간단합니다.

 

아래의 코드는 마우스로 .drLine이라는 객체를 컨트롤 하는 코드 입니다.

객체는 마우스로 컨트롤 하고, reset 버튼을 클릭 시 컨트롤 전으로 초기화되게 됩니다.

 

[html]

 

<div class="drLine">
    <div class="panzoom">
        <div class="buttons">
            <button class="reset">Reset</button>
        </div>
        <section class="trfInfo">
        </section>
    </div>
</div>

 

[jquery]

 

$(function() { 
    var $section = $('.drLine');
    $section.find('.panzoom').panzoom({
        $reset: $section.find(".reset"),
    });
    var $panzoom = $section.find('.panzoom').panzoom();
    $panzoom.parent().on('mousewheel.focal', function(e) {
        e.preventDefault();
          var delta = e.delta || e.originalEvent.wheelDelta;
          var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
          $panzoom.panzoom('zoom', zoomOut, {
            animate: false,
            focal: e
          });
    });
});