silverlight图片局部放大效果

很多购物平台中(比如京东购物)，浏览产品详情时都有这种效果，前几天看到有朋友问SL能不能实现，当然可以 

 

界面:

1.左侧小图片(用一个矩形Fill一张图片即可)
2.左侧半透明矩形
3.右侧大图片(用一个Canvas设置Clip裁剪可视区域作为蒙板，图片放置在Canvas中即可)

 

原理：

获取左侧半透明矩形的相对位置，然后动态调整右侧大图的Canvas.Left与Canvas.Top

 

需要知道以下技术点:
1.Clip的应用
2.如何拖动对象
3.拖动时的边界检测
4.动态调整对象的Canvas.Left与Canvas.Top属性

 

尺寸要点:

1.右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
2.“图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
3.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小

 

关键代码：

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;



namespace PartMagnifier

{

    public partial class MainPage : UserControl

    {

        bool trackingMouseMove = false;

        Point mousePosition;





        public MainPage()

        {

            // 为初始化变量所必需

            InitializeComponent();





        }



        private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)

        {

            Adjust();

        }



        private void Rectangle_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;

            }

            Adjust();

            Debug();

            sb.Begin();//标题动画，可去掉

        }



        private void Rectangle_MouseMove(object sender, MouseEventArgs e)

        {

            FrameworkElement element = sender as FrameworkElement;

            if (trackingMouseMove)

            {

                double deltaV = e.GetPosition(element).Y - mousePosition.Y;

                double deltaH = e.GetPosition(element).X - mousePosition.X;

                double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);

                double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);

                if (newLeft <= 10)

                {

                    newLeft = 10;

                }

                if (newLeft >= 130)

                {

                    newLeft = 130;

                }

                if (newTop <= 10) { newTop = 10; }

                if (newTop >= 85) { newTop = 85; }

                element.SetValue(Canvas.TopProperty, newTop);

                element.SetValue(Canvas.LeftProperty, newLeft);

                mousePosition = e.GetPosition(element);

                Adjust();

                if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }

                Debug();

            }

        }



        private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            FrameworkElement element = sender as FrameworkElement;

            trackingMouseMove = false;

            element.ReleaseMouseCapture();

            mousePosition.X = mousePosition.Y = 0;

            element.Cursor = null;

        }



        /// <summary>

        /// 调试信息

        /// </summary>

        void Debug()

        {

            txtResult.Text = "鼠标相对坐标：" + mousePosition.ToString() + "\n小框left：" + rect.GetValue(Canvas.LeftProperty) + ",小框top：" + rect.GetValue(Canvas.TopProperty) + "\n大图left：" + ((double)img.GetValue(Canvas.LeftProperty)).ToString("F0") + ",大图right：" + ((double)img.GetValue(Canvas.TopProperty)).ToString("F0");

        }





        /// <summary>

        /// 调整右侧大图的位置

        /// </summary>

        void Adjust()

        {

            

            double n = cBig.Width / rect.Width;

            double left = (double)rect.GetValue(Canvas.LeftProperty) - 10;

            double top = (double)rect.GetValue(Canvas.TopProperty) - 10;

            double newLeft = -left * n;

            double newTop = -top * n;

            img.SetValue(Canvas.LeftProperty, newLeft);

            img.SetValue(Canvas.TopProperty, newTop);

        }



    }

}