[分享]牛牛截图控件最终版

牛牛截图控件已经提供Web控件及标准的Javascript接口，测试程序及调用示例请访问： http://www.ggniu.cn/

实现牛牛截图控件的初衷，是想在学习的同时，实现一个具备当前主流截图功能的插件，方便集成进不同的应用系统中，节省开发时间。

一直以来，都对目前各主流即时通讯软件的截图效果比较喜欢，前段时间专门花时间进行了一些研究，实现了自己的一个截图控件，我给它取名叫“牛牛截图”；此控件可免费使用，开放了调用的接口，有兴趣的朋友可以试一下，具体的调用方法及使用示例见下文。

 

1. 本控件实现的基本功能及特点如下

1). 支持窗口区域的自动识别

2). 支持矩形、圆形、箭头、文字的绘制以及撤销

3). 可另存为png、jpg、bmp等格式

4). 支持鼠标所在区域的图像放大功能，以便精准定位

5). 窗口大小、鼠标坐标显示以及光标处的颜色拾取

6). 采用C++语言开发的Win32动态库，大小为150KB

7). 支持XP、WIN7、WIN8及WIN2003、WIN2008等操作系统；

8). 此控件提供标准的接口，方便集成进其他软件中；

例如可以与浏览器控件整合，实现Web页面截图的功能，也可以与其他如即时通讯等其他任何系统中

 

先看看使用效果：

 

 

2. 控件使用方法

1). 在测试程序中点击启动截图[在集成此控件后，可以自行通过热键进行启动]，按下鼠标左键并拖动，以确定需要截图的范围，也可以直接在自动识别到的窗口上点击一下鼠标左键，确定截图范围；此时可以通过放大的区域来精确定位截图区域。

2). 确定截图范围后，工具栏将会显示出来，选中指定的绘制类型[绘制类型、大小、颜色]，可以进行二次绘制涂鸦。

3). 可以通过点击撤销按钮来取消上一笔所绘制的形状。

4). 在截图的过程中，可以按ESC键或者点击鼠标右键来取消截图。

5). 按下回车键或者在截图区域内双击鼠标左键，可以完成截图[也可以点击工具栏上的“完成”按钮]。

6). 点击“保存”按钮，可以将所截区域保存至图片文件。

 

 

3. 控件接口的使用方法

可以在程序中使用LoadLibrary的方式加载此控件，进行初始化后，直接调用启动截图的函数即可:

typedef int (*FnStartScreenCapture)(const char* szAuth, const char* szDefaultSavePath, void* pCallBack, unsigned long hWndNotice, unsigned int noticeMsg);
FnStartScreenCapture m_StartScreenCapture = NULL;
typedef int (*FnInitScreenCapture)(unsigned long trackerColor, unsigned long editBorderColor, int nTransparent, int flag);
FnInitScreenCapture m_InitCapture = NULL;
//加载截图控件
m_hModule = LoadLibrary("NiuniuCapture.dll");
 
m_StartScreenCapture = (FnStartScreenCapture)GetProcAddress(m_hModule, "StartScreenCapture");
m_InitCapture = (FnInitScreenCapture)GetProcAddress(m_hModule, "InitScreenCapture");
 
m_InitCapture(RGB(255, 0, 0), RGB(0, 174, 255), 180, 0);
m_StartScreenCapture("niuniu", "", NULL, (unsigned long)m_hWnd, WM_USER + 1111);

 

具体可以参考调用Capturedemo_source.rar [下载地址见本文末尾]，接口的具体描述如下：

1). 初始化接口

int InitScreenCapture(unsigned long trackerColor, unsigned long editBorderColor, int nTransparent, int flag);

此接口函数用于初始化界面的显示效果，如果不调用，则以默认值处理。

参数说明：

参数名	参数类型	参数说明	备注
trackerColor	COLORREF	用于设置橡皮筋框的颜色以及自动识别窗口的边框色	如果不调用此函数，则此框颜色默认为： RGB(0, 174, 255);
editBorderColor	COLORREF	用于设置文本输入框的边框颜色	如果不调用此函数，则此框颜色默认为： RGB(255, 0, 0);
nTransparent	int	用于指定工具栏窗口的透明度(0-255)	如果不调用此函数，则透明度默认为200
flag	int	暂未使用

 

 2). 启动截图接口：

int StartScreenCapture(const char* szAuth, const char* szDefaultSavePath, void* pCallBack, unsigned long hWndNotice, unsigned int noticeMsg);

参数说明：

