(代码不多,就只放代码了)
一、WPF中图片局部放大
1.xaml中代码:
<Window x:Class="WpfZoom.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF局部放大效果" Height="370" Width="700" WindowStartupLocation="CenterScreen">
<Canvas x:Name="RootCanvas">
<!--左侧小图-->
<Canvas x:Name="SmallBox" MouseMove="MoveRect_MouseMove" MouseEnter="SmallBox_MouseEnter" MouseLeave="SmallBox_MouseLeave" Width="320" Height="180" Canvas.Left="20" Canvas.Top="20">
<Canvas.Background>
<ImageBrush ImageSource="Images/mm.jpg" Stretch="Fill" TileMode="None" />
</Canvas.Background>
<!--半透明矩形框-->
<Rectangle x:Name="MoveRect" Fill="White" Opacity="0.3" Stroke="Blue" Width="50" Height="50" Canvas.Top="78" Canvas.Left="202"/>
</Canvas>
<!--右侧大图-->
<Canvas x:Name="BigBox" Width="300" Height="300" Canvas.Left="360" Canvas.Top="20" Visibility="Collapsed">
<!--右侧原图片 注意尺寸-->
<Image x:Name="bigImg" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="-780" Source="Images/mm.jpg" />
<Canvas.Clip>
<RectangleGeometry Rect="0,0,300,300" />
</Canvas.Clip>
</Canvas>
</Canvas>
</Window>
2.xaml.cs中代码:
private void MoveRect_MouseMove(object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
//计算鼠标在X轴的移动距离
double deltaV = e.GetPosition(MoveRect).Y - MoveRect.Height / 2;
//计算鼠标在Y轴的移动距离
double deltaH = e.GetPosition(MoveRect).X - MoveRect.Width / 2; ;
//得到图片Top新位置
double newTop = deltaV + (double)MoveRect.GetValue(Canvas.TopProperty);
//得到图片