Deepzoom Composer에서 Single Image와 MultiScaleImage 엘리먼트의 화면 비율

 Deepzoom Project를 위해서는 MultiScaleImage의 Source를 위해 이미지 피라미드와 XML 파일이 필요한데요, 바로 이 이미지 피라미드와 XML파일을 Seadragon의 Deepzoom Composer를 사용하여 추출해 낼 수 있습니다.

 이미 많은 분들이 Deepzoom Composer를 이용하여 이미지 피라미드와 XML파일을 추출해 내고 있으실 텐데요, Deepzoom Composer를 사용하여 Export 된 컬렉션 이미지들의 배치와 화면 비율에 관한 이야기를 해 보려고 합니다.

1024x768 사이즈의 이미지 한 장으로 이미지 피라미드를 구성하였습니다. 이 경우, 가로 : 세로 = 1024 : 768 의 비율로 Export 되기 때문에 위와 같이 Export 된 이미지 피라미드를 MultiScaleImage의 Soucre에 할당 할 경우, 처음 로드시 ViewportWidth 가 기본 1로 로드 되기 때문에 MultiScaleImage 엘리먼트의 사이즈가 1024: 768의 비율이라면 엘리먼트 내 꽉 차게 로드 되게 됩니다.

코드에서 처럼, MultiScaleImage 엘리먼트의 Width와 Height를 1024 : 768 의 비율로 해서 각각 400, 300 씩 지정하였습니다.

만일, 1024 : 768의 비율이 아니라면, 어떻게 될까요? 정답은, ViewportWidth 가 기본으로 1로 셋팅 된 상태로 로드된다는 점에 있습니다. 1024 : 768의 비율보다 세로의 비율이 더 적어진다면, 이미지의 아랫 부분이 짤리게 나오고, 세로의 비율이 더 커진다면 전체 이미지가 보이고, MultiScaleImage의 아랫 부분에 공백이 생기게 됩니다.
<MultiScaleImage Width = "400" Height="200" 인 경우>

<MultiScaleImage Width = "400" Height="400" 인 경우>

정리하자면, MultiScaleImage는 처음 로드시 ViewportWidth = 1, ViewportOrigin = (0, 0) 으로 할당 되 있기 때문에 Source 이미지는 가로(Width)로는 모두 표시 되지만, 세로는 해당 이미지의 가로:세로 비율과 해당 MultiScaleImage 엘리먼트의 Size에 따라서, 짤릴 수도 있고, 여백이 생길 수도 있게 되는 겁니다. (물론, 비율이 딱 맞게 조정 되 있다면, 화면에 꽉 차게 로드 되겠죠)