은광

실버라이트를 이용한 객체(이미지,영상등) 의 Zoom 과 Translate 본문

Silverlight

실버라이트를 이용한 객체(이미지,영상등) 의 Zoom 과 Translate

MonkeyVirus 2008.08.28 14:24

개요

아름다운 이나영님과 못생긴 강동원이 나와있는 3504x2336  이미지 입니다.

기본적으로 이미지의 크기가 커서 모니터 상에 원본 이미지 그대로 한번에 볼수가 없습니다.

그래서 이러한 이미지를 Silverlight를 이용해서 Zoom가 Translate를 이용해서

아름다운 이나영님의 사진을 확대 해 보았습니다.

자~ 이나영님이 저를 바라보면서 활짝 웃어 주고 계십니다. 하하하

그럼 각설하고 간단한 소스 분석을 하도록 해보겠습니다.

소스분석

이렇게 사용된 zoom과 translate 에 대해서 간단히 적어 보도록 하겠습니다.

1)Translate : Translate는 마우스를 클릭 하고 클릭된 마우스가 이동을 할때 이동하기 전과 이동 하고난 후 의 마우스의 위치의 차이를 이용해서 이미지를 Translate 시킨다는 내용입니다.

-1>mouseLeftButtonDown 에서는 마우스가 눌리였다는 사실과 눌려진곳의 위치를 저장하는 기능과 CaptureMouse를 실행해 줍니다.

void cvImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       {
           //Set the mouse state : Press=on , CapturetheMouse()
           if (cvImage.CaptureMouse())
               _isChecked = true;

           _oldMousePosition = e.GetPosition(cvRoot);
       }


-2>mousemove 에서는 마우스가 눌리였는지를 체크하고 그리고  이동할때마다 이동되는곳과 그전에 있던곳의 좌표 값을 비교 해서 이미지를 Translate 시킵니다.

void cvImage_MouseMove(object sender, MouseEventArgs e)
{
    if (_isChecked == false)
        return;

    Point currentPosition = e.GetPosition(cvRoot); // root에서의 mouse좌표
    Point gapOfMousePoint = new Point((int)(currentPosition.X - _oldMousePosition.X) , (int)(currentPosition.Y - _oldMousePosition.Y));

    tfTranslatePoint.X += gapOfMousePoint.X;
    tfTtranslatePoint.Y += gapOfMousePoint.Y;

    _oldMousePosition = currentPosition;
}

-3>mouseleftbuttonup 에서는 ReleaseMouseCapture 를 이용해서 마우스의 캡쳐를 풀어 주고 마우스 가 눌렸다는것을 false시켜 줍니다.

void cvImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            ///Release MouseCapture and set out _isChecked
            _isChecked = false;
            cvImage.ReleaseMouseCapture();
        }

2)Scale : Scale은 마우스 휠의값(Delta) 을 받아서 Delta 값이 양수 이면 확대를 음수이면 축소를 시키도록 하였습니다. 

-휠업)  Delta>0 인 경우이고 1.25씩 커지도록 하였꼬

-휠다운)  Delta<0 인 경우이면 0.8씩 작아지도록 하였습니다.

생각해야 할점

Scale시에 생각해야 할점은 그 객체가 가지고 있는 Origin의 위치에 따라 확대/축소를 하게 되므로 제가 원하는 위치를 확대 하기 위한 방법중 제가 알고 있는 2가지는

1)스케일이 Origin 의 위치에서 이루어지므로 우리가 Scale 할려는 위치로 Origin 을 이동시키는 방법이 있습니다. 그런데 Origin 의 위치를 이동하게 되면 Origin이 이동하게 된후 그곳에서 다시 Scale을 하게 됩니다. 그렇게 되면 그림이 튀게 되는데 이것을 방지 하기 위해 Scale되면서 이동하게 되는 부분만큼을 계산해서 Translate를 시켜줘야 원하는 데로 나오게 됩니다.

2)이미지를 확대 시키게 되면 원래 확대를 위해 찍어줬던 부분이 확대가 되면서 이동하게 되는데 그것을 계산해서 다시 원래 자리로 돌려 놓는 방법이 있습니다.

이번 소스에서는 1번째 방법을 이용하여 구현을 하였습니다.

####소스에서는 위에서 설명한것 이외에 가운데 Viewer를 넣고 이미지가 그 viewer안에서만 놀도록 할려고 해서 좀 많이 지져분해져 있습니다 ㅡㅡ;

그럼 문제의 그 소스를 공개 하도록 하겠습니다 두둥.

소스

1 Comments
댓글쓰기 폼