DEXTFramework.NET Team

프레임워크를 홍보하는 자리에서 열심히 파워포이트로 설명을 해보기도 하지만, 결국은 어떤 물건인지 보고 싶어하는 분들이 많습니다.

그런데 그 때마다 VS를 띄우고 예를 보여주는 것도 참 힘이 든 작업입니다. 전속 홍보 담당자가 있는 것도 아니기 때문에 여러 차선책을 강구하게 됩니다.
그 중에 동영상으로 간단히 보여주는 것이 큰 효과가 있는 것 같습니다.

PS. 업로드용으로 인코딩을 했기 때문에 화질이 좋지는 못합니다.

 

글이 좀 늦었습니다.

이번에는 지난번 예제 소스를 좀 살피고 마치겠습니다.
매우 간단하여 별 어려움 없이 이해 하실겁니다.

우선 실버라이트 응용프로그램 프로젝트를 생성합니다.


그럼 오른쪽 그림처럼 클라이언트 웹 프로젝트하고 실버라이트 프로젝트가 생성될텐데요.

여기 웹프로젝트를 보면 ClientBin 폴더를 확인 하실수 있습니다.

이곳에 Deep Zoom Composer로 변환한 결과물 이미지 폴더를 옮겨놓습니다.

저는 myship 이란 명으로 이미지 폴더 명을 설정했습니다.
암튼 이 결과물이 담긴 폴더를 ClientBin폴더로 통째로 옮겨 놓습니다.

그리고 한가지 더 추가해줘야 하는데요. MouseWheelHelper.cs 란 클래스로
다 아시겠지만 마우스 휠 이벤트 관련 클래스입니다.
이 클래스는 Deep Zoom Composer로 프로젝트까지 생성하면 프로젝트 폴더에 같이 생성되는데요.
일단 첨부파일로 올려놓겠습니다.

MouseWheelHelper.cs

MouseWheelHelper

그럼 먼저 xaml파일을 보겠습니다.
간단합니다.

<MultiScaleImage Source="silverlight2deloperposter/dzc_output.xml" x:Name="msimgPoster"
                 MouseMove="multizoom_MouseMove"
                 MouseLeftButtonDown="multizoom_MouseLeftButtonDown"
                 MouseLeftButtonUp="multizoom_MouseLeftButtonUp"
                 ImageOpenSucceeded="multizoom_ImageOpenSucceeded"
                 MotionFinished="multizoom_MotionFinished"
                 Grid.Column="1"/>
Source를 지정하고 아래 이벤트 핸들러를 추가합니다.
각각의 이벤트가 무얼뜻하는지는 쉽게 아실 수 있을겁니다.
** 그리고 위에는 Source를 바로 지정했지만 이를 요소로 추가해서 지정할 수도 있습니다.
(이는 실버라이트 모든 object에 해당하는 내용인거 같습니다.)
<MultiScaleImage.Source>
             <DeepZoomImageTileSource UriSource="seraphone/dzc_output.xml" x:Name="seraSource"/>
</MultiScaleImage.Source>
이렇게 하면 약간의 제약은 있지만 cs코드에서 동적으로 소스매핑을 할 수 있습니다....


실제로 이미지만 간단하게 보여주겠다 하면 기본 xaml소스에 이거만 추가하시면 작동합니다.
그럼 cs파일을 보겠습니다.

Point lastMousePos = new Point();               //마우스 이동한 마지막 포인트
Point lastMouseLogicalPos = new Point();    //이미지 포인트를 일반적인 좌표로 변경한 포인트
Point lastMouseViewPort = new Point();       //이미지가 위치한 포인트
bool duringDrag = false;                              //드래그 중인지 여부

