WPF/Silverlight 下的圖片局部放大

最近的項目中也要用到一個局部圖片放大的功能，園子裏面一搜，發現（菩提下的楊過）楊大俠已經實現了。

請參見這裏：http://www.cnblogs.com/yjmyzz/archive/2009/12/03/1615988.html

楊大俠已經給出了原理、知識要點、尺寸要點及後端主要代碼，但遺憾的是沒有給出xaml的代碼。按照楊大俠文中的提示，動手用WPF實踐了一下，花了一個小時，終於搞出來了。這篇文章也就算是一個補充吧。

界面以下圖所示：

實現的原理和用到的知識點請點擊上面的連接，楊大俠已經說的很清楚了。這裏主要強調的就是尺寸要點：

• 右側大圖可視區域與左側半透明矩形的「長寬比例」應該相同
• 「圖片原始尺寸長度比」 應該 「與左側小圖片長度比」相同
• 圖片原始大小/左側小圖大小 = 右側可視區域大小/半透明矩形大小

爲了簡單起見，咱們把尺寸固定死（實際上是能夠搞成活的），這裏僅爲了演示，如下尺寸知足上面的條件。

準備一張原圖：dog.jpg  分辨率：1920 * 1080

左側小圖片顯示區域：用Canvas 顯示，尺寸：320 * 180

半透明矩形框尺寸：50*50

右側大圖顯示區域：用Canvas顯示，尺寸：300 * 300

如下是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">
    <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>

 cs 代碼：

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);
        }
    }
}

-==源碼下載==-