DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 .sdi 파일 만들기 DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기
DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기
DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기이전 두 강좌에서 우리는 Deep Zoom Composer로 SeaDragon 이미지 파일을 만들었고 VS 2008에서 실버라이트 프로젝트를 만들어서 <MultiScaleImage> 컨트롤을 이용하여 실버라이트에 Deep Zoom 이미지를 띄웠습니다. 하지만 가장 중요한 마우스로 줌인/줌아웃이 되지 않았죠. 이번 강좌에서는 마우스 이벤트 핸들러를 이용해서 줌인/줌아웃을 구현해 보겠습니다.
줌인/줌아웃에 관련된 소스코드는
*
The Weekly Source Code 18 - Deep Zoom (Seadragon) Silverlight 2 MultiScaleImage Mouse Wheel Zooming and Panning Edition - Scott Hanselman*
마우스 휠 사용을 위한 코드 - pete blois에서 가져왔습니다.
우선 작동을 시켜보고 소스코드를 살펴보는것이 좋을 것 같습니다. 아래 C# 코드를 다운받아서 실버라이트 프로젝트에 추가시킵니다.
프로젝트에 추가시키는 방법은 실버라이트 프로젝트에서 오른쪽 클릭을 하고 Add
- Add Existing Item을 선택하여 다운로드 받은 파일을 선택합니다.
그런후에 Page.xaml.cs 파일을 열어서 생성자에서 아래와 같이 코드를 한줄만 입력합니다.
public Page()
{
InitializeComponent();
DeepZoomMouseController mouseController
= new DeepZoomMouseController(this, msimgPoster);
}
이 코드는 방금 다운로드해서 추가한 클래스를 이용해서 마우스컨트롤러를 생성합니다. 두가지 파라미터는 <MultiScaleImage>를 포함하고 있는 컨트롤 (여기서는 Page)과 <MultiScaleImage> 컨트롤의 이름 입니다.
이렇게 한 다음에 F5를 눌러서 실행을 시키면 이제 드디어 마우스로 줌인/줌아웃이 가능하게 됩니다. 작동하는 기능은
- 마우스 왼쪽 클릭 : 줌인
- Shift 키를 누르고 마우스 왼쪽 클릭 : 줌 아웃
- 마우스 드래그 : 이동
- 마우스 휠 : 줌인/줌아웃
다음 강좌에서는 방금 사용한 코드를 일부만 분석을 해보겠습니다.
오일석