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

[mchudie]

右下角这个可拖动缩略图 求个示例

[win7cc]

这个很难。

[BitCoffee]

思路: 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);

[BitCoffee]

图片控件是自动填充显示的,你也可以用缩略图的方法,我觉得没必要.

[以专业开发人员为伍]

这很简单，用不了几行代码。 首先从xaml结构上看，在一个背景缩略图片下面（注意是上一图层，而不是内部），放一个 Rectangle 控件。设置其边的颜色、填充颜色，填充透明度（例如30%）。设置其支持捕获鼠标拖拉事件，以及滚轮事件。 然后，在代码中，分别捕获两个事件。在滚轮中，处理此 Rectangle 改变Width、Height 的行为。在捕获了其鼠标拖拽事件之后，得到此 Rectangle 的当前的Top、Left，根据 Rectangle 的 Height、Width 就能实时地算出 Rectangle相对于背景图片大小的偏移和矩形大小（都用double类型的百分率表示）。 这里总共用不了10余行代码（一行低级代码都不用写）。而且非常容易扩展各种各样功能（例如在鹰眼上可以扩展右键菜单，可以捕获大图改变事件并同时复制收缩背景缩略图，等等）。关键是 xaml 数据结构要搞对（也非常简单）。

[以专业开发人员为伍]

你所贴的鹰眼图，缩略图上面遮了一层遮罩（也就是在背景图和上述Rectangle 中间再插入一个半透明的 Rectangle 控件层）。实际上如果没有这个遮罩，而让最高层的 Rectangle 作为遮罩（例如不透明度为30%），在设计上会更简单一点。 如果一定要这样在中间多一层遮罩，那么可能需要修改一下这个 Rectangle 的设计。它应该是一个 Grid，里边放一个背景图Image，然后随着Grid相对于外边背景图的相对位置的改变而自动改变 Grid 里边的背景图的位置，例如位置为（100,80）时里边的背景图就变动到(-100,-80)，这样Grid里边的背景图自动剪切，显示出局部图片的效果。这也基本上不需要编程。 注意，使用 WPF 编程，关键在于 xaml 设计。 绝不是写一堆低级的无用的代码。