Python OpenCV：利用鼠标移动缩放图片

Myth丶恋晨 2022-04-23 00:46 426阅读 0赞

--------------------

## 一、实现目标 ##

在OpenCV中通过鼠标左键拖拽移动图片，通过鼠标滚轮前后旋转放大缩小图片。

## 二、实现背景 ##

在前一篇博客[在OpenCV中使用滚动条显示大图][OpenCV]中发现自己画滚动条移动大图略显繁琐，且缩放图片存在一定不足，故尝试利用鼠标拖拽来实现图片移动，同时完善使用鼠标滚轮缩放图片的程序。

## 三、实现方法 ##

利用OpenCV中的鼠标事件实现。当鼠标左键点击时保存初始坐标，按住鼠标左键并拖拽后记下拖拽坐标，二者相减得出相对移动坐标，最后以此计算窗口相对于大图的坐标(wx, wy)，并根据窗口宽高显示截取的图片。

![format_png_pic_center][]

## 四、运行环境 ##

1. 在windows下已安装Python（必须的，我使用的是python3.7）;  
  2. 安装PyCharm（方便编程调试）  
  3. 安装opencv-python（在python下安装配置OpenCV）

## 五、运行代码 ##

import cv2
    
    
    def mouse(event, x, y, flags, param):
        global flag, x1, y1, x2, y2, wx, wy, move_w, move_h, dst
        global zoom, zoom_w, zoom_h, img_zoom, flag_har, flag_var
        if event == cv2.EVENT_LBUTTONDOWN:  # 左键点击
            if flag == 0:
                flag = 1
                x1, y1, x2, y2 = x, y, wx, wy  # 使鼠标移动距离都是相对于初始点击位置，而不是相对于上一位置
        elif event == cv2.EVENT_MOUSEMOVE and (flags & cv2.EVENT_FLAG_LBUTTON):  # 按住左键拖曳
            if flag == 1:
                move_w, move_h = x1 - x, y1 - y  # 鼠标拖拽移动的宽高
                if flag_har and flag_var:  # 当窗口宽高大于图片宽高
                    wx = x2 + move_w  # 窗口在大图的横坐标
                    if wx < 0:  # 矫正位置
                        wx = 0
                    elif wx + win_w > zoom_w:
                        wx = zoom_w - win_w
                    wy = y2 + move_h  # 窗口在大图的总坐标
                    if wy < 0:
                        wy = 0
                    elif wy + win_h > zoom_h:
                        wy = zoom_h - win_h
                    dst = img_zoom[wy:wy + win_h, wx:wx + win_w]  # 截取窗口显示区域
                elif flag_har and flag_var == 0:  # 当窗口宽度大于图片宽度
                    wx = x2 + move_w
                    if wx < 0:
                        wx = 0
                    elif wx + win_w > zoom_w:
                        wx = zoom_w - win_w
                    dst = img_zoom[0:zoom_h, wx:wx + win_w]
                elif flag_har == 0 and flag_var:  # 当窗口高度大于图片高度
                    wy = y2 + move_h
                    if wy < 0:
                        wy = 0
                    elif wy + win_h > zoom_h:
                        wy = zoom_h - win_h
                    dst = img_zoom[wy:wy + win_h, 0:zoom_w]
        elif event == cv2.EVENT_LBUTTONUP:  # 左键释放
            flag = 0
            x1, y1, x2, y2 = 0, 0, 0, 0
        elif event == cv2.EVENT_MOUSEWHEEL:  # 滚轮
            z = zoom
            if flags > 0:  # 滚轮上移
                zoom += wheel_step
                if zoom > 1 + wheel_step * 20:  # 缩放倍数调整
                    zoom = 1 + wheel_step * 20
            else:  # 滚轮下移
                zoom -= wheel_step
                if zoom < wheel_step:  # 缩放倍数调整
                    zoom = wheel_step
            zoom = round(zoom, 2)  # 取2位有效数字
            zoom_w, zoom_h = int(img_original_w * zoom), int(img_original_h * zoom)
            # print(wx, wy)
            wx, wy = int((wx + x) * zoom / z - x), int((wy + y) * zoom / z - y)  # 缩放后窗口在图片中的坐标
            # print(z, zoom, x, y, wx, wy)
            if wx < 0:
                wx = 0
            elif wx + win_w > zoom_w:
                wx = zoom_w - win_w
            if wy < 0:
                wy = 0
            elif wy + win_h > zoom_h:
                wy = zoom_h - win_h
            img_zoom = cv2.resize(img_original, (zoom_w, zoom_h), interpolation=cv2.INTER_AREA)  # 图片缩放
            if zoom_w <= win_w and zoom_h <= win_h:  # 缩放后图片宽高小于窗口宽高
                flag_har, flag_var = 0, 0
                dst = img_zoom
                cv2.resizeWindow('img', zoom_w, zoom_h)
            elif zoom_w <= win_w and zoom_h > win_h:  # 缩放后图片宽度小于窗口宽度
                flag_har, flag_var = 0, 1
                dst = img_zoom[wy:wy + win_h, 0:zoom_w]
                cv2.resizeWindow('img', zoom_w, win_h)
            elif zoom_w > win_w and zoom_h <= win_h:  # 缩放后图片高度小于窗口高度
                flag_har, flag_var = 1, 0
                dst = img_zoom[0:zoom_h, wx:wx + win_w]
                cv2.resizeWindow('img', win_w, zoom_h)
            else:  # 缩放后图片宽高大于于窗口宽高
                flag_har, flag_var = 1, 1
                dst = img_zoom[wy:wy + win_h, wx:wx + win_w]
                cv2.resizeWindow('img', win_w, win_h)
        cv2.imshow("img", dst)
        cv2.waitKey(1)
    
    
    win_h, win_w = 600, 800  # 窗口宽高
    wx, wy = 0, 0  # 窗口相对于原图的坐标
    wheel_step, zoom = 0.05, 1  # 缩放系数， 缩放值
    img_original = cv2.imread("E:/VSCode/git/my_program/ImageMoveZoom/1.jpg")  # 建议图片大于win_w*win_h(800*600)
    img_original_h, img_original_w = img_original.shape[0:2]  # 原图宽高
    cv2.namedWindow('img', cv2.WINDOW_NORMAL)
    cv2.moveWindow("img", 300, 100)
    zoom_w, zoom_h = img_original_w, img_original_h  # 缩放图宽高
    img_zoom = img_original.copy()  # 缩放图片
    flag, flag_har, flag_var = 0, 0, 0  # 鼠标操作类型
    move_w, move_h = 0, 0  # 鼠标移动坐标
    x1, y1, x2, y2 = 0, 0, 0, 0  # 中间变量
    cv2.resizeWindow("img", win_w, win_h)
    dst = img_original[wy:wy + win_h, wx:wx + win_w]
    cv2.setMouseCallback('img', mouse)
    if img_original_w > win_w:
        flag_har = 1
    if img_original_h > win_h:
        flag_var = 1
    cv2.waitKey()
    cv2.destroyAllWindows()

