silverlight图片局部放大效果
时间:2022-04-23
本文章向大家介绍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.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小
关键代码:
代码:by 菩提树下的杨过
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);
}
}
}
- [WCF权限控制]基于Windows用户组的授权方式[上篇]
- EnterLib PIAB又一个BUG?
- 关于WCF的一个非常“无语”的BUG!
- 谈谈分布式事务之一:SOA需要怎样的事务控制方式
- [WCF权限控制]WCF的三种授权模式
- [WCF安全系列]消息的保护等级[下篇]
- [WCF安全系列]通过绑定元素看各种绑定对消息保护的实现
- 通过添加HTTP Header实现上下文数据在WCF的自动传递
- 模拟在WCF中的应用
- [WCF权限控制]通过扩展自行实现服务授权[提供源码下载]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[实例篇]
- [ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法