引言
.NET的截图控件在网上流传得不多啊,难得发现一个精品截图控件( 传送门),但是无奈是winform的.后来又找到一个周银辉做的WPF截图(继续传送门),发现截屏是实现了,但是功能略少了点.So,打算自己用WPF去实现一个,无奈略渣,还是简单分享一下吧.
一个Window和一个Canvas
Window是截图的主界面,但是设置好WindowStyle和WindowState就基本没它什么事了,Window里面放个Canvas,Canvas主要承载当前的截屏和画板DrawingPannel以及工具控件.先看看Window和Canvas的代码吧,如下
<Window x:Class="WpfCapture.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wpfCapture="clr-namespace:WpfCapture" Title="Window3" Height="300" Width="300" WindowStyle="None" WindowState="Maximized"> <Canvas Name="xgrid" > </Canvas> </Window>
什么时候加载当前截屏,怎样加载,看代码
public Window3() { InitializeComponent(); screenSnapshot = GetScreenSnapshot(); var bmp = ToBitmapSource(screenSnapshot); bmp.Freeze(); this.xgrid.Background = new ImageBrush(bmp); } public Bitmap GetScreenSnapshot() { try { System.Drawing.Rectangle rc = SystemInformation.VirtualScreen; var bitmap = new Bitmap(rc.Width, rc.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb); using (Graphics memoryGrahics = Graphics.FromImage(bitmap)) { memoryGrahics.CopyFromScreen(rc.X, rc.Y, 0, 0, rc.Size, CopyPixelOperation.SourceCopy); } return bitmap; } catch (Exception) { } return null; }
画板DrawingPannel
画板DrawingPannel是自定义的一个布局控件类,主要是用来显示DrawingVisual对象的,类定义如下:
public class DrawingCanvas : Panel { private List<Visual> visuals = new List<Visual>(); protected override Visual GetVisualChild(int index) { return visuals[index]; } protected override int VisualChildrenCount { get { return visuals.Count; } } public void RemoveLastVisual() { if (visuals.Count > 0) { var item= visuals.FindLast(x => true); DeleteVisual(item); } } public void AddVisual(Visual visual) { visuals.Add(visual); base.AddVisualChild(visual); base.AddLogicalChild(visual); Console.WriteLine(visuals.Count); } public void DeleteVisual(Visual visual) { visuals.Remove(visual); base.RemoveVisualChild(visual); base.RemoveLogicalChild(visual); } }
既然画板有了,当然不能漏了画笔等操作工具,所以最终界面XAML描述如下
<Window x:Class="WpfCapture.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wpfCapture="clr-namespace:WpfCapture" Title="Window3" Height="300" Width="300" WindowStyle="None" WindowState="Maximized"> <Canvas Name="xgrid" > <wpfCapture:DrawingCanvas x:Name="grid" Background="AliceBlue" Canvas.Top="0" Canvas.Left="0" Width="{Binding ActualWidth,ElementName=xgrid}" Height="{Binding ActualHeight,ElementName=xgrid}" Opacity="0.8" MouseLeftButtonDown="Grid_OnMouseLeftButtonDown" PreviewMouseMove="grid_PreviewMouseMove_1" MouseLeftButtonUp="Grid_OnMouseLeftButtonUp" MouseMove="grid_MouseMove_2" MouseRightButtonDown="grid_MouseRightButtonDown_1" > </wpfCapture:DrawingCanvas> <StackPanel Orientation="Horizontal" Name="toolpanel" Visibility="Collapsed" Height="28" Width="160"> <ToolBar> <RadioButton GroupName="tool" Name="Arrow" > <Image Source="./icons/Arrow.ico"></Image> </RadioButton> <RadioButton GroupName="tool" Name="Rectangular"> <Image Source="./icons/Rectangular.ico"></Image> </RadioButton> <RadioButton GroupName="tool" Name="Line"> <Image Source="./icons/Line.ico"></Image> </RadioButton> <Button Click="Button_Click_2"> <Image Source="./icons/Redo.png"></Image> </Button> <Button> <Image Source="./icons/Exit.ico"></Image> </Button> <Button Click="Button_Click_1"> <Image Source="./icons/Accept.ico"></Image> </Button> </ToolBar> </StackPanel> </Canvas> </Window>
如何指定截图方框
如何画截图边框出来呢.其实上面已经有画板了,那么我们只需要在上面画个方框,再将工具栏显示出来,那么好像有点像样了.如何画?需要用到DrawingVisual类,画框的方法如下:
private void DrawSquare1(DrawingVisual visual) { using (DrawingContext dc = visual.RenderOpen()) { dc.DrawRectangle(drawingBrush, drawingPen, new Rect(startPoint, endPoint)); } }
在鼠标事件中利用上面那个方法轻松画出方框,然后接下来我就用笨方法了,在画出方框后,我new了一个新的DrawingCanvas替代方框,再从一开始截屏图片中截取相应的图片作为DrawingCanvas的背景,在这个过程中要注意DPI值的转换,我的电脑是120的DPI,所以从WPF的单位转换为真正分辨率单位时要乘以1.25.
//得到DPI比例 Graphics graphics = Graphics.FromHwnd(IntPtr.Zero); systemdpi = graphics.DpiX / 96;
//得到截图方框的背景 private BitmapSource CopyFromScreenSnapshot() { var sourceRect = new System.Drawing.Rectangle((int)(Math.Min(startPoint.X, endPoint.X) * systemdpi), (int)(Math.Min(startPoint.Y, endPoint.Y) * systemdpi), (int)(Math.Abs(startPoint.X - endPoint.X) * systemdpi), (int)(Math.Abs(startPoint.Y - endPoint.Y) * systemdpi)); var destRect = new System.Drawing.Rectangle(0, 0, (int)(sourceRect.Width * systemdpi), (int)(sourceRect.Height * systemdpi)); if (screenSnapshot != null) { var bitmap = new Bitmap((int)(sourceRect.Width * systemdpi), (int)(sourceRect.Height * systemdpi), System.Drawing.Imaging.PixelFormat.Format32bppArgb); using (Graphics g = Graphics.FromImage(bitmap)) { g.DrawImage(screenSnapshot, destRect, sourceRect, GraphicsUnit.Pixel); } return ToBitmapSource(bitmap); } return null; }
画板工具
画板工具我只定义了几个一个线段,方框和钢笔,也有后退,退出和完成截图工具.直接看代码好了
//画方框 private void DrawSquare(System.Windows.Point point1, System.Windows.Point point2) { using (DrawingContext dc = selectionSquare.RenderOpen()) { dc.DrawRectangle(selectionSquareBrush, selectionSquarePen, new Rect(point1, point2)); } } //画箭头....好吧,是画直线 private void DrawArrow(System.Windows.Point point1, System.Windows.Point point2) { using (DrawingContext dc = selectionSquare.RenderOpen()) { dc.DrawLine(selectionSquarePen, point1, point2); } } PathGeometry pgGeometry = new PathGeometry(); PathFigure pfFigure = new PathFigure(); //画钢笔线 private void DrawLine(System.Windows.Point point1, System.Windows.Point point2) { using (DrawingContext dc = selectionSquare.RenderOpen()) { LineSegment lsLineSegment = new LineSegment(point2, true); pfFigure.Segments.Add(lsLineSegment); Console.WriteLine(point2.Y); pgGeometry.Figures.Add(pfFigure); dc.DrawGeometry(selectionSquareBrush, selectionSquarePen, pgGeometry); } }
各种鼠标方法我就不一一标出来了,最终效果如下:
小结
其实一句话可以说完整个实现的:将Canvas背景设置为当前屏幕,画个框放画板,在画板上涂涂画画,然后将画板转成图片.多简单,但是上面还有好多细节没有说到,也有比较多功能没有实现,例如拖拉边框等功能.因为是纯练习,代码注释和规则都懒了,还有画板功能也不怎么样,画起来会有延迟的...不能再说下去了....话说,做完这个后,在CodePreject发现一个好东西,也是一个画板来的,也是利用DrawingVisual ,但是比我这个画板强大多了,效率和功能都高一筹,放上传送门,让我们共同学习一下.最后,如果你有更好的做法,请不吝指教.