커서로 줌/스크롤

Question

스크롤 뷰어 내에서 이미지를 확대/축소 할 때 문제가 있습니다. zoom-in 버튼을 사용할 때마다 버튼을 클릭 할 때마다 이미지의 너비/높이를 원래 크기의 1.25로 설정하는 이중 애니메이션을 사용합니다. 배율을 0.75로 설정하는 축소 버튼에 대해서도 마찬가지입니다. 지금까지 너무 좋아.

문제는 클릭 지점을 향해 스크롤하려는 scrollviewer ID의 중심을 기준으로 클릭하는 위치를 기반으로합니다. x와 y 축의 스크롤 방향을 결정하는 데 사용되는 델타 x/y를 계산합니다.

double deltaX = (ClickPosition.X - center.X) 
double deltaY = (ClickPosition.Y - center.Y) 

은 이제 (도 이중 애니메이션 애니메이션되는) 수직 및 수평 스크롤바에 델타를 적용 할 때 이미지의 계정에 현재의 줌 배율을한다.

동시에 확대/축소하고 스크롤하면 최종 위치가 예상대로 끝나지 않습니다. 이미지 스케일링의 원점은 항상 이미지의 0,0 (맨 위 왼쪽 구석)에있는 것처럼 보이므로이를 처리하는 방법이 확실하지 않으므로 센터의 왼쪽을 클릭하면 클릭하는 것보다 왼쪽으로 더 강하게 스크롤됩니다 센터의 오른쪽.

예 : http://212.214.41.66/SilverlightZoom/RealQImageMapTestPage.html

출처 : 코드에서 http://212.214.41.66/SilverlightZoom/ImageMap.zip

Answer 1

, 당신은 너비와 이미지의 높이를 증가시켜 이미지를 확대합니다. 이것은 항상 맨 위 왼쪽 지점에서 발생합니다. 그러나 크기 조절 변환을 사용하면 이미지의 크기를 조절할 지점을 설정할 수 있습니다.

<Image x:Name="img" Margin="151,127,208,142" Source="Waterfall.jpg" Stretch="Fill"> 
        <Image.RenderTransform> 
        <ScaleTransform x:Name="imagescale" ScaleX="1.2" ScaleY="1.2" CenterX="100" CenterY="100"> 
        </ScaleTransform> 
        </Image.RenderTransform> 
        </Image> 

이 코드 샘플이이 속성에 바인딩하여 ClickPosition에 배율을 설정 할 수 있도록해야 here

에서 가져온 것입니다.

또 다른 참고 사항 : 당신이 당신의 스케일링이 그런 식으로 작동하도록 의도했는지 확신 할 수 없지만 1.25로 확대 할 경우, 0.75가 아니라 1/1.25로 축소해야합니다. 그러면 계속해서 줌이 계속 변경됩니다 (즉, 두 배로 확대하고 두 번 축소하면 더 이상 1의 줌이되지 않습니다.)