缩放到鼠标位置 [英] Zooming to mouse position

问题描述

我有一个ViewBox，该ViewBox绑定到ScrollView"Main".一个矩形突出显示了ScrollViewer的当前可视区域.以下是XAML代码. DataContext =" {Binding ElementName = Main}"<"< Grid>< Grid>
< Rectangle
=" {Binding Content.ActualHeight}><"< Rectangle.Fill>
/>
Background =``#88FFFF00''
Width =``{Binding ViewportWidth}'' = QUOT;顶部和QUOT;>
< Border.RenderTransform>
< TranslateTransform
X =" {结合Horizo​​ntalOffset}"
Y =" {结合VerticalOffset} " />
希望向用户提供功能以在ViewBox中拖动矩形以更改ScrollView中的可视区域.请告诉我如何实现此功能.鼠标方法中的两个切换按钮确定何时缩放以及更改图像时是否应保持缩放.

< ScrollViewer Name =" svImage"保证金＝"8、3、3、26".背景="AliceBlue". ScrollViewer.Horizo​​ntalScrollBarVisibility =可见". ScrollViewer.VerticalScrollBarVisibility =可见".
  < Viewbox Name =" viewBox" ;;高度＝"1344".宽度＝"816".
     <画布名称="canImage"；高度＝"1344".宽度＝"816".
       <图片名称="imgimg预览"； MouseDown =" imgPreview_MouseDown"
                  MouseMove =" imgPreview_MouseMove"
                  PreviewMouseLeftButtonUp =" imgPreview_PreviewMouseLeftButtonUp"
                  PreviewMouseLeftButtonDown =" imgPreview_PreviewMouseLeftButtonDown"/>
      <矩形名称="rectJump"；填充=透明"高度＝"0".宽度＝"0".保证金＝"10,10,0,0&". Horizo​​ntalAlignment =左" VerticalAlignment ＝"Top"/＞.
    </画布>
  </Viewbox>
</ScrollViewer> 

 

私有无效imgPreview_MouseDown(对象发送者，MouseButtonEventArgs e)
{
  如果(btnZoomIn.IsChecked == true&& tbtnSetJump.IsChecked == false)
  {
    viewBox.Width = originalImageWidth;
    viewBox.Height = originalImageHeight;
    svImage.ScrollToHorizo​​ntalOffset(e.GetPosition(canImage).X-(svImage.ViewportWidth/2));
    svImage.ScrollToVerticalOffset(e.GetPosition(canImage).Y-(svImage.ViewportHeight/2));
  }
}
私人无效imgPreview_PreviewMouseLeftButtonDown(对象发送者，MouseButtonEventArgs e)
{
  如果(tbtnSetJump.IsChecked == true)
  {
    rectJump.Fill = Brushes.Chartreuse;
    rectJump.Height = 10;
    rectJump.Width = 10;
    imgPreview.Opacity = .75;
    XY点= e.GetPosition(imgPreview);
    setX = XY.X;
    setY = XY.Y;
    Canvas.SetLeft(rectJump，setX);
    Canvas.SetTop(rectJump，setY);
  }
}

私人无效imgPreview_PreviewMouseLeftButtonUp(对象发送者，MouseButtonEventArgs e)
{
  尝试
  {
    如果(tbtnSetJump.IsChecked == true)
    {
      rectJump.Fill =画笔.透明
      imgPreview.Opacity = 1;
      XY点= e.GetPosition(imgPreview);

      rectJump.Height = XY.Y-setY;
      rectJump.Width = XY.X-setX;
      tbtnSetJump.IsChecked = false;
      如果(btnJump.IsChecked == true)JumpToCoordinates();
    }
  }
  抓住 { }
}

私有无效imgPreview_MouseMove(对象发送者，MouseEventArgs e)
{
  如果(tbtnSetJump.IsChecked == true | e.LeftButton == MouseButtonState.Pressed)
  {
    XY点= e.GetPosition(imgPreview);
    尝试
    {
      rectJump.Height = XY.Y-setY;
      rectJump.Width = XY.X-setX;
    }
    抓住 { }
  }
}

私有void JumpToCoordinates()
{
  ///比较高度&所选区域的宽度与滚动查看器的大小
  ///确定比例以增加视图框和所选区域的大小
  ///将所选区域重新显示

  if(rectJump.Width == 0 || rectJump.Height == 0){返回； }

  double AspectRatio = 1;

  如果(rectJump.Width> rectJump.Height)
  {
    AspectRatio =(svImage.ActualWidth/rectJump.Width);
  }
  别的
  {
    AspectRatio =(svImage.ActualHeight/rectJump.Height);
  }

  viewBox.Width = originalImageWidth * AspectRatio;
  viewBox.Height = originalImageHeight * AspectRatio;

  rectJump.BringIntoView();
} 

