2010-05-20 4 views
0

마우스를 스크롤 한 다음 마우스로 이동하여 크게 확대 할 수있는 작은 실버 라이트 앱을 만들고 싶습니다. Google지도의 기능과 비슷하며 deepzoom을 사용하고 싶지 않습니다.마우스 휠로 스크롤하고 패닝을 사용하여 이미지 확대

여기 내가 지금 가지고있는 것입니다. 이 앱이 내 첫 실버 라이트 앱이라는 점에 유의하시기 바랍니다. 이 앱은 웹 사이트 구축을위한 좋은 방법입니다. 그래서 그것은 데모 애플 리케이션이고 그 때문에 나쁜 변수 이름을 가지고 있습니다.

초기 이미지 1800px 폭이다.

private void sc_MouseWheel(object sender, MouseWheelEventArgs e) 
    { 
     var st = (ScaleTransform)plaatje.RenderTransform; 
     double zoom = e.Delta > 0 ? .1 : -.1; 
     st.ScaleX += zoom; 
     st.ScaleY += zoom; 
    } 

이 작동하지만, 일부 스무딩을 사용할 수 있으며 왼쪽과 중앙에 하지 위치입니다.

패닝은 다음과 같이이다 : 이 Pan & Zoom Image @ 그것을 발견 그래서 스케일링이 원활하지 않고 패닝 때 때문에, 작동하지 않는 실버

Point start; 
    Point origin; 
    bool captured = false; 

    private void plaatje_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
     plaatje.CaptureMouse(); 
     captured = true; 
     var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform) 
      .Children.First(tr => tr is TranslateTransform); 
     start = e.GetPosition(canvasje); 
     origin = new Point(tt.X, tt.Y); 
    } 

    private void plaatje_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    { 
     plaatje.ReleaseMouseCapture(); 
     captured = false; 
    } 

    private void plaatje_MouseMove(object sender, MouseEventArgs e) 
    { 
     if (!captured) return; 

     var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform).Children.First(tr => tr is TranslateTransform); 
     double xVerschuiving = start.X - e.GetPosition(canvasje).X; 
     double yVerschuiving = start.Y - e.GetPosition(canvasje).Y; 
     tt.X = origin.X - xVerschuiving; 
     tt.Y = origin.Y - yVerschuiving; 
    } 

에서 일 다음이로 변환 그것을 클릭하면 이미지가 사라집니다. 내가 눈치

답변

1

우선이었다이 :

var st = (ScaleTransform)plaatje.RenderTransform; 

(TransformGroup)plaatje.RenderTransform 

. 그래서 하나의 핸들러에서 "plaatje.RenderTransform"을 ScaleTransform으로 캐스팅하고, 다른 하나는 TransformGroup으로 캐스팅합니다. 이것은 아마도 예외를 유발하여 이미지가 사라질 수 있습니다. 줌잉의 경우

, 당신은 UI 요소의 중심을 의미하는 "0.5,0.5"당신이 확장 할 개체 ("plaatje"?)의 RenderTransformOrigin을 설정하려고 할 수 있습니다. 따라서 이미지는 왼쪽 상단 구석이 아닌 중심점 주위로 확대됩니다.

건배, Alex

관련 문제