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);
}
}
}
- 对X86汇编的理解与入门
- BZOJ 2748: [HAOI2012]音量调节【二维dp,枚举】
- POJ 3264 Balanced Lineup【线段树区间查询求最大值和最小值】
- HDU 2289 Cup【高精度,二分】
- BZOJ 1083: [SCOI2005]繁忙的都市【Kruscal最小生成树裸题】
- [快学Python3]二分查找[策略优化版本]
- 微服务与SOA架构(4)
- 移动测试Appium之API手册
- BZOJ 1088: [SCOI2005]扫雷Mine【思维题,神奇的模拟+枚举】
- 浅谈关于特征选择算法与Relief的实现
- HDU 5752 Sqrt Bo【枚举,大水题】
- 移动测试 Appium源码初探
- UESTC 1599 wtmsb【优先队列+排序】
- BZOJ 1029: [JSOI2007]建筑抢修【优先队列+贪心策略】
- 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 数组属性和方法
- SpringBoot对全局异常的处理封装
- 自定义springboot-starter揭秘自动配置骚操作
- 【大厂面试题】Redis中是如何实现分布式锁的?
- 最近公司招人,研发组商量了下,暂时定下这么多java面试题!
- 市面上数据库种类那么多,如何选择?
- 玩转正则!推荐一个速查、调试、验证、可视化工具
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?
- Js实现文本复制
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?处理器映射器与处理器篇
- anetTcpGenericConnect 详解
- 详解 MySQL 基准测试和sysbench工具
- 第六天:网络处理(anet部分)-- redis源码慢慢学,慢慢看【redis6.0.6】
- python爬王者荣耀壁纸
- 搞定三大神器之 Python 装饰器
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?请求映射器篇