WPF/Silverlight实现图片局部放大的方法分析

<Window x:Class="WpfZoom.MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  <Canvas x:Name="RootCanvas">    <!--左侧小图-->    <Canvas x:Name="SmallBox" Width="320" Height="180" Canvas.Left="20" Canvas.Top="20">      <Canvas.Background>        <ImageBrush ImageSource="Images/dog.jpg" Stretch="UniformToFill" />      </Canvas.Background>      <!--半透明矩形框-->      <Rectangle x:Name="MoveRect" Fill="White" Opacity="0.3" Stroke="Red" Width="50" Height="50" Canvas.Top="78" Canvas.Left="202"          MouseMove="MoveRect_MouseMove"          MouseLeftButtonDown="MoveRect_MouseLeftButtonDown"          MouseLeftButtonUp="MoveRect_MouseLeftButtonUp"/>    </Canvas>    <!--右侧大图-->    <Canvas x:Name="BigBox" Width="300" Height="300" Canvas.Left="360" Canvas.Top="20">      <!--右侧原图片 注意尺寸-->      <Image x:Name="bigImg" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="-780" Source="Images/dog.jpg" />      <Canvas.Clip>        <RectangleGeometry Rect="0,0,300,300" />      </Canvas.Clip>    </Canvas>  </Canvas></Window>

using System;using System.Windows;using System.Windows.Controls;using System.Windows.Input;namespace WpfZoom{  /// <summary>  /// MainWindow.xaml 的交互逻辑  /// </summary>  public partial class MainWindow : Window  {    //移动标志    bool trackingMouseMove = false;    //鼠标按下去的位置    Point mousePosition;    public MainWindow()    {      InitializeComponent();      this.Loaded += new RoutedEventHandler(MainWindow_Loaded);    }    void MainWindow_Loaded(object sender, RoutedEventArgs e)    {      AdjustBigImage();    }    /// <summary>    /// 半透明矩形框鼠标左键按下    /// </summary>    private void MoveRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)    {      FrameworkElement element = sender as FrameworkElement;      mousePosition = e.GetPosition(element);      trackingMouseMove = true;      if (null != element)      {        //强制获取此元素        element.CaptureMouse();        element.Cursor = Cursors.Hand;      }    }    /// <summary>    /// 半透明矩形框鼠标左键弹起    /// </summary>    private void MoveRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)    {      FrameworkElement element = sender as FrameworkElement;      trackingMouseMove = false;      element.ReleaseMouseCapture();      mousePosition.X = mousePosition.Y = 0;      element.Cursor = null;    }    /// <summary>    /// 半透明矩形框移动    /// </summary>    private void MoveRect_MouseMove(object sender, MouseEventArgs e)    {      FrameworkElement element = sender as FrameworkElement;      if (trackingMouseMove)      {        //计算鼠标在X轴的移动距离        double deltaV = e.GetPosition(element).Y - mousePosition.Y;        //计算鼠标在Y轴的移动距离        double deltaH = e.GetPosition(element).X - mousePosition.X;        //得到图片Top新位置        double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);        //得到图片Left新位置        double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);        //边界的判断        if (newLeft <= 0)        {          newLeft = 0;        }        //左侧图片框宽度 - 半透明矩形框宽度        if (newLeft >= (this.SmallBox.Width - this.MoveRect.Width))        {          newLeft = this.SmallBox.Width - this.MoveRect.Width;        }        if (newTop <= 0)        {          newTop = 0;        }        //左侧图片框高度度 - 半透明矩形框高度度        if (newTop >= this.SmallBox.Height - this.MoveRect.Height)        {          newTop = this.SmallBox.Height - this.MoveRect.Height;        }        element.SetValue(Canvas.TopProperty, newTop);        element.SetValue(Canvas.LeftProperty, newLeft);        AdjustBigImage();        if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }      }    }    /// <summary>    /// 调整右侧大图的位置    /// </summary>    void AdjustBigImage()    {      //获取右侧大图框与透明矩形框的尺寸比率      double n = this.BigBox.Width / this.MoveRect.Width;      //获取半透明矩形框在左侧小图中的位置      double left = (double)this.MoveRect.GetValue(Canvas.LeftProperty);      double top = (double)this.MoveRect.GetValue(Canvas.TopProperty);      //计算和设置原图在右侧大图框中的Canvas.Left 和 Canvas.Top      double newLeft = -left * n;      double newTop = -top * n;      bigImg.SetValue(Canvas.LeftProperty, newLeft);      bigImg.SetValue(Canvas.TopProperty, newTop);    }  }}