第7章.数据库与ADO.NET基础(ASP.NET_3.5开发大全_共29章).pdf
《第7章.数据库与ADO.NET基础(ASP.NET_3.5开发大全_共29章).pdf》由会员分享,可在线阅读,更多相关《第7章.数据库与ADO.NET基础(ASP.NET_3.5开发大全_共29章).pdf(33页珍藏版)》请在文库网上搜索。
1、Twilight Software Development Studio 2011 1 如何 :使用 PicturBox 实现 类似淘宝 网站 图片的局部放大功能 选自 : http:/ 概要: 本文将讲述如何使用 PictureBox 控件实现图片的局部放大浏览功能,效果类似淘宝网站的图片 局部放大 浏览,通过鼠标悬浮查看局部大图 ,同时扩展了鼠标滚轮放大缩小功能 。本文将详细讲述实现该功能的主要思路,例子虽是在 Winform 的环境下实现 ( 当时开发的系统用的是 winform) ,但是代码 实现思路 在其他环境(如 WPF)应该是通用的。 关键词: 图片 局部放大 、 Picture
2、Box、图片细节展示 解决方案: 下面要实现的功能就是类似淘宝网站的图片局部放大功能,既然是山寨淘宝的功能,那么我们首先来看一下淘宝网站图片放大的效果图 : 当然这个图片是在淘宝 首页 上随便选的 一张 (呵呵,不含任何宣传的成分) 。不管这个功能淘宝官网是如何实现的,但是毋庸置疑,该功能非常实用(至少我个人还是感觉还是不错的),即用户友好度很高。 如果能把该功能做到我们自己的系统或网站中,那岂不是挺好?主动学人之长,到哪都好用。 可惜,我百度, google 了一下,竟然没人 肯 透露具体怎么做的, 偶尔有人问到,但是回答似乎不尽人意, 笔者想想也对,虽然很 大一部分 人知道怎么做或是已经做
3、成功过了,但是没能把思想分享出来。 那么就有我来抛砖引玉吧,期待更多的人参与讨论和指导。 言归正传,我们按老规矩,还是先看看我们自己实现的效果图吧,由于只是为了实现功能,布局什么的都没考虑,所以美观方面就不能和上面的图片效果进行比较了,大家暂时将Twilight Software Development Studio 2011 2 就一下。 功能需求: 该功能的需求就是当鼠标悬浮在图片上,将该图片的固定大小(以鼠标点为中心的一个矩形 标识 区域 ), 右边 以大图的方式显示出来, 同时鼠标移动时,矩形区域随鼠标而动,右边的浏览大图位置相应改变 , 便于用户查看图片细节。 矩形标识区域和浏览大图
4、都是是在鼠标悬浮时出现,鼠标离开后消失,而且矩形标识区域边框只能在图片中,不能离开图片。 实现思路: 第一步: 布局 Twilight Software Development Studio 2011 3 按照上面的布局方式,在 Form 中放入三个 PictureBox 控件, ID 分别为: picBox、picBox_Show、 picBoxOriginal。该功能的实际应用上用到的只要两个就行,这里多加一个是为了对比用。 picBox:展示图,用于固定图片的大小,这里设置为 150 150px picBox_Show:图片局部放大显示的区域 ,默认为 400 300,大小可根据鼠标滚轮
5、进行缩放。 picBoxOriginal:是实际图片的尺寸,在这里是为了对比效果。找的一张 200 200px 的原图。 将 picBox_Show 的 BorderStyle 的属性设置为 FixedSingle,即有边框, Visible 的属性设置为 false,即开始运行是不显示 picBox_Show。 将 picBox 的 SizeMode 属性设置为 Zoom。【重要】 设置为 等比例缩放,避 免图片显示 变形。 为 picBox 和 picBoxOriginal 选择一张图片( Image 属性),注:两个是同一张图片 第二步:鼠标事件 由于 picBoxOrginal 只是为
6、了对比效果,仅仅是显示而已,我们不需要对其操作 。 对 picBox 注册三 个事件:鼠标移动 MouseMoveve、鼠标离开 MouseLeave、 Paint 事件。只属性的事件中双击即可自动在 .cs 文件中生成事件 (当然你喜欢的话,后加代码注册也可以,笔者比较懒,喜欢双击的) 。 注:你们自动生成的都应该是 picBox_Paint、 picBox_MouseMove、 picBox_MouseLeave 事件 ,因为一开始自动生成用的是默认的 ID( pictureBox1),后来为了正规点就换了个 ID, 这里就没改了, 当然这不影响我们的功能。 private void pi
7、ctureBox1_Paint(object sender, PaintEventArgs e) /定位逻辑, 详细 后面实现 Twilight Software Development Studio 2011 4 Paint 事件中处理逻辑:当鼠标移动在图片的某个位置时,我们需要绘个长方形区域,同时显示局部放大图片 ( picBox_Show) 。 当执行 picBox.Refresh()方法时将触发该事件。 private void pictureBox1_MouseMove(object sender, MouseEventArgs e) picBox.Focus(); /否则滚轮事件无
8、效 isMove = true; movedPoint_X = e.X; movedPoint_Y = e.Y; picBox.Refresh(); 在鼠标移动事件中,我们需要记录当前鼠标点的位置 ,有全局变量 movedPoint_X, movedPoint_Y存储。 /鼠标移动后点的坐标 int movedPoint_X, movedPoint_Y; 同时我们需要设置一个鼠标移动状态 isMove ,作为全局变量 bool isMove = false;,标识是否需要重新绘图。 private void pictureBox1_MouseLeave(object sender, Event
9、Args e) picBox_Show.Visible = false; picBox.Refresh(); picBox_Show.Width = 400; picBox_Show.Height = 300; 鼠标移开后,局部显示图片 (picBox_Show)隐藏, picBox 绘制的长方形也要去掉,最简单的就是调用Refresh()方法了。 void picBox_Show_MouseWheel(object sender, MouseEventArgs e) double scale = 1; if (picBox_Show.Height 0) scale = (double)pic
10、Box_Show.Width / (double)picBox_Show.Height; picBox_Show.Width += (int)(e.Delta * scale); picBox_Show.Height += e.Delta; 鼠标滑轮事件,当鼠标滑动时, picBox_Show 的大小可以改变。这个事件需要代码注册: picBox.MouseWheel += new MouseEventHandler(picBox_Show_MouseWheel);写在构造函数中。 当然 取名为: picBox_MouseWheel似乎更合理,呵呵 效果如下所示 , picBox_Show 随
11、鼠标滚轮等比例放大 : Twilight Software Development Studio 2011 5 第三步:区域定位 这一步我们就是写 Paint 方法了, 也就 是 这个功能的核心。 需要做的功能就是画 带网格的 矩形,和显示矩形 选择区域 对于的大图。 画带网格的矩形 我们 选择 先画矩形 ( DrawRectangle 方法 ) ,再填充 网格的方式解决。为什么不直接 使用更简单的 阴影画笔画网格( FillRectangle 方法)呢 ?等一下我会讲到。 画矩形的原理如上图所示, A 点时刻记录鼠标点的位置,坐标为( movedPoint_X,movedPoint_Y) ,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- .new 技术 教程 电子书 资源