概要

在视频监控系统中，经常需要查看视频画面中的细节。通过实现区域放大、滚轮缩放和拖拽平移等功能，可以让用户更方便地观察视频细节。本文介绍如何在 Windows 系统下实现这些交互功能。

一、功能说明

框选缩放功能：按住鼠标左键，移动鼠标画出矩形框，松开左键，会将框选区域放大至整个窗口显示。点击鼠标右键，即恢复显示原画面。

鼠标滚轮缩放功能：通过鼠标滚轮控制缩放比例，以鼠标所在位置为中心进行缩放。

鼠标拖拽功能：在放大状态下，按住左键可以拖动视频画面，查看不同区域。

二、核心实现代码

// 检查区域
bool IsValidZoomRc(const RECT *pRC) {return pRC != nullptr && abs(pRC->left - pRC->right) > 4 && abs(pRC->top - pRC->bottom) > 4;
}// 左上右下位置相反时对调
inline void fmtRect(RECT &rc) {if (rc.left > rc.right) std::swap(rc.left, rc.right);if (rc.top > rc.bottom) std::swap(rc.top, rc.bottom);
}// 播放类
class CPlayer {// ...省略其他代码private:bool m_bZoom;  // 是否启用缩放功能HANDLE m_hPlayer; // 调用播放库的句柄POINT m_ptDragStart;  // 拖动起始点RECT m_rcDragStart;  // 拖动开始时的显示区域AV_STREAM_INFO m_stStreamInfo;  // 存放流信息的结构体RECT m_rcZoom;  // 记录当前显示的画面区域RECT m_rcDrawRect;  // 用于画框// 在播放库回调出来的句柄上画框选的方框void OnVideoDraw(HANDLE handle, HDC hdc) {if (m_bZoom) {auto oldPen = SelectObject(hdc, m_hDrawPen);auto oldBrush = SelectObject(hdc, m_hDrawBrush);Rectangle(hdc, m_rcDrawRect.left, m_rcDrawRect.top, m_rcDrawRect.right, m_rcDrawRect.bottom);SelectObject(hdc, oldPen);SelectObject(hdc, oldBrush);}}// 画框缩放接口void DoZoom(int wndWidth, int wndHeight, const RECT *pRc, bool bLRButtonUp) {if (!m_bZoom && m_hPlayer != (void*)INFINITE) {HS_ShowRect(m_hPlayer, nullptr);  // 调用播放库接口，还原画面return;}if (pRc != nullptr) {// 如果画面已经处于放大状态，不再支持画框if (((m_rcZoom.right - m_rcZoom.left) != m_stStreamInfo.nWidth) ||((m_rcZoom.bottom - m_rcZoom.top) != m_stStreamInfo.nHeight)) {return;}}if (bLRButtonUp || pRc == nullptr) {ZeroMemory(&m_rcDrawRect, sizeof(m_rcDrawRect));} else {m_rcDrawRect = *pRc;}double fWndWidth = wndWidth;double fWndHeight = wndHeight;if (bLRButtonUp) {if (pRc == nullptr) {if (m_hPlayer != (void*)INFINITE) {HS_ShowRect(m_hPlayer, nullptr);}SetRect(&m_rcZoom, 0, 0, m_stStreamInfo.nWidth, m_stStreamInfo.nHeight);} else {RECT rc = m_rcZoom, rcPrm = *pRc;double fWidth = (double)fWndWidth / abs(m_rcZoom.left - m_rcZoom.right),fHeight = (double)fWndHeight / abs(m_rcZoom.top - m_rcZoom.bottom);fmtRect(rcPrm);rc.left += (LONG)floor((double)rcPrm.left / fWidth);rc.right = rc.left + (LONG)floor((double)abs(rcPrm.left - rcPrm.right) / fWidth);rc.top += (LONG)floor((double)rcPrm.top / fHeight);rc.bottom = rc.top + (LONG)floor((double)abs(rcPrm.top - rcPrm.bottom) / fHeight);if (m_hPlayer != (void*)INFINITE) {bool bRet = IsValidZoomRc(&rc) && 0 == HS_ShowRect(m_hPlayer, &rc);  // 将要显示的区域传给播放库if (bRet) {m_rcZoom = rc;}}}    }}// 鼠标滚轮缩放接口void DoWheelZoom(POINT ptMouse, int wndWidth, int wndHeight, short zDelta) {if (!m_bZoom || m_hPlayer == (void*)INFINITE) {return;}// 计算缩放比例 - 每次放大20%或缩小25%double scale = (zDelta > 0) ? 0.8 : 1.25;// 当前视频显示区域的宽高int currentWidth = m_rcZoom.right - m_rcZoom.left;int currentHeight = m_rcZoom.bottom - m_rcZoom.top;// 新的视频显示区域宽高int newWidth = (int)(currentWidth * scale);int newHeight = (int)(currentHeight * scale);if (zDelta > 0) {// 这里控制最多放大11次double minWidth = m_stStreamInfo.nWidth * pow(scale, 12);if (newWidth < minWidth) {return;}} else {// 这里控制只能缩小到视频原宽高if (newWidth > m_stStreamInfo.nWidth ||newHeight > m_stStreamInfo.nHeight) {newWidth = m_stStreamInfo.nWidth;newHeight = m_stStreamInfo.nHeight;}}// 计算鼠标在窗口坐标系中的相对位置(0-1范围)double mouseXRatio = ptMouse.x / (double)wndWidth;double mouseYRatio = ptMouse.y / (double)wndHeight;// 计算新的视频缩放区域，以鼠标位置为中心点RECT rcNew = {};int widthDiff = currentWidth - newWidth;int heightDiff = currentHeight - newHeight;rcNew.left = m_rcZoom.left + (int)(widthDiff * mouseXRatio);rcNew.top = m_rcZoom.top + (int)(heightDiff * mouseYRatio);rcNew.right = rcNew.left + newWidth;rcNew.bottom = rcNew.top + newHeight;// 确保不会超出视频边界if (rcNew.left < 0) {rcNew.right -= rcNew.left;rcNew.left = 0;}if (rcNew.top < 0) {rcNew.bottom -= rcNew.top;rcNew.top = 0;}if (rcNew.right > m_stStreamInfo.nWidth) {rcNew.left -= (rcNew.right - m_stStreamInfo.nWidth);rcNew.right = m_stStreamInfo.nWidth;}if (rcNew.bottom > m_stStreamInfo.nHeight) {rcNew.top -= (rcNew.bottom - m_stStreamInfo.nHeight);rcNew.bottom = m_stStreamInfo.nHeight;}// 应用新的缩放区域if (IsValidZoomRc(&rcNew)) {HS_ShowRect(m_hPlayer, &rcNew);m_rcZoom = rcNew;}}// 拖拽画面接口void DragMoveZoom(POINT ptMouse, int wndWidth, int wndHeight, bool bLBtnDown) {if (!m_bZoom || m_hPlayer == (void*)INFINITE) {return;}if (bLBtnDown) {  // 鼠标左键按下事件m_ptZoomDragStart = ptMouse;m_rcZoomDragStart = m_rcZoom;}// 画面未处于放大状态，不支持拖拽if (((m_rcZoom.right - m_rcZoom.left) == m_stStreamInfo.nWidth) &&((m_rcZoom.bottom - m_rcZoom.top) == m_stStreamInfo.nHeight)) {return;}// 计算鼠标移动的距离int deltaX = m_ptZoomDragStart.x - ptMouse.x;int deltaY = m_ptZoomDragStart.y - ptMouse.y;// 根据窗口和实际视频的比例计算实际需要移动的距离double scaleX = (double)(m_rcZoom.right - m_rcZoom.left) / wndWidth;double scaleY = (double)(m_rcZoom.bottom - m_rcZoom.top) / wndHeight;// 计算实际移动距离int actualDeltaX = (int)(deltaX * scaleX);int actualDeltaY = (int)(deltaY * scaleY);// 计算新的显示区域RECT rcNew = m_rcZoomDragStart;rcNew.left += actualDeltaX;rcNew.right += actualDeltaX;rcNew.top += actualDeltaY;rcNew.bottom += actualDeltaY;// 边界检查if (rcNew.left < 0) {rcNew.right -= rcNew.left;rcNew.left = 0;}if (rcNew.top < 0) {rcNew.bottom -= rcNew.top;rcNew.top = 0;}if (rcNew.right > m_stStreamInfo.nWidth) {rcNew.left -= (rcNew.right - m_stStreamInfo.nWidth);rcNew.right = m_stStreamInfo.nWidth;}if (rcNew.bottom > m_stStreamInfo.nHeight) {rcNew.top -= (rcNew.bottom - m_stStreamInfo.nHeight);rcNew.bottom = m_stStreamInfo.nHeight;}// 应用新的显示区域if (IsValidZoomRc(&rcNew)) {HS_ShowRect(m_hPlayer, &rcNew);m_rcZoom = rcNew;}}// ...省略其他代码
};// 窗口类
class CPlayWnd {// ...省略其他代码private:RECT m_arrBlock;  // 记录框选的区域bool m_bLBottonDowned;  // 记录鼠标左键是否处于按下状态int m_nWndWidth;int m_nWndHeight;public:// 窗口事件响应函数LRESULT ChildWinMsgProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam) {switch (msg) {// ...省略其他代码case WM_LBUTTONDOWN: {m_bLBottonDowned = true;// SetCapture(hWnd);  // 捕获鼠标POINT ptMouse = { GET_X_LPARAM(lParam), GET_Y_LPARAM(lParam) };auto &rc = m_arrBlock;rc.left = rc.right = LOWORD(lParam);rc.top = rc.bottom = HIWORD(lParam);/* 这里通知播放类CPlayer,调用到CPlayer的缩放和拖拽接口 *//* OnDoZoom(m_nWndWidth, m_nWndHeight, &rc, false); *//* OnDragZoom(m_nWndWidth, m_nWndHeight, ptMouse, true); */} break;case WM_MOUSELEAVE: {if (m_bLBottonDowned) {m_bLBottonDowned = false;auto &rc = m_arrBlock;/* 这里通知播放类CPlayer,调用到CPlayer的缩放接口 *//* OnDoZoom(m_nWndWidth, m_nWndHeight, &rc, true); */}} break;case WM_MOUSEMOVE: {// 设置捕获鼠标离开窗口事件TRACKMOUSEEVENT trackEvent;trackEvent.cbSize = sizeof(TRACKMOUSEEVENT);trackEvent.dwFlags = TME_LEAVE;trackEvent.hwndTrack = hWnd;TrackMouseEvent(&trackEvent);if (m_bLBottonDowned) {POINT ptMouse = { GET_X_LPARAM(lParam), GET_Y_LPARAM(lParam) };auto &rc = m_arrBlock;rc.right = LOWORD(lParam);rc.bottom = HIWORD(lParam);/* 这里通知播放类CPlayer,调用到CPlayer的缩放和拖拽接口 *//* OnDoZoom(m_nWndWidth, m_nWndHeight, &rc, false); *//* OnDragZoom(m_nWndWidth, m_nWndHeight, ptMouse, false); */}} break;case WM_MOUSEWHEEL: {POINT ptMouse;// 鼠标在屏幕的坐标ptMouse.x = GET_X_LPARAM(lParam);ptMouse.y = GET_Y_LPARAM(lParam);// 转换为相对于窗口的坐标ScreenToClient(hWnd, &ptMouse);// 获取滚轮delta值short zDelta = GET_WHEEL_DELTA_WPARAM(wParam);/* 这里通知播放类CPlayer,调用到CPlayer的滚轮缩放接口 *//* OnWheelZoom(ptMouse, m_nWndWidth, m_nWndHeight, zDelta); */} break;case WM_LBUTTONUP: {if (m_bLBottonDowned) {// ReleaseCapture();  // 释放鼠标捕获m_bLBottonDowned = false;auto &rc = m_arrBlock;rc.right = LOWORD(lParam);rc.bottom = HIWORD(lParam);/* 这里通知播放类CPlayer,调用到CPlayer的缩放接口 *//* OnDoZoom(m_nWndWidth, m_nWndHeight, &rc, true); */}} break;case WM_RBUTTONUP: {/* 这里通知播放类CPlayer,调用到CPlayer的缩放接口 *//* OnDoZoom(0, 0, nullptr, true); */} break;case WM_LBUTTONDBLCLK: {/* 这里通知播放类CPlayer,调用到CPlayer的缩放接口 *//* OnDoZoom(0, 0, nullptr, true); */} break;// ...省略其他代码}}// ...省略其他代码
};

三、技术细节

• 本文主要介绍的是如何计算出显示区域，计算出来后将结果传给播放库去显示，播放库代码不在本文展示
• 使用GET_X_LPARAM和GET_Y_LPARAM替代LOWORD和HIWORD处理坐标
• 正确处理屏幕坐标到客户区坐标的转换
• 不使用SetCapture时，鼠标移出窗口后消息中断，拖动操作可能无法正常完成
• 使用SetCapture后，可以跟踪整个拖动过程，即使鼠标移出窗口也能继续操作