如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/

概要：

本文将讲述如何使用PictureBox控件实现图片的局部放大浏览功能，效果类似淘宝网站的图片局部放大浏览，通过鼠标悬浮查看局部大图，同时扩展了鼠标滚轮放大缩小功能。本文将详细讲述实现该功能的主要思路，例子虽是在Winform的环境下实现（当时开发的系统用的是winform），但是代码实现思路在其他环境（如WPF）应该是通用的。

解决方案：

下面要实现的功能就是类似淘宝网站的图片局部放大功能，既然是山寨淘宝的功能，那么我们首先来看一下淘宝网站图片放大的效果图：

public Form1()

{

InitializeComponent();

picBox.MouseWheel += new MouseEventHandler(picBox_Show_MouseWheel);

}

void picBox_Show_MouseWheel(object sender, MouseEventArgs e)

{

double scale = 1;

if (picBox_Show.Height > 0)

{

scale = (double)picBox_Show.Width / (double)picBox_Show.Height;

}

picBox_Show.Width += (int)(e.Delta * scale);

picBox_Show.Height += e.Delta;

}

bool isMove = false;

//鼠标移动后点的坐标

int movedPoint_X, movedPoint_Y;

//画笔颜色

Pen pen = new Pen(Color.FromArgb(91, 98, 114));

HatchBrush brush = new HatchBrush(HatchStyle.Cross, Color.FromArgb(91, 98, 114),Color.Empty); //使用阴影画笔画网格

//选取区域的大小

const int rect_W = 80;

const int rect_H = 60;

//网格边长：5px 一格

const int gridSize = 2;

//网格的行、列数

int rowGridCount = rect_H / gridSize;

int columnGridCount = rect_W / gridSize;

private void pictureBox1_Paint(object sender, PaintEventArgs e)

{

if (isMove == true)

{

Graphics g = e.Graphics;

/*画长方形*/

int _x = movedPoint_X - rect_W/2;

int _y = movedPoint_Y - rect_H/2;

_x = _x < 0 ? 0 : _x;

_y = _y < 0 ? 0 : _y;

_x = _x >= picBox.Width-rect_W ? picBox.Width-rect_W-3 : _x; //减3px的目的就是为了让长方形的边框不会刚好被picBox的边框挡住了

_y = _y >= picBox.Height-rect_H? picBox.Height-rect_H-3: _y;

Rectangle rect = new Rectangle(_x,_y, rect_W, rect_H);

g.DrawRectangle(pen, rect);

// g.FillRectangle(brush, rect);

///*填充网格*/

int x1, x2, y1, y2;

x1 = x2 = _x;

y1 = y2 = _y;

x2 += rect_W;

for (int i = 1; i < rowGridCount; i++)

{

y1 += gridSize;

y2 += gridSize;

g.DrawLine(pen, x1, y1, x2, y2);

}

x1 = x2 = _x;

y1 = y2 = _y;

y2 += rect_H;

for (int j = 1; j < columnGridCount; j++)

{

x1 += gridSize;

x2 += gridSize;

g.DrawLine(pen, x1, y1, x2, y2);

}

/*裁剪图片*/

if (picBox_Show.Image != null)

{

picBox_Show.Image.Dispose();

}

Bitmap bmp = (Bitmap)picBox.Image;

//缩放比例

double rate_W = Convert.ToDouble(bmp.Width) / picBox.Width;

double rate_H = Convert.ToDouble(bmp.Height) / picBox.Height;

Bitmap bmp2 = bmp.Clone(new Rectangle(Convert.ToInt32(rate_W*_x), Convert.ToInt32(rate_H*_y), Convert.ToInt32(rate_W*rect_W), Convert.ToInt32(rate_H*rect_H)), picBox.Image.PixelFormat);

picBox_Show.Image = bmp2;

picBox_Show.SizeMode = PictureBoxSizeMode.Zoom;

picBox_Show.Visible = true;

isMove = false;

}

}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)

{

picBox.Focus(); //否则滚轮事件无效

isMove = true;

movedPoint_X = e.X;

movedPoint_Y = e.Y;

picBox.Refresh();

}

private void pictureBox1_MouseLeave(object sender, EventArgs e)

{

picBox_Show.Visible = false;

picBox.Refresh();

picBox_Show.Width = 400;

picBox_Show.Height = 300;

}

View Code