일단 위에 있는 변수들이 필요하고요. 이변수들은 마우스 드래그 시 object 이동을 구현할때 사용하는 일반적인 변수들입니다. 그냥 좀 참고 하실건 Deep Zoom에 필요로 하는 좌표는 해상도에 따른 마우스 클릭한 절대 좌표가 아닌 이를 MultiScaleImage 에서 사용하는 상대적인 0 ~ 1까지 정의된 좌표라는 것입니다. 이는 msdn을 보시면 이해 하실겁니다.
http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx

우선 우리가 무엇을 할건지 정리 해보면
마우스 휠에 따른 줌 아웃과 인을 이미지를 드래그하여 이동하는것을 구현 할것입니다.
따라서 휠이벤트와 드래그 이벤트가 반드시 필요 할것이고 드래그 이벤트 구현을 위해서
마우스 왼쪽 버튼 Down과 Up이벤트를 구현 할것입니다.

먼저 휠 이벤트를 구현하겠습니다. 이는 위에서 말한 MouseWheelHelper.cs를 이용해야 합니다.
아래 msimgPoster는 xaml에서 생성한 MultiScaleImage개체입니다.
       /// 마우스 이동 핸들러를 바로 삽입 및 설정
       this.MouseMove += delegate(object sender, MouseEventArgs e)
       {
            ///MultiScaleImage 컨트롤의 위치를 저장
            lastMousePos = e.GetPosition(this.msimgPoster);
       };

       /// 마우스 휠 이벤트 설정(MouseWheelHelper.cs 사용: MS에서 제공한 소스로 전 한게
                 없슴다..ㅜㅜ)
       /// MouseWheelEventArgs는 MouseWheelHelper에서 정의된 것임
       new MouseWheelHelper(this).Moved += delegate(object sender,MouseWheelEventArgs e)
       {
            double newzoom = zoom;
            if (e.Delta > 0)
                newzoom /= 1.3;
            else
                newzoom += 1.3;
            /// MultiScaleImage 컨트롤 좌표를 일반적인 좌표로 변경(0,1,2....)
            Point logicalPoint = this.msimgPoster.ElementToLogicalPoint(lastMousePos);

      //이미지 줌 실행
      msimgPoster.ZoomAboutLogicalPoint(zoom / newzoom, logicalPoint.X, logicalPoint.Y);
                zoom = newzoom;
            };

주석을 보시면 대부분 이해 하실겁니다. 다만 e.GetPosition(this.msimgPoster); 라는 구문을 보시면
포지션을 구하는데 마우스 클릭한 MultiScaleImage 에서의 좌표라는겁니다.
 여기서 전달인자로 어떤 개체를 주건 상관없습니다. 다만 내가 어디 좌표를 사용하겠느냐에 따라 달라 지는것입니다. 근데 아마 여기서는 MultiScaleImage 를 던져 주는게 제일 좋습니다.
위에 구문을 생성자나 Loaded이벤트에 넣어 주시면 됩니다.

그럼 나머지 이벤트를 구현하겠습니다.
private void multizoom_MouseMove(object sender, MouseEventArgs e)
{
    if (duringDrag)
    {
        Point newPoint = lastMouseViewPort; //
        Point thisMouseLogicalPos = e.GetPosition(tempZoom[index]); //마우클릭한 위치
               
        ///컨트롤 이동시 마우스 클릭한 위치를 일정하게 유지 하면서 자연스럽게 이동하기 위해
        ///좌표를 아래와 같이 계산해야 합니다.
       newPoint.X += (lastMouseLogicalPos.X - thisMouseLogicalPos.X) / msimgPoster.ActualWidth * tempZoom[index].ViewportWidth;
       newPoint.Y += (lastMouseLogicalPos.Y - thisMouseLogicalPos.Y) / msimgPoster.ActualWidth * tempZoom[index].ViewportWidth;

        msimgPoster.ViewportOrigin = newPoint;
    }
}
//마우스 왼쪽 버튼 다운 이벤트
private void multizoom_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    lastMouseLogicalPos = e.GetPosition(msimgPoster); ///MultiScaleImage 컨트롤의 logical 좌표를 저장

    lastMouseViewPort = msimgPoster.ViewportOrigin; ///MultiScaleImage 컨트롤의 top, left 좌표 저장(이미지 이동시 사용)                                                            
    duringDrag = true;
}
//마우스 왼쪽 버튼 업 이벤트
private void multizoom_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    duringDrag = false;
    /// spring animation 사용(spring animation 아직 잘 파악 못함)
            msimgPoster.UseSprings = true;
}
나머지 이벤트들은 간단합니다. 마우스 왼쪽 버튼을 클릭하면 클릭한 좌표를 저장하고 드래그를 하겠다고 설정합니다. 그리고 마우스 이동할때 좌표들을 계산하여 이동합니다. 끝으로 마우스 왼쪽 버튼에서 손가락을 떼면 이미지 이동을 멈춥니다.
힐 이벤트도 동작할겁니다. 맨 처음 구현하겐 휠 이벤트니까요.

