当前位置: 代码迷 >> VB Dotnet >> 求WPF图片浏览器右下角类似小map的功能
  详细解决方案

求WPF图片浏览器右下角类似小map的功能

热度:512   发布时间:2016-04-25 01:58:16.0
求WPF图片浏览器右下角类似小地图的功能
右下角这个可拖动缩略图 求个示例

------解决思路----------------------
思路:
1.首先获取一张原始图片存储在全局变量Bitmap bmpSelect.
2.将此图片通过滤镜效果,过滤成黑白或其他图片,存储在全局变量Bitmap bmpFilter.
3.从原始图片Bitmap bmpSelect中截取矩形框图片Bitmap bmpRectangle.
4.将得到的矩形框图片Bitmap bmpRectangle合并到滤镜效果的图片,并给矩形框图片绘制边线.
5.最后将3步中得到的图片作为大图片显示,4步得到的合并图片显示在右下角的图片控件.
备注:选取图片事件中,执行1-5;鼠标在右下角图片控件移动事件中只需要调用3-5.

得到原始图片:Bitmap bmpSelect = New Bitmap("文件路径");

得到滤镜效果图片(这里使用的是轮循的方式,对于像素大的图片速度有点慢,还有一种方式通过Bitmap.LockBits速度会快些,具体的网上去搜索):
private Bitmap GetFilteImage(Bitmap bmpSelect)
{
int width = bmpSelect.Width;
int height = bmpSelect.Height;
Bitmap bitmap = new Bitmap(width,height);
for(int w = 0;w < width;w++)
{
for(int h = 0;h < height;h++)
{
Color color = bmpSelect.GetPixel(w,h);
int value = ((int)(0.7 * color.R) + (int)(0.2 * color.G) + (int)(0.1 * color.B));
bitmap.SetPixel(w,h,Color.FromArgb(value,value,value));
}
}
return bitmap;
}

得到矩形框图片:
private Bitmap GetRectangleImage(Bitmap bmpSelect,Rectangle rectangle)
{
Bitmap bitmap = new Bitmap(rectangle.Width,rectangle.Height);
Graphics g = Graphics.FromImage(bitmap);
g.DrawImage(bmpSelect,0,0,rectangle,GraphicsUnit.Pixel);
g.Dispose();
return bitmap;
}

合并图片:
private Bitmap GetMargeImage(Bitmap bmpFilter,Bitmap bmpRectangle,Rectangle rectangle)
{
Bitmap bitmap = bmpFilter.Clone(new Rectangle(0,0,bmpFilter.Width,bmpFilter.Height),PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage(bitmap);
g.DrawImage(bmpRectangle,rectangle,0,0,rectangle.Width,rectangle.Height,GraphicsUnit.Pixel);
Brush brush =  new SolidBrush(Color.Red);
Pen pen = new Pen(brush);
g.DrawLine(pen,new Point(rectangle.X,rectangle.Y),new Point(rectangle.X,rectangle.Y + rectangle.Height));
g.DrawLine(pen,new Point(rectangle.X,rectangle.Y),new Point(rectangle.X + rectangle.Width,rectangle.Y));
g.DrawLine(pen,new Point(rectangle.X,rectangle.Y + rectangle.Height),new Point(rectangle.X + rectangle.Width,rectangle.Y + rectangle.Height));
g.DrawLine(pen,new Point(rectangle.X + rectangle.Width,rectangle.Y),new Point(rectangle.X + rectangle.Widt,rectangle.Y + rectangle.Height));
g.Dispose();
return bitmap;
}

另外获取右下角矩形框时需要注意(图片控件的MouseMove事件中):
int widthRectangle = 40;
int heightRectangle = 30;
int x = 0,y = 0;
if(e.Location.X - (widthRectangle / 2) < 0)
{
x = 0;
}
else if(e.Location.X + (widthRectangle / 2) > 图片控件.Width)
{
x = 图片控件.Width - widthRectangle;
}
else
{
x = e.Location.X - (widthRectangle / 2);
}

if(e.Location.Y - (heightRectangle / 2) < 0)
{
y = 0;
}
else if(e.Location.Y + (heightRectangle / 2) > 图片控件.Height)
{
y = 图片控件.Height - heightRectangle;
}
else
{
y = e.Location.Y - (heightRectangle / 2);
}

Rectangle rectangle = new Rectangle();
rectangle.X = (int)(x * 选取的原始图片bmpSelect.Width / 图片控件.Width);
rectangle.Y = (int)(y * 选取的原始图片bmpSelect.Height / 图片控件.Height);
rectangle.Width = (int)(widthRectangle * 选取的原始图片bmpSelect.Width / 图片控件.Width);
rectangle.Height = (int)(heightRectangle * 选取的原始图片bmpSelect.Height / 图片控件.Height);
------解决思路----------------------
这很简单,用不了几行代码。

首先从xaml结构上看,在一个背景缩略图片下面(注意是上一图层,而不是内部),放一个 Rectangle 控件。设置其边的颜色、填充颜色,填充透明度(例如30%)。设置其支持捕获鼠标拖拉事件,以及滚轮事件。

然后,在代码中,分别捕获两个事件。在滚轮中,处理此 Rectangle 改变Width、Height 的行为。在捕获了其鼠标拖拽事件之后,得到此 Rectangle 的当前的Top、Left,根据 Rectangle 的 Height、Width 就能实时地算出 Rectangle相对于背景图片大小的偏移和矩形大小(都用double类型的百分率表示)。

这里总共用不了10余行代码(一行低级代码都不用写)。而且非常容易扩展各种各样功能(例如在鹰眼上可以扩展右键菜单,可以捕获大图改变事件并同时复制收缩背景缩略图,等等)。关键是 xaml 数据结构要搞对(也非常简单)。
  相关解决方案