본문 바로가기

DeepZoom

(9)
2009 Elite Model Look Korea 안녕하세요. 이번 포스팅에서는 (주)더블가이에서 실버라이트로 만든 2009 엘리트 모델 룩 코리아 온라인 인기 투표 페이지 사례를 소개 하고자 합니다. 화면 구성 우선, 첫 메인화면을 접속 하시면, 현재 남자 모델, 여자 모델 각각의 랭킹 정보를 읽어옵니다. 랭킹 정보를 읽고 난 뒤에 메인 화면에 들어갑니다. 남, 여 각각 순위가 가장 높은 순서대로 좌측의 Profile Thumbnail 부분과 중앙하단에 각각의 모델들이 정렬 됩니다. 모델들의 Thumbnail 을 클릭하셔서 원하시는 남, 여 모델 각각의 자세한 프로필을 보실 수 있습니다. (Age, Height, Weight, Bust, Waist, Hip) Thumbnail 만 보고 투표를 하실 순 없겠죠^^? 좀 더 각각의 모델들을 면밀히 살펴 볼..
New Deepzoom Composer in Silverlight 3 안녕하세요. 지난 10일 Silverlight 3 RTW (정식버전)이 런칭 되면서, Deepzoom Composer 도 함께 새 버전이 나왔는데요. 새로운 Deepzoom Composer 를 열심히 분석 해 본 결과, 놀라운 기능(Sildershow, Navigation, Hyperlink)이 추가 된 것 처럼 보이지만, 실상 Export 해 보면 지난 버전과 크게 차이나는 게 없고, scene.xml 이란 파일이 생성되는데 도통 어떻게 써먹는 것인지도 모르겠더라고요. 그래서 미 완성된 버전이라 생각하고 차후 버전을 기다려 왔습니다. 헌데, 지난 22일 차후 버전이 드디어 나왔더군요!! +_+ New Deepzoom 다운로드 ☜ 우선, 놀랍고 쉽게 구현 할 수 있는 Sildershow, Menu, Hy..
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..
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의 SubImages 배치변경 Deepzoom에서도 SubImages의 배치를 변경하는 기능을 구현 해 보려고 합니다. Deepzoom 을 원하는 만큼 제어할 수 있도록 하려면 ViewportWidth, ViewportOrigin, AspectRatio, Logical Point, Element Point 에 관한 이해를 먼저 하셔야 합니다. 도움이 되실 지 모르겠지만, 제가 포스팅 했던 글을 참조 해 보시기 바랍니다. 2009/06/10 - [Image/Deepzoom] - Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint 그럼 기능 구현을 해보겠습니다. Deepzoom Composer를 통해 이미지 피라미드를 구성하게 되면, Export 된 폴더에 이미지..
Make a Deepzoom Solution Deepzoom 에 관한 기초 지식을 기반으로 간략한 Test 솔루션을 만들어 보겠습니다. Test 솔루션에서 구현 될 기능 리스트 입니다. 1. Mouse Left Button Click 시 Deepzoom Image 확대. 2. Shift + Mouse Left Button Click 시 Deepzoom Image 축소. 3. MouseWheelHelper를 사용한 Wheel 지원 4. Pan 기능(Mouse Drag를 통한 Deepzoom Image 이동). Deepzoom Test Solution 을 하나 생성합니다.(Web Project 도 함께 추가합니다.) Deepzoom Composer 를 이용한 Deepzoom Image 피라미드를 ClientBin 폴더에 복사합니다. Deepzoom C..
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint AspectRatio MultiScaleImage 의 Source Image의 가로 세로 비율. the width of the image divided by its height. ( 이미지의 가로를 세로로 나눈 ) Readonly Property. AspectRatio Property의 활용 : ? ViewPort ViewPort 란 MultiScaleImage Control의 Source Image를 보는 창이다. (Source Image의 특정 영역을 보는 데 사용하는 사각형 영역) Source Image를 삼차원으로 다루는 하나의 방식이라고 생각할 수 있다. ViewPort 를 제어 할 수 있는 Property로 ViewportWidth와 ViewportOrigin 가 있다. ViewportWidt..
Deepzoom Composer로 Export 된 결과물 Deepzoom Composer 를 사용하여 Export 된 폴더 - Composition으로 Export 했을 경우 폴더 안에는 dzc_output_files 폴더와 dzc_output.xml, SparseImageSceneGraph.xml 두 개의 파일이 생성 된다. dzc_output.xml은 Silverlight Control에서 MultiScaleImage 의 Source 가 되며, - 이미지의 사이즈 정보를 가지고 있다. dzc_output_files 폴더 안에는 Deep Zoom Composer 로 Export 된 이미지 피라미드가 생성 되 있으며, MultiScaleImage 컨트롤에서 로드 시 이 폴더의 이미지 피라미드를 로드하게 된다. 12부터 원본이미지의 타일이 각 수준별로 저장 되 ..