아 그리고 부가적인 이벤트가 있는데요 간단합니다.
/// <summary>
/// 이미지를 불러오는것이 성공 했을 때 호출
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void multizoom_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
    duringOpen = true;
}
/// <summary>
/// 모션블루 효과인거 같음
/// 컨트롤이 자동으로 지원하며 모션 블루 효과가 완료 되면 호출되는 이벤트
/// </summary>
private void multizoom_MotionFinished(object sender, RoutedEventArgs e)
{
    ///이미지를 성공적으로 불러 왔으면 아래와 같이
    ///모션블루 효과가 끝났을 때 MultiScaleImage컨트롤 기본 크기 변경
   if (duringOpen)
   {
        duringOpen = false;

         ///zoom out a tap bit.
         msimgPoster.ViewportOrigin = new Point(-0.1, -0.2);
         msimgPoster.ViewportWidth = 1.2;
    }
}
주석을 보시면 이해가 가실겁니다. 이 이벤트는 처음에 MultiScaleImage  개체의 초기 설정을 해주는 이벤트입니다.
일단 이정도면 간단한 DeepZoom은 구현이 가능할겁니다. 이를 어떻게 더 활용하는냐 정도가 문제겠죠.

참고로 첨부한 소스는 약간 다른데 멍청하게 이미지 변경을 위해서 여러개의 MultiScaleImage를 생성하고 이를 배열에 넣어 참조 하는 방식으로 해서 그렇습니다. 이는 위에 잠깐 말씀 드렸듯이 요소로 빼서 Source를 설정하면 충분히 변경 가능한데요... 그건 그냥 참고만 하시기 바랍니다.^^

전 불과 얼마전부터 보고 있는 실버라이트...
공부를 좀 하다 DeepZoom이란걸 봤습니다. 전 그저 신기하고 놀라울 뿐이었습니다.
이번에 이 DeepZoom이란것에 대한 제 짧은 지식을 써보려고 합니다.

참고로 제가 참고한 사이트는 아래 두 사이트와 "HOONS 닷넷'입니다.
http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx
http://silverlight.net/quickstarts/deepzoom.aspx

그리고 DeepZoom Composer가 버전업되고 난 이후의 글도 찾기 힘든거 같아 함 글을 써봅니다.

우선 DeepZoom을 하려면 DeepZoom Composer가 필요 합니다. (이거 하나만 있으면 쉽게 구현 가능합니다.)
아래 링크에서 받으시면 됩니다.
http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

이걸 설치하시고 실행하면
아래와 같은 화면이 보입니다.
'New Project'를 실행 하셔서 새로운 프로젝트를 생성합니다.


아래와 같이 메뉴를 이용하셔도 됩니다.


1. 경로를 지정하고 OK를 클릭합니다.


2. 아래와 같이 비활성 메뉴들이 활성되는것을 확인 하실 수 있습니다.


3. 이미지에서 오른쪽 'Add Image' 를 클릭하여 사용하고자 하는 이미지를 선택합니다.