参数名	参数类型	参数说明	备注
szAuth	字符串	用于调用控件时的授权	目前固定传入”niuniu”即可
szDefaultSavePath	字符串	用于指定在截图完成时自动保存的文件路径	如：c:\\test.jpg，如果此字符串为空，则完成时将只写入剪贴板
pCallBack	Void*	用于指定在截图完成时自动回调的函数	用于通知调用程序截图完成
hWndNotice	UINT	用于指定截图完成时发送通知的窗口句柄及发送的消息	用于通知调用程序截图完成，截图完成时，控件将会发送消息： ::PostMessage(hWndNotice, noticeMsg, 1, 1);
noticeMsg	UINT

 

 

4. 控件的主要技术点简介

本控件采用C++语言，通过Win32程序进行实现，内部使用了Duilib来做工具栏以及图片放大区域的显示；对于画图部分，主要采用了GDI+，以下对我个人认为需要注意的技术点进行简要描述：

 

4.1 橡皮筋类的绘制、大小调整以及拖动等

此橡皮筋类是从MFC的源代码中提取的CRectTracker，进而移植到Win32环境中的，具体橡皮筋类的原理就不描述了，需要重点关注的是TrackRubberBand及Track两函数：

1) 当鼠标按下，且橡皮筋没有显示的情况下，使用TrackRubberBand，以确定橡皮筋所包含区域

if(!gl_rectTracker.TrackRubberBand(hWnd, pt, TRUE))
{ //说明鼠标没有移动，则获取自动识别到的窗口
if (gl_borderRt.right != 0 && gl_borderRt.right > gl_borderRt.left)
{
gl_rectTracker.m_rect.SetRect(gl_borderRt.left, gl_borderRt.top, gl_borderRt.right, gl_borderRt.bottom);
}
}

2) 当橡皮筋类已经显示，则需要判断此时鼠标的落点，如果在橡皮筋区域内[gl_rectTracker.HitTest(pt)的返回值 大于0]，则需要调用Track，以便拖动橡皮筋调整大小或者移动它。 

 

4.2 自动窗口区域识别

在Windows系统中，所有的窗口都是有一个层级的(ZORDER)，此处采用的方法是在获取屏幕截图之前，保存下当前所有可见的窗口句柄以及其子窗口句柄[主要利用FindWindowEx]，此处值得一提的是，需要过滤掉一些带WS_EX_LAYERED属性的窗口[在不过滤的情况下，WIN8下会有问题，存在透明的窗口处于当前窗口之上]，同时针对任务栏窗口不能过滤掉。

4.3  GDI+绘制矩形、圆形、箭头、文字

1). 绘制箭头的代码类似如下： 

void DrawArraw(Graphics& graphics, CPoint pt1, CPoint pt2, Color color )
{
Point pt[3] = { Point(3, -5), Point(-3, -5), Point(0, 0)};
GraphicsPath strokePath;
strokePath.AddLines(pt, sizeof(pt)/sizeof(Point));
Pen pen(color, 1);
CustomLineCap custCap(&strokePath, NULL);
pen.SetCustomEndCap(&custCap);
graphics.DrawLine(&pen, pt1.x, pt1.y, pt2.x, pt2.y);
}

此处需要通过对所画的直线进行平滑处理，否则线条将会很难看。

 

2). 绘制文字 

此处有两点需要注意，我只解决了其中的第一点：

a). 针对每一行需要单独绘制，否则在EDIT控件中的行高要比DrawString的行高要少，导致绘制出来的文字占用高度比在EDIT中要多，感觉文字的Y坐标有移位  

b). 在同时有中文与英文时，绘制出来的文字的X坐标是有移位的，我暂时没有处理，估计需要一个字符一个字符的绘制来解决 

 

4.4 可变大小、可拖动的EDIT控件

此处在效果上参考了微软的mspaint程序的实现，通过将一个EDIT控件与橡皮筋类进行组合来实现，此处需要重点处理一下鼠标按下以及防止闪烁；还需要注意与EDIT控件组合的橡皮筋类的绘制细节 

 

4.5 鼠标所在区域的放大镜效果显示 

通过一个透明的PNG做背景图 StretchBlt函数，通过光标所在点为基点，以4倍大小放大显示即可 

 

 5. 未解决的问题

5.1 目前没有处理当输入文字或者粘贴文字时，自动改变文本框的大小，此处不太清楚如何处理控件的自动变更大小

5.2 当文本框中有中文与英文混合时，绘制到截图上后，文字的X坐标会有移位

 

牛牛截图控件已经提供Web控件及标准的Javascript接口，测试程序及调用示例请访问： http://www.ggniu.cn/