2020.06.02版本：缩减全局变量个数，将关联较少的功能（如矫正坐标，计算缩放倍数）单独定义成函数，精炼鼠标事件函数。

import cv2
    
    # 全局变量
    g_window_name = "img"  # 窗口名
    g_window_wh = [800, 600]  # 窗口宽高
    
    g_location_win = [0, 0]  # 相对于大图，窗口在图片中的位置
    location_win = [0, 0]  # 鼠标左键点击时，暂存g_location_win
    g_location_click, g_location_release = [0, 0], [0, 0]  # 相对于窗口，鼠标左键点击和释放的位置
    
    g_zoom, g_step = 1, 0.1  # 图片缩放比例和缩放系数
    g_image_original = cv2.imread("E:/VSCode/git/my_program/ImageMoveZoom/1.jpg")  # 原始图片，建议大于窗口宽高（800*600）
    g_image_zoom = g_image_original.copy()  # 缩放后的图片
    g_image_show = g_image_original[g_location_win[1]:g_location_win[1] + g_window_wh[1], g_location_win[0]:g_location_win[0] + g_window_wh[0]]  # 实际显示的图片
    
    
    # 矫正窗口在图片中的位置
    # img_wh:图片的宽高, win_wh:窗口的宽高, win_xy:窗口在图片的位置
    def check_location(img_wh, win_wh, win_xy):
        for i in range(2):
            if win_xy[i] < 0:
                win_xy[i] = 0
            elif win_xy[i] + win_wh[i] > img_wh[i] and img_wh[i] > win_wh[i]:
                win_xy[i] = img_wh[i] - win_wh[i]
            elif win_xy[i] + win_wh[i] > img_wh[i] and img_wh[i] < win_wh[i]:
                win_xy[i] = 0
        # print(img_wh, win_wh, win_xy)
    
    
    # 计算缩放倍数
    # flag：鼠标滚轮上移或下移的标识, step：缩放系数，滚轮每步缩放0.1, zoom：缩放倍数
    def count_zoom(flag, step, zoom):
        if flag > 0:  # 滚轮上移
            zoom += step
            if zoom > 1 + step * 20:  # 最多只能放大到3倍
                zoom = 1 + step * 20
        else:  # 滚轮下移
            zoom -= step
            if zoom < step:  # 最多只能缩小到0.1倍
                zoom = step
        zoom = round(zoom, 2)  # 取2位有效数字
        return zoom
    
    
    # OpenCV鼠标事件
    def mouse(event, x, y, flags, param):
        global g_location_click, g_location_release, g_image_show, g_image_zoom, g_location_win, location_win, g_zoom
        if event == cv2.EVENT_LBUTTONDOWN:  # 左键点击
            g_location_click = [x, y]  # 左键点击时，鼠标相对于窗口的坐标
            location_win = [g_location_win[0], g_location_win[1]]  # 窗口相对于图片的坐标，不能写成location_win = g_location_win
        elif event == cv2.EVENT_MOUSEMOVE and (flags & cv2.EVENT_FLAG_LBUTTON):  # 按住左键拖曳
            g_location_release = [x, y]  # 左键拖曳时，鼠标相对于窗口的坐标
            h1, w1 = g_image_zoom.shape[0:2]  # 缩放图片的宽高
            w2, h2 = g_window_wh  # 窗口的宽高
            show_wh = [0, 0]  # 实际显示图片的宽高
            if w1 < w2 and h1 < h2:  # 图片的宽高小于窗口宽高，无法移动
                show_wh = [w1, h1]
                g_location_win = [0, 0]
            elif w1 >= w2 and h1 < h2:  # 图片的宽度大于窗口的宽度，可左右移动
                show_wh = [w2, h1]
                g_location_win[0] = location_win[0] + g_location_click[0] - g_location_release[0]
            elif w1 < w2 and h1 >= h2:  # 图片的高度大于窗口的高度，可上下移动
                show_wh = [w1, h2]
                g_location_win[1] = location_win[1] + g_location_click[1] - g_location_release[1]
            else:  # 图片的宽高大于窗口宽高，可左右上下移动
                show_wh = [w2, h2]
                g_location_win[0] = location_win[0] + g_location_click[0] - g_location_release[0]
                g_location_win[1] = location_win[1] + g_location_click[1] - g_location_release[1]
            check_location([w1, h1], [w2, h2], g_location_win)  # 矫正窗口在图片中的位置
            g_image_show = g_image_zoom[g_location_win[1]:g_location_win[1] + show_wh[1], g_location_win[0]:g_location_win[0] + show_wh[0]]  # 实际显示的图片
        elif event == cv2.EVENT_MOUSEWHEEL:  # 滚轮
            z = g_zoom  # 缩放前的缩放倍数，用于计算缩放后窗口在图片中的位置
            g_zoom = count_zoom(flags, g_step, g_zoom)  # 计算缩放倍数
            w1, h1 = [int(g_image_original.shape[1] * g_zoom), int(g_image_original.shape[0] * g_zoom)]  # 缩放图片的宽高
            w2, h2 = g_window_wh  # 窗口的宽高
            g_image_zoom = cv2.resize(g_image_original, (w1, h1), interpolation=cv2.INTER_AREA)  # 图片缩放
            show_wh = [0, 0]  # 实际显示图片的宽高
            if w1 < w2 and h1 < h2:  # 缩放后，图片宽高小于窗口宽高
                show_wh = [w1, h1]
                cv2.resizeWindow(g_window_name, w1, h1)
            elif w1 >= w2 and h1 < h2:  # 缩放后，图片高度小于窗口高度
                show_wh = [w2, h1]
                cv2.resizeWindow(g_window_name, w2, h1)
            elif w1 < w2 and h1 >= h2:  # 缩放后，图片宽度小于窗口宽度
                show_wh = [w1, h2]
                cv2.resizeWindow(g_window_name, w1, h2)
            else:  # 缩放后，图片宽高大于窗口宽高
                show_wh = [w2, h2]
                cv2.resizeWindow(g_window_name, w2, h2)
            g_location_win = [int((g_location_win[0] + x) * g_zoom / z - x), int((g_location_win[1] + y) * g_zoom / z - y)]  # 缩放后，窗口在图片的位置
            check_location([w1, h1], [w2, h2], g_location_win)  # 矫正窗口在图片中的位置
            # print(g_location_win, show_wh)
            g_image_show = g_image_zoom[g_location_win[1]:g_location_win[1] + show_wh[1], g_location_win[0]:g_location_win[0] + show_wh[0]]  # 实际的显示图片
        cv2.imshow(g_window_name, g_image_show)
    
    
    # 主函数
    if __name__ == "__main__":
        # 设置窗口
        cv2.namedWindow(g_window_name, cv2.WINDOW_NORMAL)
        # 设置窗口大小，只有当图片大于窗口时才能移动图片
        cv2.resizeWindow(g_window_name, g_window_wh[0], g_window_wh[1])
        cv2.moveWindow(g_window_name, 700, 100)  # 设置窗口在电脑屏幕中的位置
        # 鼠标事件的回调函数
        cv2.setMouseCallback(g_window_name, mouse)
        cv2.waitKey()  # 不可缺少，用于刷新图片，等待鼠标操作
        cv2.destroyAllWindows()

## 六、运行结果 ##

原图：

![format_png_pic_center 1][]

水平移动图片（鼠标左键点击并向左拖拽）：

![format_png_pic_center 2][]

垂直移动图片（鼠标左键点击，向上拖拽）：

![format_png_pic_center 3][]

鼠标滚轮后转缩小图片：

![format_png_pic_center 4][]

鼠标滚轮前转放大图片：

![format_png_pic_center 5][]

## 七、参考资料 ##

上一篇：[在OpenCV中使用滚动条显示大图][OpenCV]

[OpenCV]: https://www.jianshu.com/p/e0ab51b217bb
[format_png_pic_center]: /images/20220323/a760c9a6ef0b4e988c3f2cf98449cb69.png
[format_png_pic_center 1]: /images/20220323/a1be7d02fbdf4d27969415226d3e7d20.png
[format_png_pic_center 2]: /images/20220323/e43531c9277a44c7abb325da742d6fe9.png
[format_png_pic_center 3]: /images/20220323/d72049eae40a4769bc32e48c56a20f19.png
[format_png_pic_center 4]: /images/20220323/9d293e6d7fb64d258c9d3c664843cc3c.png
[format_png_pic_center 5]: /images/20220323/c89e673038af4d039fa11da6a35ae8e2.png