Question

我想缩放图像并将焦点更改为悬停时的光标位置就像在以下链接中一样 Zoom on hover。我对缩放逻辑不感兴趣，但我想知道如何将Image的焦点中心更改为当前光标位置，就像上面的链接一样。

XAML：

var slider = 0;
function slideimage() {
  document.getElementById('slide').src = image[slider].src;

  if (slider < 1) {
  ...

解决方案应该适用于Windows 10通用应用程序。

Answer 1

我玩这个玩得很开心！ :)这就是我想出来的。我认为它会完全符合您的要求。您可以调整图像宽度/高度和缩放系数以获得所需的效果。

XAML：

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="imageNormal" Source="Assets/TestPicture.jpg"></Image>
        <ScrollViewer x:Name="scrollViewer"  ZoomMode="Enabled" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" PointerEntered="scrollViewer_PointerEntered" PointerMoved="scrollViewer_PointerMoved" PointerExited="scrollViewer_PointerExited">
            <Image x:Name="imageZoomed" Height="768" Width="1024" ></Image>
        </ScrollViewer>
    </Grid>

C＃：

private void scrollViewer_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    imageNormal.Opacity = 0;
    scrollViewer.ZoomToFactor(3);
    imageZoomed.Source = new BitmapImage(new Uri(@"ms-appx:///Assets/TestPicture.jpg"));
}

private void scrollViewer_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var pointerPoint = e.GetCurrentPoint(imageNormal);
    var horizontalScrollPercent = pointerPoint.Position.X / imageNormal.ActualWidth;
    var verticalScrollPercent = pointerPoint.Position.Y / imageNormal.ActualHeight;
    try
    {
        scrollViewer.ChangeView(horizontalScrollPercent * scrollViewer.ViewportWidth * scrollViewer.ZoomFactor, verticalScrollPercent * scrollViewer.ViewportHeight * scrollViewer.ZoomFactor, null);
    }
    catch { }
}

private void scrollViewer_PointerExited(object sender, PointerRoutedEventArgs e)
{
    imageNormal.Opacity = 1;
    imageZoomed.Source = null;
}

希望有所帮助！对我来说很棒。：）

如何在Windows 10应用程序中将图像焦点中心设置为鼠标位置？

1 个答案: