视频监控实现画面缩放功能

概要

在视频监控系统中，经常需要查看视频画面中的细节。通过实现区域放大、滚轮缩放和拖拽平移等功能，可以让用户更方便地观察视频细节。本文介绍如何在 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后，可以跟踪整个拖动过程，即使鼠标移出窗口也能继续操作