silverlight实现图片局部放大效果的方法
本文实例讲述了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); } } }
更多关于C#相关内容感兴趣的读者可查看本站专题:《C#图片操作技巧汇总》、《C#常见控件用法教程》、《WinForm控件用法总结》、《C#数据结构与算法教程》、《C#面向对象程序设计入门教程》及《C#程序设计之线程使用技巧总结》
希望本文所述对大家C#程序设计有所帮助。
栏 目:C#教程
本文地址:https://www.xiuzhanwang.com/a1/C_jiaocheng/5832.html
您可能感兴趣的文章
- 01-10C#实现txt定位指定行完整实例
- 01-10WinForm实现仿视频播放器左下角滚动新闻效果的方法
- 01-10C#实现清空回收站的方法
- 01-10C#实现读取注册表监控当前操作系统已安装软件变化的方法
- 01-10C#实现多线程下载文件的方法
- 01-10C#实现Winform中打开网页页面的方法
- 01-10C#实现远程关闭计算机或重启计算机的方法
- 01-10C#自定义签名章实现方法
- 01-10C#文件断点续传实现方法
- 01-10winform实现创建最前端窗体的方法
阅读排行
本栏相关
- 01-10C#通过反射获取当前工程中所有窗体并
- 01-10关于ASP网页无法打开的解决方案
- 01-10WinForm限制窗体不能移到屏幕外的方法
- 01-10WinForm绘制圆角的方法
- 01-10C#实现txt定位指定行完整实例
- 01-10WinForm实现仿视频播放器左下角滚动新
- 01-10C#停止线程的方法
- 01-10C#实现清空回收站的方法
- 01-10C#通过重写Panel改变边框颜色与宽度的
- 01-10C#实现读取注册表监控当前操作系统已
随机阅读
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-10delphi制作wav文件的方法
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10SublimeText编译C开发环境设置
- 01-11ajax实现页面的局部加载
- 01-10C#中split用法实例总结
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 04-02jquery与jsp,用jquery