본문 바로가기

silverlight

Deepzoom Composer에서 Multiple Images와 MultiScaleImage의 화면 비율

 이전 포스팅에서와 마찬가지로 Deepzoom Composer에서 추출 된 이미지 피라미드와 MultiScaleImage 엘리먼트의 화면 비율에 관한 이야기를 이어 보겠습니다.

2009/06/30 - [Image/Deepzoom] - Deepzoom Composer에서 Single Image와 MultiScaleImage 엘리먼트의 화면 비율

 이전 포스팅에서는 Single Image를 다뤘는데요, 이번에는 Multiple Images를 다뤄보겠습니다.

 Single Image에서는, Deepzoom Composer에서 추출 된 이미지 피라미드를 MultiScaleImage 엘리먼트의 소스에 할당 했을 경우, Single Image의 가로 : 세로 비율에 알맞는 MultiScaleImage 엘리먼트의 Size를 조정해야만 처음 로드시 MutliScaleImage에 꽉차게 로드 되게 됩니다.
 Multiple Images 일 경우는 어떨까요?
 Multiple Images 경우에는, 가로는 Compose에서 배치 된 Images 중, 최좌측에 배치 된 이미지 부터 최우측에 배치 된 이미지까지의 Size가 Multiple Image의 가로 Size가 됩니다. 마찬가지로, 세로는 Compose에서 배치 된 Images 중, 최상단에 배치 된 이미지부터 최하단에 배치 된 이미지까지의 Size가 Multiple Image의 세로 Size가 됩니다.
 이렇게 정해진, 가로 : 세로의 비율이 MutliScaleImage 엘리먼트 Size와 일치해야만 Deepzoom Composer에서 추출된 이미지를 MultiScaleImage 엘리먼트의 소스에 할당 했을 경우 첫 로드시 개발자가 원하는 화면이 로드 되게 되는 것이죠.

 그럼, 1024 : 768 사이즈의 이미지 3개로 실습 해 보겠습니다.

 1024 : 768 사이즈의 이미지를 다음과 같이 배치 한 뒤, Export 했습니다.

 화살표에서 보시는 바와 같이, 1024 : 768 이미지를 위와 같이 배치 했을 경우, Multiple image의 전체 비율이 2048 : 1536 가 되는 것을 확인 할 수 있습니다.

 그럼 2048 : 1536 비율의 Size를 갖는 MultiScaleImage 엘리먼트에 할당 해 보죠.

(간단한 수학 식이지만 2048 : 1536 = 400 : 300 입니다 ^^;)

 보시는 바와 같이, Deepzoom Composer 에서 추출 된 이미지가 MutliScaleImage에 꽉 맞게 로드 되는 것을 확인 할 수 있습니다. 이전 포스팅에서 보여드렸던 것과 마찬가지로 Mutiple Image의 가로 : 세로 비율과 MutliScaleImage 엘리먼트의 가로 : 세로 비율이 맞지 않게 된다면 이미지의 아랫 부분이 잘리거나, MultiScaleImage 엘리먼트의 하단에 공백이 생기게 되는 것입니다.

 이런 원리를 조금 더 응용해 본다면, 2개의 이미지로 화면 비율을 설정 해 두고, 나머지 이미지를 자유롭게 배치하여, 첫 로드시 정확히는 ViewportWidth가 1일 경우 MutiScaleImage 엘리먼트에 보여지는 모습을 지정하고, MultiScaleImage의 화면 비율까지도 미리 지정 해 둘 수 있겠죠 ^^

 빨간색 화살표로 표시 된, 두 이미지를 통해서, 전체 Multiple images 의 화면 비율을 맞춘 후 (여기서는 4:3 비율로 맞췄습니다.) 녹색 테두리의 두 이미지를 배치했습니다. 이렇게 해서 생성 된 이미지 피라미드를 MultiScaleImage의 Source에 할당 한 뒤, 로드시 화면 비율을 맞추기 위해서 사용 된 두 이미지를 감추게 되면, MultiScaleImage의 비율이 4:3이고, ViewportWidth가 1인 경우 어떤 해상도에서든 항상 다음과 같은 모양으로 보여지게 됩니다.
<이미지를 감추는 부분>

<MutliScaleImage의 Width="400", Height="300" 인 경우>

<MutliScaleImage의 Width="800", Height="600" 인 경우>