原文:【WPF】WPF截屏
引言
.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="" Width="" 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, , , 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 > )
{ 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="" Width="" WindowStyle="None" WindowState="Maximized">
<Canvas Name="xgrid" >
<wpfCapture:DrawingCanvas x:Name="grid" Background="AliceBlue" Canvas.Top="" Canvas.Left="" 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="" Width="">
<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 / ;
//得到截图方框的背景
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(, , (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 ,但是比我这个画板强大多了,效率和功能都高一筹,放上传送门,让我们共同学习一下.最后,如果你有更好的做法,请不吝指教.