Deep Zoom

다음 샘플은 Deep Zoom 동작을 보여 줍니다. 이 예제를 실행해 보려면 더하기(+) 단추를 클릭하거나 마우스 휠을 사용하여 확대합니다. 축소하려면 빼기(–) 단추를 클릭하거나 마우스 휠을 사용합니다l. 보기를 다시 설정하려면 첫 번째 정사각형 단추를 클릭합니다. 이미지를 다시 배치하려면 마우스로 끕니다.

이 샘플을 실행합니다.

이 샘플을 다운로드합니다.

Deep Zoom을 사용하는 웹 사이트의 예를 보려면 Deep Zoom example을 클릭하십시오. 확대 및 축소하려면 마우스 휠을 사용합니다. 이미지를 다시 배치하려면 마우스로 끕니다.

Deep Zoom은 많은 다양한 영역에서 사용할 수 있지만 Deep Zoom이 특히 유용하게 사용되는 세 가지 주요 시나리오가 있습니다.

• 매우 크거나 해상도가 높은 이미지 탐색: 고전적인 예는 커다란 지도의 일부를 확대하여 다양한 수준의 세부 정보를 보고 마우스를 사용하여 지도 표면에서 뷰를 이동하는 것입니다. 사용자가 뷰를 이동하는 동안 이미지의 한 장소에서 다른 장소로 이동하는 느낌을 주기 위해 애니메이션이 사용됩니다. 또 다른 예는 고해상도 그림으로 구성된 전문적인 합성 사진을 탐색하는 것입니다.

• 3-D 사진: 방을 360도로 보여 주는 여러 장의 연속적인 사진을 찍습니다. 이제 사용자는 서로 연결된 사진으로 방 전체를 돌아볼 수 있습니다.

• 광고: 광고의 전체적인 테마를 나타내는 해상도가 상대적으로 낮은 이미지를 만든 다음 제품에 대한 인상과 데이터가 추가된 고해상도 이미지로 점진적으로 진행할 수 있습니다. 광고가 포함된 페이지를 처음 로드한 후 점차적으로 해상도가 높은 이미지를 로드하면 광고가 점차 또렷해지면서 독자의 주의를 끌 수 있습니다. 광고는 점진적으로 로드되므로 사용자의 전체적인 사이트 환경에 큰 영향을 주지 않습니다. 또한 사용자는 마우스를 광고 위에 놓아 광고의 여러 부분을 확대할 수 있습니다.

Deep Zoom은 다중 해상도 이미지를 사용하여 매우 큰 이미지의 경우에도 높은 프레임 속도와 빠른 열기 속도를 제공합니다. 이미지를 로드할 때는 화면에 무언가를 빨리 표시하기 위한 소량의 데이터만 필요합니다. 처음 이미지가 로드될 때는 이미지의 저해상도 버전이 표시되고 로드가 진행됨에 따라 더 높은 해상도의 이미지로 변합니다. 이런 이유 때문에 Deep Zoom에서는 흐릿한 이미지가 점점 또렷해집니다. 또한 이런 특성 때문에 Deep Zoom은 이미지 크기에 관계 없이 이미지 데이터가 로드되는 동안 오래 기다리지 않아도 이미지가 즉시 열리는 것처럼 표시할 수 있습니다. 처음 로드할 때 외에도 확대/축소 및 이동처럼 사용자가 응용 프로그램과 상호 작용할 때도 같은 동작을 경험할 수 있습니다.

Deep Zoom은 사용자에게 이미지 주위로 부드럽게 움직이는(패닝 또는 확대/축소) 느낌을 주는 스프링 애니메이션을 사용합니다. 이 스프링에는 초기 상태에서 최종 상태까지 애니메이션 효과가 적용되며 시간에 상대적인 그라데이션이 1을 향해 급격하게 감소합니다. 스프링 대상 값은 사용자 확대/축소/팬 동작에 반응에 즉시 업데이트 됩니다. 개발자가 표시 뷰포트를 변경하면 시각적인 연속성 및 매끄러운 동작을 위해 내용을 새 뷰포트에 맞추기 위한 전환도 스프링을 사용하여 수행됩니다.

이제 Deep Zoom에서 전체 하드웨어 가속을 지원합니다. 자세한 내용은 Silverlight 하드웨어 가속 항목을 참조하십시오.