I have a ViewBox which is bound to a ScrollView "Main". A rectangle is highlighting the current viewable area of ScrollViewer. Following is the XAML Code.

            <Viewbox Name="ViewBox" DataContext="{Binding ElementName=Main}">
                <Grid>
                    <Rectangle
            Width="{Binding Content.ActualWidth}"
            Height="{Binding Content.ActualHeight}">
                        <Rectangle.Fill>
                            <VisualBrush Visual="{Binding Content}" />
                        </Rectangle.Fill>
                    </Rectangle>
                    <Border BorderThickness="1"
            BorderBrush="Black"
            Background="#88FFFF00"
            Width="{Binding ViewportWidth}"
            Height="{Binding ViewportHeight}"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
                        <Border.RenderTransform>
                            <TranslateTransform
                    X="{Binding HorizontalOffset}"
                    Y="{Binding VerticalOffset}" />
                        </Border.RenderTransform>
                    </Border>
                </Grid>
            </Viewbox>

I want to give functionality to user to drag the rectangle in ViewBox to change the viewable area in ScrollView. Please advice me how can I implement this feature.

解决方案

I do the same thing you are trying as part an Imaging package. The two toggle buttons in the mouse methods determine when to zoom and if I should hold the zoom when changing images.

<ScrollViewer Name="svImage" Margin="8,3,3,26" Background="AliceBlue" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
  <Viewbox Name="viewBox" Height="1344" Width="816">
     <Canvas Name="canImage" Height="1344" Width="816">
       <Image Name="imgPreview" MouseDown="imgPreview_MouseDown"
                  MouseMove="imgPreview_MouseMove"
                  PreviewMouseLeftButtonUp="imgPreview_PreviewMouseLeftButtonUp"
                  PreviewMouseLeftButtonDown="imgPreview_PreviewMouseLeftButtonDown"/>
      <Rectangle Name="rectJump" Fill="Transparent" Height="0" Width="0" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Canvas>
  </Viewbox>
</ScrollViewer>

 

private void imgPreview_MouseDown(object sender, MouseButtonEventArgs e)
{
  if (btnZoomIn.IsChecked == true && tbtnSetJump.IsChecked == false)
  {
    viewBox.Width = originalImageWidth;
    viewBox.Height = originalImageHeight;
    svImage.ScrollToHorizontalOffset(e.GetPosition(canImage).X - (svImage.ViewportWidth / 2));
    svImage.ScrollToVerticalOffset(e.GetPosition(canImage).Y - (svImage.ViewportHeight / 2));
  }
}
private void imgPreview_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  if (tbtnSetJump.IsChecked == true)
  {
    rectJump.Fill = Brushes.Chartreuse;
    rectJump.Height = 10;
    rectJump.Width = 10;
    imgPreview.Opacity = .75;
    Point XY = e.GetPosition(imgPreview);
    setX = XY.X;
    setY = XY.Y;
    Canvas.SetLeft(rectJump, setX);
    Canvas.SetTop(rectJump, setY);
  }
}

private void imgPreview_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  try
  {
    if (tbtnSetJump.IsChecked == true)
    {
      rectJump.Fill = Brushes.Transparent;
      imgPreview.Opacity = 1;
      Point XY = e.GetPosition(imgPreview);

      rectJump.Height = XY.Y - setY;
      rectJump.Width = XY.X - setX;
      tbtnSetJump.IsChecked = false;
      if (btnJump.IsChecked == true) JumpToCoordinates(); 
    }
  }
  catch { }
}

private void imgPreview_MouseMove(object sender, MouseEventArgs e)
{
  if (tbtnSetJump.IsChecked == true | e.LeftButton == MouseButtonState.Pressed)
  {
    Point XY = e.GetPosition(imgPreview);
    try
    {
      rectJump.Height = XY.Y - setY;
      rectJump.Width = XY.X - setX;
    }
    catch { }
  }
}

private void JumpToCoordinates()
{
  ///Compare the height & width of the selected area to the size of the scroll viewer
  ///Determine the ratio to increase the the size of the viewbox and selected area
  ///Bring selected area back into view

  if (rectJump.Width == 0 || rectJump.Height == 0) { return; }

  double aspectRatio = 1;

  if (rectJump.Width > rectJump.Height)
  {
    aspectRatio = (svImage.ActualWidth / rectJump.Width);
  }
  else
  {
    aspectRatio = (svImage.ActualHeight / rectJump.Height);
  }

  viewBox.Width = originalImageWidth * aspectRatio;
  viewBox.Height = originalImageHeight * aspectRatio;

  rectJump.BringIntoView();
}

这篇关于缩放到鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！