WPF/Silverlight 下的图片局部放大
最近的项目中也要用到一个局部图片放大的功能,园子里面一搜,发现(菩提下的杨过)杨大侠已经实现了。
请参见这里:http://www.cnblogs.com/yjmyzz/archive/2009/12/03/1615988.html
杨大侠已经给出了原理、知识要点、尺寸要点及后端主要代码,但遗憾的是没有给出xaml的代码。按照杨大侠文中的提示,动手用WPF实践了一下,花了一个小时,终于搞出来了。这篇文章也就算是一个补充吧。
界面如下图所示:
实现的原理和用到的知识点请点击上面的链接,杨大侠已经说的很清楚了。这里主要强调的就是尺寸要点:
- 右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
- “图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
- 图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小
为了简单起见,我们把尺寸固定死(其实是可以搞成活的),这里仅为了演示,以下尺寸满足上面的条件。
准备一张原图:dog.jpg 分辨率:1920 * 1080
左侧小图片显示区域:用Canvas 显示,尺寸:320 * 180
半透明矩形框尺寸:50*50
右侧大图显示区域:用Canvas显示,尺寸:300 * 300
以下是XAML代码:
<Window x:Class="WpfZoom.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF局部放大效果" Height="370" Width="700">
<Canvas x:Name="RootCanvas">
<!--左侧小图-->
<Canvas x:Name="SmallBox" Width="320" Height="180" Canvas.Left="20" Canvas.Top="20">
<Canvas.Background>
<ImageBrush ImageSource="Images/dog.jpg" Stretch="UniformToFill" />
</Canvas.Background>
<!--半透明矩形框-->
<Rectangle x:Name="MoveRect" Fill="White" Opacity="0.3" Stroke="Red" Width="50" Height="50" Canvas.Top="78" Canvas.Left="202"
MouseMove="MoveRect_MouseMove"
MouseLeftButtonDown="MoveRect_MouseLeftButtonDown"
MouseLeftButtonUp="MoveRect_MouseLeftButtonUp"/>
</Canvas> <!--右侧大图-->
<Canvas x:Name="BigBox" Width="300" Height="300" Canvas.Left="360" Canvas.Top="20">
<!--右侧原图片 注意尺寸-->
<Image x:Name="bigImg" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="-780" Source="Images/dog.jpg" />
<Canvas.Clip>
<RectangleGeometry Rect="0,0,300,300" />
</Canvas.Clip>
</Canvas> </Canvas>
</Window>
cs 代码:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input; namespace WpfZoom
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
//移动标志
bool trackingMouseMove = false;
//鼠标按下去的位置
Point mousePosition; public MainWindow()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
} void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
AdjustBigImage();
} /// <summary>
/// 半透明矩形框鼠标左键按下
/// </summary>
private void MoveRect_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;
}
} /// <summary>
/// 半透明矩形框鼠标左键弹起
/// </summary>
private void MoveRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
trackingMouseMove = false;
element.ReleaseMouseCapture();
mousePosition.X = mousePosition.Y = ;
element.Cursor = null;
} /// <summary>
/// 半透明矩形框移动
/// </summary>
private void MoveRect_MouseMove(object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (trackingMouseMove)
{
//计算鼠标在X轴的移动距离
double deltaV = e.GetPosition(element).Y - mousePosition.Y;
//计算鼠标在Y轴的移动距离
double deltaH = e.GetPosition(element).X - mousePosition.X;
//得到图片Top新位置
double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
//得到图片Left新位置
double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty); //边界的判断
if (newLeft <= )
{
newLeft = ;
} //左侧图片框宽度 - 半透明矩形框宽度
if (newLeft >= (this.SmallBox.Width - this.MoveRect.Width))
{
newLeft = this.SmallBox.Width - this.MoveRect.Width;
} if (newTop <= )
{
newTop = ;
} //左侧图片框高度度 - 半透明矩形框高度度
if (newTop >= this.SmallBox.Height - this.MoveRect.Height)
{
newTop = this.SmallBox.Height - this.MoveRect.Height;
}
element.SetValue(Canvas.TopProperty, newTop);
element.SetValue(Canvas.LeftProperty, newLeft);
AdjustBigImage();
if (mousePosition.X <= || mousePosition.Y <= ) { return; }
}
} /// <summary>
/// 调整右侧大图的位置
/// </summary>
void AdjustBigImage()
{
//获取右侧大图框与透明矩形框的尺寸比率
double n = this.BigBox.Width / this.MoveRect.Width; //获取半透明矩形框在左侧小图中的位置
double left = (double)this.MoveRect.GetValue(Canvas.LeftProperty);
double top = (double)this.MoveRect.GetValue(Canvas.TopProperty); //计算和设置原图在右侧大图框中的Canvas.Left 和 Canvas.Top
double newLeft = -left * n;
double newTop = -top * n;
bigImg.SetValue(Canvas.LeftProperty, newLeft);
bigImg.SetValue(Canvas.TopProperty, newTop);
}
}
}
WPF/Silverlight 下的图片局部放大的更多相关文章
- WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下)
原文:WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下) 本想只用两节来完成关于HLSL自定义渲染相关知识的讲解,鉴于最近非常的多的朋友对此相当感兴趣,想知道最多 ...
- WPF和Winform中picturebox图片局部放大
原文:WPF和Winform中picturebox图片局部放大 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/artic ...
- wpf下的图片放大缩小
WPF下实现图片的放大缩小移动 在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...
- WPF/Silverlight HierarchicalDataTemplate 模版的使用(转)
上一篇 对Wpf/Silverlight Template 进行了总结,本篇继续上一篇,主要是介绍 HierarchicalDataTemplate 的使用方法.HierarchicalDataTem ...
- WPF/Silverlight Template使用及总结(转)
WPF/Silverlight 中的控件都有Style和Template两种属性.前者解释为样式,是用来改变控件原有属性的,比如 Button 控件的(Width,Height,Background ...
- WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性
原文 WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性 如果您在使用WPF/Silverlight进行相关动画开发中使用了Storyboard,并对关联属性进 ...
- WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上)
原文:WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上) Shader Effect种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: Bl ...
- [开源]基于WPF实现的Gif图片分割器,提取GIf图片中的每一帧
不知不觉又半个月没有更新博客了,今天终于抽出点时间,来分享一下前段时间的成果. 在网上,我们经常看到各种各样的图片,尤其是GIF图片的动态效果,让整个网站更加富有表现力!有时候,我们看到一些比较好看的 ...
- XData -–无需开发、基于配置的数据库RESTful服务,可作为移动App和ExtJS、WPF/Silverlight、Ajax等应用的服务端
XData -–无需开发.基于配置的数据库RESTful服务,可作为移动App和ExtJS.WPF/Silverlight.Ajax等应用的服务端 源起一个App项目,Web服务器就一台,已经装了 ...
随机推荐
- 【dubbo】消费者Consumer搭建
一.consumer搭建(可以web/jar) 1.新建Maven项目,groupId:com.dubbo.consumer.demo artifactId:demo projectName:dubb ...
- PYTHON学习之路_PYTHON基础(2)
学习内容: 1.Python数据类型与变量 2.Python字符串 3.Python列表 4.Python while循环 5.Python字典 6.Python实例 一.Python数据类型与变量 ...
- Java实现四则运算,使用堆栈,检查语法
突然发闲想试一试自己实现算术的四则运算,支持加减乘除和括号.正负号:支持语法检查:思路很常规,利用两个堆栈,一个压操作符,一个压操作数,念头冒出来之后,立马动手:然后本以为很容易的一个实现,却存在各种 ...
- 新装ubuntu12.04需要敲的命令集合
1.sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup sudo gedit /etc/apt/sources.list copy: ...
- (转) silverlight 样式学习
原文地址:http://www.cnblogs.com/Joetao/articles/2074727.html <UserControl x:Class="StyleDemo.Mai ...
- 《理解 ES6》阅读整理:函数(Functions)(三)Function Constructor & Spread Operator
增强的Function构造函数(Increased Capabilities of the Function Constructor) 在Javascript中Function构造函数可以让你创建一个 ...
- Percona Server 5.6.13-61.0 首个 GA 版本发布
Percona Server 5.6 的首个 GA 版本发布了,版本号是 5.6.13-61.0 ,该版本基于 MySQL 5.6.13 改进内容包括: New Features: Percona S ...
- 免费打造自己的个人网站,免费域名、免费空间、FTP、数据库什么的,一个不能少,没钱,也可以这么任性
作为一名程序猿,拥有自己的个人网站,是一件多么有逼格的事~~至于个人网站的好处嘛?那是多的说都说不完啊~~例如我们可以放自己的作品,展示自己的风采,放自己女神的照片(女神看到后会怎么样,自己想吧,哈哈 ...
- [.NET自我学习]Delegate 泛型
阅读导航 委托Delegate 泛型 1. 委托Delegate 继承自MulticastDelegate 声明委托定义签名: public delegate int DemoDelegate(int ...
- SVM-线性可分支持向量机
SVM-线性可分支持向量机 如果您想体验更好的阅读:请戳这里littlefish.top 函数间隔和几何间隔 给定线性可分训练数据集,通过间隔最大化或等价地求解相应的凸二次规划问题学习得到的分离超平面 ...