Silverlight2009.06.09 17:07

Silverlight에서 고해상도의 이미지를 자유롭게 확대/축소할 수 있는 기능.


어떤 방법으로 가능한가?

Deep zoom을 이용하면, 고해상도의 이미지를 확대/축소 하면서 탐색할 수 있다.
그것이 가능하게 하기 위한 핵심은 바로 '이미지 피라미드'.    

이미지 피라미드
원본 이미지를 256x256 크기의 이미지 타일로 만들고,
원본 이미지를 1/4로 축소한 이미지를 256x256 크기의 이미지 타일로 만들고,
축소된 이미지를 다시 1/4로 축소한 이미지를 256x256 크기의 이미지 타일로 만들고를 반복하여,
최종 축소된 이미지가 1픽셀이 될 때까지 수행하여,
각 타일을 별도의 파일로 저장한 뒤, 단계(수준)별로 별도의 폴도에 저장한다.
(256x256 사이즈는 고정 된 것이 아니라, 임의의 크기이며 수정 가능하다.)
(이미지 피라미드는 BitmapImage 클래스에서 지원하는 이미지 파일만 지원.)

위와 같은 방식으로 이미지 피라미드를 만든 후,
Deep zoom에서 전체 이미지를 다운로드 하는 대신, 화면 이미지의 현재 크기에 필요한 타일만 다운로드하여 표시. 로드시간을 단축시킨다.

또한, 이미지를 로드시 고해상도인 경우 파일 사이즈가 적지 않기 때문에, 저해상도의 이미지를 미리 다운로드 한 뒤 표시하고, 고해상도의 이미지가 다운로드 될 때마다 이미지를 변경하여 준다.
유저에게는 뿌옇게 표시 된 뒤(저해상도의 이미지가 확대 되어), 시간이 지날 수록(고해상도의 이미지를 다운 받을 수록) 선명해지는 것처럼 느낄 수 있도록 표현된다.

이미지 피라미드를 사용자가 직접 만드는 것은 매우 힘든 일이며, 이를 위한 Deep zoom Composer 같은 도구를 사용하여 이미지 피라미드를 생성.

   

스프링 에니메이션
이미지 피라미드 간 축소,확대 또는 이미지 이동 의 움직임에는 스프링 에니메이션이 사용된다.
사용자에게 이미지의 이동, 확대, 축소가 자연스럽게 표시된다.

'Silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (0) 2009.06.11
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint  (0) 2009.06.10
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09
Posted by Min-gu, Kim

티스토리 툴바