지도 살짝구현] 만우절 RPG 맵의 이미지를 스크랩했습니다.. 1편.

1)
지난번 만우절에 구글맵이 RPG 맵 이벤트를 했죠.

그때 스크랩한 내용들을 가지고 지도같은 서비스..까지는 아니고
줌아웃하는 효과를 구현해보고 싶었습니다.

참고

: http://google-latlong.blogspot.kr/2012/03/begin-your-quest-with-google-maps-8-bit.html 
- Begin your quest Google Maps 8-bit for NES

: http://note.cyworld.com/15017511/594224/m 
- 지나가다 본 구글맵 스크랩 화면..

...

지도상의 드래그스크롤 기능은
지도 이미지를 적게(?) 구현하기 어려워서 표현하지는 못했구요,

그림 15장을 한장에 붙여서 
14단계 줌아웃만을 표현했습니다.

...

2)

<div style="filter:Alpha(opacity=0); opacity:0; width:100px; height:10px; overflow:hidden;"><div id=scrollBarWidthD120401_1 style="width:100px; height:10px; overflow:scroll;"><div style="width:10px; height:100px; overflow:hidden;"></div></div></div></div>
<script>

var scrollAction120401_1;

function function120401_1() {

  var scrollBarWidth = 100 - document.getElementById('scrollBarWidthD120401_1').scrollWidth,
      imageWidth = 1026,
      imageHeight = 773,
      imageCountWidth = 3,
      imageCountHeight = 5,
      imageCount = imageCountWidth * imageCountHeight,
      imageTotalHeight = imageHeight * imageCount,
      scrollTopMax = imageTotalHeight - imageHeight;

  // document.write(scrollBarWidth);
  document.write(('<style>'
    + 'div.image1Zone120401_1 { width:{imageWidth}px; height:{imageHeight}px; overflow:hidden; position:relative; }'
    + 'div.screenZone120401_1 { width:{screenWidth}px; height:{screenHeight}px; overflow-x:hidden; overflow-y:hidden; position:relative; }'
    + 'div.scrollZone120401_1 { left:0px; top:0px; position:absolute; width:{screenWidth}px; height:{screenHeight}px; overflow-x:hidden; overflow-y:scroll; }'
    + 'table.scrollHeightZone120401_1 { width:{imageWidth}px; height:{imageTotalHeight}px; overflow:hidden; border:0px; }'
    + 'img.firstImage120401_1 { left:0px; top:0px; position:absolute; } '
    + '</style>').replace(
      /{imageWidth}/g, imageWidth).replace(
      /{imageHeight}/g, imageHeight).replace(
      /{screenWidth}/g, imageWidth
    + scrollBarWidth).replace(
      /{screenHeight}/g, imageHeight).replace(
      /{imageTotalHeight}/g, imageTotalHeight
      )
    );

  (function() {
    var i, lasti = 0,
        image1Element;

    scrollAction120401_1 = function(e) {

      if (!image1Element) image1Element = document.getElementById('image1_120401_1');

      i = e.scrollTop / scrollTopMax * imageCount;
      if (i < 0) i = 0;
      else if (i >= imageCount) i = imageCount - 1;

      //  document.getElementById('debug1').innerText=image1Element.outerHTML;
      image1Element.style.left = (-(parseInt(i) % imageCountWidth) * imageWidth) + 'px';
      image1Element.style.top = (-parseInt(i / imageCountWidth) * imageHeight) + 'px';
      //  document.getElementById('debug1').innerHTML=i;
      lasti = i;
    }

  })();

document.write(
  //'<'+'div id=debug1>debug1</'+'div>'
  '<'+'div class=screenZone120401_1 >'
  +'<'+'div class=image1Zone120401_1>'
  +'<img id=image1_120401_1 class=firstImage120401_1 src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/120401_all3.PNG?=17184250300.5494033629399854 width=3078 height=3865 />'
  +'</'+'div>'
  +'<'+'div class=scrollZone120401_1 onscroll=scrollAction120401_1(this); >'
  +'<'+'table class=scrollHeightZone120401_1 cellspacing=0 ><'+'tr><'+'td></'+'td></'+'tr></'+'table>'
  +'</'+'div>'
  +'</'+'div>'
  );

}

function120401_1();

</script>

-- 새 창에 샘플 띄우기.. --

...

3)
살짝 설명하자면..

<div style="filter:Alpha(opacity=0); opacity:0; width:100px; height:10px; overflow:hidden;"><div id=scrollBarWidthD120401_1 style="width:100px; height:10px; overflow:scroll;"><div style="width:10px; height:100px; overflow:hidden;"></div></div></div></div>
...
  var scrollBarWidth = 100 - document.getElementById('scrollBarWidthD120401_1').scrollWidth, ..

: 스크롤바의 두께 측정하는 부분입니다.. 프로그램 시작할 때 측정하도록 했습니다.

var scrollAction120401_1;

: 스크롤 함수 공개용 변수입니다. 

    + 'div.screenZone120401_1 { width:{screenWidth}px; height:{screenHeight}px; overflow-x:hidden; overflow-y:hidden; position:relative; }' 

: 지도 전체화면입니다. 그림이 표현될 공간이기도 하죠.

    + 'div.scrollZone120401_1 { left:0px; top:0px; position:absolute; width:{screenWidth}px; height:{screenHeight}px; overflow-x:hidden; overflow-y:scroll; }' 

: 스크롤바를 표현할 부분입니다. 세로스크롤만 표시해서 휠드래그로 줌아웃이 가능하도록 했습니다. 

    + 'table.scrollHeightZone120401_1 { width:{imageWidth}px; height:{imageTotalHeight}px; overflow:hidden; border:0px; }' 

: 스크롤바를 운영할 공백입니다. 이게 없으면 화면 위에서 휠드래그가 잘(?) 안되요..

    + 'img.firstImage120401_1 { left:0px; top:0px; position:absolute; } ' 

: 줌업된 화면을 표시할 이미지입니다. 15단계 이미지를 붙여놨습니다.

      i = e.scrollTop / scrollTopMax * imageCount;

: 스크롤 위치 대비, 표시할 이미지의 순번 계산입니다. 이미지의 세로 스크롤에 맞춰서(?) 15단계정도로 계산했죠.

...

4)
대충 이정도입니다.

기존에 이미지 준비는 잘 했었는데,
줌업에 대한 룰이 잘 생각이 안나서 조금 애먹었네요.

.. 구현한 효과는 요즘 제가 싸이클럽 http://ktours.cyworld.com 에서 쓰고 있는 animation 에 관련한 기술입니다.
여기에, 조금 더 기능을 첨부하면 부드러운 zoom 기능을 구현할 수 있는거죠.

easyBow killofki@.