Deep Zoom을 사용하는 응용 프로그램을 만들려면 먼저 Deep Zoom 이미지를 만들어야 합니다. Deep Zoom 이미지는 이미지 피라미드를 형성하는 여러 해상도의 JPEG 또는 PNG 이미지 타일로 구성됩니다. 타일 크기는 일반적으로 256x256이지만 수정할 수 있습니다. 각 타일은 별도의 파일에 저장되고 피라미드의 각 수준이 별도 폴더에 저장됩니다. 이를 통해 Deep Zoom에서는 전체 이미지를 다운로드하는 대신 화면 이미지의 현재 크기에 필요한 타일만 인출할 수 있습니다. 예를 들어 이미지의 강조 표시된 중간 부분만 보기 위해 확대하는 경우 Deep Zoom에서는 전체 1024x1024 이미지 대신 강조 표시된 타일만 로드합니다.

참고:
Deep Zoom 이미지는 BitmapImage 클래스에서 지원되는 이미지 파일만 지원합니다.

다음 그림은 Deep Zoom 이미지의 작동 방법을 보여 줍니다. 이미지 자체는 피라미드 아래쪽에서 전체 해상도로 사용할 수 있으며, 4x4 픽셀까지의 저해상도 버전이 전체 해상도 이미지와 함께 저장됩니다. 피라미드의 각 수준에 있는 이미지는 256x256 픽셀의 타일(이미지의 흰색 선으로 구분)에 저장됩니다.

이러한 피라미드를 직접 만드는 것은 어렵기 때문에 이미지를 이미지 피라미드로 변환하는 도구를 사용하는 것이 좋습니다. Deep Zoom 이미지를 만드는 가장 좋은 방법은 Deep Zoom Composer와 같은 도구를 사용하는 것입니다. 이 도구를 사용하면 단일 이미지 또는 파노라마에 배치된 여러 이미지를 사용하여 이미지 피라미드를 만들 수 있습니다. 이미지 피라미드에 액세스하기 위해 사용되는 파일 형식에는 XML 스키마가 사용됩니다. 또한 Deep Zoom Composer를 사용하여 이 파일 형식을 생성할 수 있지만 XML을 직접 만들거나 생성된 파일을 직접 변경하여 파일 형식을 더 세밀하게 제어할 수 있습니다. Deep Zoom 파일 형식에 사용되는 XML 스키마에 대한 자세한 내용은 Deep Zoom 파일 형식 개요를 참조하십시오.

참고:
Photosynth는 Deep Zoom composer와 동일한 형식을 사용하여 Deep Zoom 응용 프로그램에 잘 맞는 파일을 만들 수 있는 도구입니다. Photosynth는 3차원, 360도 모델을 만들기 위한 용도로 개발되었습니다. 예를 들어 방문한 장소에서 여러 장의 디지털 사진을 촬영하여 Photosynth에 이미지를 로드할 수 있습니다. Photosynth에서는 각 사진의 유사성을 분석한 다음 사진을 서로 이어서 사진을 촬영한 장소의 모델을 만듭니다.

Deep Zoom 이미지가 있으면 이 이미지를 로드하기 위해 MultiScaleImage와 같은 Deep Zoom 개체가 필요합니다. 다음은 XAML에서 MultiScaleImage를 만드는 방법을 보여 줍니다.

<MultiScaleImage x:Name="deepZoomObject" Source="source/items.dzi" />

다음은 코드로 MultiScaleImage를 만드는 방법을 보여 줍니다.

Dim myDeepZoomObject As MultiScaleImage = New MultiScaleImage
myDeepZoomObject.Source = New Uri("source/items.dzi")

MultiScaleImage myDeepZoomObject = new MultiScaleImage();
myDeepZoomObject.Source = new Uri("source/items.dzi");

Source 속성은 Deep Zoom 이미지를 가리킵니다. 웹 페이지가 열리면 이미지가 처음에는 흐리게 표시되다가 점점 선명해집니다.

Deep Zoom 이미지를 로드한 후 바로 이미지와 상호 작용할 수는 없습니다. 상호 작용을 가능하게 하려면 MultiScaleImage 이벤트를 처리하고 코드를 사용하여 확대/축소 및 이동 기능을 제공해야 합니다.

