前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >silverlight图片局部放大效果

silverlight图片局部放大效果

作者头像
菩提树下的杨过
发布2018-01-23 12:01:44
2.9K0
发布2018-01-23 12:01:44
举报
文章被收录于专栏:菩提树下的杨过

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

Get Microsoft Silverlight
Get Microsoft Silverlight

界面:

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

原理:

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

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

尺寸要点:

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

关键代码:

代码:by 菩提树下的杨过

代码语言:js
复制
 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);
         }
 
     }
 }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2009-12-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档