이글은 프로젝트로제타 4번째 강의 번역한 글입니다^^( http://channel9.msdn.com/continuum/tutorials/Dragging/)
Dragging, Easing & Inertia
이제부터 래스터(점방식) 이미지를 갖고 작업하는 더 큰 샘플에 대해서 함께 배워보도록 하겠습니다.
여기 플래쉬 무비가 있습니다. 우리는 이제 실버라이트로 재 편성 할 것입니다.
우리는 이 예제를 액션스크립트1.0으로 작 성하였고, 모든 수준의 플래쉬 디자이너들을 위하여 간단하고 가볍게 만들었습니다.
좀더 수준높은 플래쉬 프로그래머들은 로직을 몇몇의 클래스로 캡슐화시키는 선택에대해 의심할 여지가 없을 것입니다.
우리가 실버라이트 예제에서 후에 다시 만들 것처럼말입니다.
여기 패널들과 이미지들을 동적으로 올리는 액션스크립트 1.0 코드가 있습니다:
첫번째 줄의 변수는 어떤 패널이 현재 드래그 되어질 것인지를 사용하기위한 레퍼런스값을 갖고있을 용도로 생성됩니다.
9번째줄에서는 드래그될 오브젝트가 어디로 가야하는지 결정하게 될 onMouseMove() 핸들러가 스테이지에 더해지게되고, 30 ~ 32번째 줄까지는 각각의 패널에대한 이벤트 핸들러들이 더해지게 됩니다.
우리가 drag를 이용한 좀 더 쉬운 행동을 원할 뿐만아니라, 원한다면 그림 타일들을 throw할수 있게 하기 위해서
일반적인 startDrag() 호출을 원하지 않는다는 것에 대해서도 주목해야 할 것입니다.
그러므로, 우리는 우리만의 drag와 throw로직을 만들어야 합니다.
뒤에 코드에는 핸들에대한 정의 와 우리 script의 마지막부분이있습니다.:
코드에서 쉽게 조작할수있는 70~71행에 해당하는 두줄과 알고리즘은 이중에서 가장 유용한 것들중에 하나입니다.
" where you want to be minus where you are times a percentage "
이 결과를 현재 당신이 위치한 곳에 더하고 매 프래임마다 이를 반박합니다.
당신은 다음의 몇몇 강의를 통해서 이처럼 속성들의 모든타입을 위한 다양한 폼의 알고리즘들을 볼수 있게 될것입니다. 그리고 이것은 toolbox에서 가장 많이 사용된 알고리즘 중에 하나입니다.
비록 드래그를 위하여 필요한것은 아니지만, 76~79행은 만약 사용자들이 그것을 단순한 drag 하기보단 throw하기로 결정했다면 패널을 움직이는데 있어서 속력과 마찰을 더해줍니다.
Although not necessary for drag, Lines 76 through 79 add velocity and friction to keep the panel moving if the user decides to throw it instead of simply dragging it.
Rebuilding the Project in Silverlight 실버라이트로 프로젝트를 다시 만들어 봅시다
우리가 Silverlight project를 만들고, Page.xaml에있는 LayoutRoot 태그를 Canvas로 바꾸고난 후에, 원하는 배경을 디자인하고, User Control 태그를 위해서 Loaded handler를 더합니다.
이러한 프로젝트를 위하여, 우리는 또한 새로운 User Control를 Panel.xaml이라 불리는 solution에 더하고 그것에대한 수정도 합니다.
여기 우리가 작업을 다하고 나서 볼것과 유사한 두개의 XAML파일이 있습니다.:
작성하는데 있어서 가장 중요한것은 우리가 Image태그를 Panel.xaml의 8번째 줄에 image라는 이름으로 삽입 했다는 것입니다.
우리는 이미 이 프로젝트에 사용하게 될 사진들의 사이즈를 알고있기 때문에, 왼쪽 위에있는 registration point of this User Control주위로 이지미 홀더의 중심을 위치시킬수 있습니다.
Page.xaml.cs는 각 Panel.xaml의 user control를 동적으로 로딩 관리할 뿐만아니라, 드래깅을 위한 그들이 마우스를 누르거나 놓는 행위를 관리(hook up)할수 있습니다.
여기있는 파일이 Page.xaml.cs 라는 code behind file 입니다 :
각각의 Panel.xaml은 그것 자신의 image태그를 가지고 있기 떄문에, 각 User Control이 그것 자산의 그래픽을 다룰 수 있게 됩니다.
각 Panel.xaml은 또한 드래깅하는동안 Page.xaml에 targetX 과 targetY값을통해서 그것을 쉽게 다룰수 있는 그것 자신만의 스토리보드 객체를 가지게 됩니다.
또한 우리가 이미지들을 다루기 때문에, 12행에서 using 참조를 사용해서 System.Windows.Media.Imaging 를 더해줄 필요가 있습니다.
아래는 다 하고 난 뒤의 Panel.xaml.cs 의 모습입니다:
실제적인 이미지를 불러와 다루는 코드는 53행의 코드입니다.
이것이 실행되기 위해서는, (orchid0.png through orchid5.png) 이미지들이 실버라이트 프로젝트에 default로 더해야하고, 속성창의 Build Action 속성을 Resource로 맞춰줘야합니다.(아래그림)
이것은 그림들을 Lesson04_a.xap로 복사해오게 된다, 그래서 만약 ClientBin에서 그것들을 찾기 원한다면 그것들을 찾을수 었을것입니다.
그러나, 당신은 여전히 그것들을 상대적인 url로 이름을통해서 53행에 보여지는 것처럼 참조할수있습니다.
그리고, 마지막으로 여기 우리가 실버라잇으로 다시만든 것이 있습니다 :
이번 강의에서는, 실버라이트 프로젝트가 이미지를 동적으로 불러들였지만, 이미지들은 이미 XAP파일안에 있었습니다.
하지만, 만약 우리가 다른 URL로부터 이미지를 얻어오기를 원한다면? 우리는 이것을 다음시간에 배울것입니다.