다음 예제에서는 MouseEnter 이벤트를 사용하여 마우스 포인터가 이미지 위로 이동할 때 이미지의 중간을 확대합니다.

이 샘플을 실행합니다.

<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml" 
 MouseEnter="DeepZoomObject_MouseEnter" />

Private Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
    ' The ZoomAboutLogicalPoint method allows you to zoom and pan
    ' in the same step. The first parameter is the zoom (3x) and the
    ' third and fourth parameters are the respective x and y coordinates
    ' of the logical point to zoom around.
    Me.deepZoomObject.ZoomAboutLogicalPoint(3, 0.5, 0.5)
End Sub

private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{

    // The ZoomAboutLogicalPoint method allows you to zoom and pan
    // in the same step. The first parameter is the zoom (3x) and the
    // third and fourth parameters are the respective x and y coordinates
    // of the logical point to zoom around.
    this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
}

이전 예제에서는 ZoomAboutLogicalPoint 메서드가 확대/축소와 패닝을 수행합니다. 첫 번째 매개 변수는 이미지의 현재 확대/축소 비율에서 증가하는 확대/축소 승수입니다. 예를 들어 이 예제에서 기본 확대/축소는 1이므로 값이 3이면 3배로 확대됩니다. 동일한 값을 사용하여 다시 확대/축소하면 원래 크기의 9배인 3*3으로 확대됩니다.

ZoomAboutLogicalPoint 메서드의 두 번째 매개 변수와 세 번째 매개 변수는 각각 확대/축소(또는 패닝)할 위치의 논리적 점에 대한 x 및 y 좌표입니다. 논리적 점은 이미지 내의 x 및 y 위치에 표준화된 값(0 - 1 사이)을 사용합니다. 따라서 값 0.5, 0.5는 0.5가 0과 1의 중간이므로 이미지의 중간에 있습니다. 0보다 작거나 같은 좌표 값이나 1보다 크거나 같은 좌표 값을 지정하면 이미지가 완전히 뷰 바깥으로 이동합니다.

특정 시점에 사용자에게 보이는 이미지 영역을 뷰포트 영역이라고 합니다. 다음 그림은 뷰포트 영역의 모양을 개념적으로 보여 줍니다.

다중 해상도의 개별 이미지 집합으로 작업하려는 경우, 예를 들어 화면에서 다중 해상도의 개별 이미지를 프로그래밍 방식으로 이동하거나 이미지를 필터링하려는 경우 단일 고해상도 이미지보다는 이미지 컬렉션을 사용합니다. 이미지 컬렉션 작업을 하려면 다음 두 가지 기본 작업을 수행해야 합니다.

1. 이미지를 단일 이미지 대신 컬렉션으로 내보냅니다.

   Deep Zoom Composer에서 이 작업을 수행할 수 있습니다. 컴퍼지션을 내보낼 때 컬렉션으로 내보내기(다중 이미지) 옵션을 선택해야 합니다. 내보낸 컬렉션 내의 이미지를 하위 이미지라고 하며 각 이미지에는 고유의 이미지 피라미드가 있습니다.

2. SubImages 속성을 사용하여 MultiScaleImage(개별 MultiScaleSubImage 개체)의 하위 이미지에 액세스합니다.

   다음 예제에서는 MultiScaleSubImage의 하위 이미지 목록을 가져오는 방법을 보여 줍니다.

   Visual Basic

   Private Function RandomizedListOfImages() As List
     Dim imageList As List = New List
     Dim ranNum As Random = New Random
     ' Store List of sub images.
     For Each subImage As MultiScaleSubImage In myMultiScaleImage.SubImages
       imageList.Add(subImage)
     Next
     Return imageList
   End Function
   

   C#

   private List<MultiScaleSubImage> RandomizedListOfImages()
   {
     List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
     Random ranNum = new Random();
   
     // Store List of sub images.
     foreach (MultiScaleSubImage subImage in myMultiScaleImage.SubImages)
     {
       imageList.Add(subImage);
     }
   
     return imageList;
   }
   

다음 샘플에서는 컬렉션의 모든 MultiScaleSubImage 개체를 조작하여 이미지를 표 형태로 다시 정렬할 수 있습니다. 효과를 확인하려면 이미지 임의화 단추를 클릭합니다.

이 샘플을 실행합니다.

이 샘플을 다운로드합니다.

작업

개념

기타 리소스