4. 이미지를 선택하면 아래와 같이 미리보기가 보입니다. - 이미지 상단을 보시면 'Import'가 선택된걸 확인 하 실 수 있습니다.
   (참고로 사용할 수 있는 이미지 포맷과 해상도는 약간 제한이 있습니다. 이는 맨 상단에 남긴 링크나 DeepZoomCompser
    도움말을 참고해 주시기 바랍니다.)


5. 아래 이미지 상단의 Composer를 선택합니다. 그리고 변환할 이미지를 가운데에 드래그하여 옮겨 놓습니다.
   (맨처음에는 아래 이미지 중앙은 아무것도 없습니다. DeepZoom을 사용할 이미지를 옮겨 놓아야 아래와 같은
    모습을 확인 하실 수 있습니다.)

- 바로 위에 '화살표', '손바닥'...등은 간단한 편집 툴입니다. 정렬과 이동을 할 수 있습니다.
- 이미지가 여러개일 경우 사용하면 유용합니다.

6. 아래 이미지에 흰색 돋보기 부분을 클릭하면 이미지가 DeepZoom영역에 딱 맞게 리사이징 됩니다.


7. 아래 이미지처럼 'Export'를 선택합니다.
   변환 이미지가 저장될 폴더 명을 지정하고 오른쪽 하단 'Export'버튼을 클릭하면 바로 진행이 됩니다.


8. 아래 이미지처럼 진행바가 보입니다.


9. 문제 없이 완료되면 아래와 같은 이미지가 보입니다.
   아래 이미지는 제가 Export Images and Sliverlight Project를 선택해서 보실 수 있는 결과입니다.
   각각 무엇을 뜻하는지는 어렵지 않게 아실 수 있습니다. 다만...

이 결과는 'Export'할때 선택을 무엇을 했느냐에 따라 다르게 나타나는데요.
'Export'오른쪽 영역을 보시면 아래와 'Export Images'와 'Export Images and Silverlight Project'을 확인 하실 수 있는데요. 이는 각각

- Export Images : 이미지만 생성합니다.  --> View Image Folder, Learn More 활성
- Export Images and Silverlight Project : 이미지 및 실버라이트 프로젝트를 생성합니다. - 모두 활성
* Export Images and Sliverlight Project는 또한 MouseWheelHelper라는 이벤트 관련 클래스도 제공합니다.
  이는 주로 마우스 휠 이벤트에 관한 클래스로 재사용이 가능하여 매우 유용합니다.

이제는 결과물을 확인해야 하는데요. 저는 폴더 생성 경로가 처음에는 좀 헷갈렸습니다.
지정한 경로를 찾아가면 (저는 D:\Project(vs2008)\DeepZoom\MyDeepZoom 입니다.

아래 이미지처럼 찾아 가시다 보면 GeneratedImages란 폴더를 보실 수 있습니다.
이 폴더에 DeepZoom Source에 대한 정보를 담은 xml관 소스 이미지가 있습니다.
생성된 프로젝트를 바로 사용도 가능하지만 저는 이게 불편해 솔직히 Export Images만 사용합니다.
(Export Images와 Export Images and Sliverlight Project를 선택에 따라 결과물 폴더면이 달라집니다.
 GeneratedImages 이 폴더명은 Export Images and Sliverlight Project를 선택했을때의 폴더명이고 이때는 항상
 GeneratedImages란 동일한 폴더명으로 생성되고 Export Images는 프로젝트명으로 생성됩니다.
 물로 폴더명은 바꿔도 상관없습니다. 참조하는곳에서 바뀐 이름으로 하면 되니까요.)
* 최종 결과물 생성 폴더명
Export Images : 프로젝트명
Export Images and Sliverlight Project : 'GeneratedImages'






내용이 너무 길어 .. 이해가 되실지 모르겠네요..^^;;;  이런 경험이 없어서..
이를 사용하여 실제 코드를 작성하는 내용은 다음 글에서 하겠습니다.