Development of image interactive controls based on Qt5 (C++ implementation)

---

foreword

The blogger recently saw that Haikang VM, halcon and visionpro vision software all contain an image intelligent interactive control, and then recently developed a similar function based on the technical principle and based on Qt5, including rectangle, rotate rectangle, arbitrary polygon, Common controls such as circles, rings, fan rings, linear calipers, and circular calipers. Image intelligent interaction is a commonly used technology in the field of computer vision. It is used in visual software image ROI, and is widely used in industrial automation, machine vision and other fields. The specific effect is as follows:

Qt5 image intelligent interactive control

---

1. Image interactive control

1.1 Overview

In the field of machine vision, commonly used image interactive controls include the following:

1. Annotation Tools: Annotation tools allow users to annotate and draw on images, such as drawing bounding boxes. These annotations can be used for data annotation for tasks such as image classification, object detection, and semantic segmentation.

2. Drag and Adjust Tools: These tools allow users to interact by dragging or adjusting specific areas in the image. For example, you can drag the bounding box or control points to adjust the location, size, or shape of the object.

3. Interactive Region Selection Tools: These tools allow users to designate regions of interest by drawing, dragging, or selecting specific regions. For example, users can use the Rectangular Selection Tool, Polygonal Selection Tool, or Magic Wand Tool to select objects or areas in an image.

4. Zoom and Navigation Tools: These tools are used to zoom, pan and navigate on the image so that the user can view and analyze different parts of the image. Common zoom and navigation tools include zoom in, zoom out, pan, and rotate operations.

5. Parameter Adjustment Sliders: In machine vision tasks, some algorithms or models may need to adjust different parameters or thresholds. The parameter adjustment slider allows the user to adjust the value of the parameter by sliding the slider and observe the output changes of the algorithm or model in real time.

The two articles written by the blogger using interactive controls are as follows:
The first: Using OpenCV and Qt5 to build a caliper fitting straight line tool (C++ implementation)
The second: Using OpenCV and Qt5 to build a caliper circle finding tool (C++ implementation)

1.2 Image Display Interactive Function

This article uses Qt5's QGraphicsView to display image controls, QGraphicsScene is used to manage graphic interactive controls, and QGraphicsView in Qt5 is a graphic view framework for displaying and interacting with 2D graphics in applications. It is part of Qt's Graphics Module (Graphics Module), which provides developers with a flexible tool to create graphics-based user interfaces.

The main functions of QGraphicsView include:

1. Graphics display: QGraphicsView allows developers to display 2D graphics items (Graphics Item) in the view, such as images, text, geometric figures, paths, etc. These graphical items can customize appearance, position, and interactive behavior.

2. Zooming and panning: With QGraphicsView, users can zoom the graphics in the view through the mouse wheel or gestures, and pan the view by dragging the mouse. This enables users to view and navigate drawings that are large or extend beyond the bounds of the view.

3. Coordinate system: QGraphicsView provides a coordinate system that allows users to position and manipulate graphical items in the view. Developers can specify logical coordinates in the view and use these coordinates to add, move, and transform graphical items.

4. Interactive operation: Through QGraphicsView, developers can implement rich interactive functions, such as selecting graphic items, dragging graphic items, zooming selected graphic items, etc. These interactive operations can be realized by rewriting the corresponding event handling functions.

5. Double-buffered drawing: QGraphicsView uses double-buffering technology to provide smooth drawing and animation effects. It can efficiently handle the drawing of a large number of graphics items, and automatically perform local updates to reduce the overhead of drawing.

6. Views and scenes: QGraphicsView is used with QGraphicsScene, which provides a container for graphical items and manages the relationship between them. QGraphicsView acts as the view of the scene and is used to display the graphical items in the scene in the window.

1.3 Realization of checkerboard function

The image is displayed as a checkerboard. The implementation code is as follows:

void myqgraphicsview::drawBackground(QPainter * painter, const QRectF & rect)
{
    
    
    //绘制灰白棋盘图像背景
    int wid = this->geometry().width();
    int hei = this->geometry().height();
    QPointF m_ptCenter = this->mapToScene(wid / 2, hei / 2);
    QPixmap pix(wid, hei);
    QPainter pter(&pix);
    QColor clr_white(Qt::white);
    QColor clr_gray(240, 240, 240, 240);
    int spacing = 15;
    QColor useColor;
    for (int i = 0; i <= floor(wid / spacing); i++)
    {
    
    
        for (int j = 0; j <= floor(hei / spacing); j++)
        {
    
    
            useColor = ((i + j) % 2 == 0 ? clr_white : clr_gray);
            pter.fillRect(i*spacing, j*spacing, spacing, spacing, useColor);
        }
    }
    painter->drawImage(rect, pix.toImage());
}

1.4 Shape control base class

QAbstractGraphicsShapeItem is an abstract base class in Qt used to represent a graphic item (Graphics Item) with a shape. It is a subclass of QGraphicsItem and is used to display and manipulate 2D graphics in QGraphicsScene.

The main characteristics and functions of QAbstractGraphicsShapeItem are as follows:

1. Shape definition: It defines the shape of a graphic item, which can be rectangle, ellipse, polygon, etc. Developers can customize the shape by overriding the shape() function.

2. Appearance Style: It has a series of functions for setting the appearance of graphic items, such as setting border color, fill color, line width, etc. Through these functions, you can customize the appearance style of graphic items.

3. Collision Detection: It provides some functions for collision detection, such as collidesWithItem() and collidesWithPath(). These functions can be used to determine whether a graphic item collides with other graphic items or paths.

4. Interactive operation: By rewriting the mouse event processing function, the interactive operation with QAbstractGraphicsShapeItem can be realized, such as mouse click, drag, move, etc. Interactive behavior can be customized as needed.

5. Transformation and position: It inherits the function of QGraphicsItem, and can perform transformation operations such as position setting, rotation, and scaling of graphic items.

QAbstractGraphicsShapeItem is an abstract base class that cannot be instantiated directly. It needs to inherit and rewrite its pure virtual function to create a specific shape graphic item. Common specific subclasses include QGraphicsRectItem (rectangular graphics item), QGraphicsEllipseItem (ellipse graphics item) and QGraphicsPolygonItem (polygon graphics item), which respectively provide graphics items in the shape of rectangles, ellipses, and polygons. Using QAbstractGraphicsShapeItem and its subclasses, developers can easily create 2D graphic items with shapes and appearance styles, and display, interact and operate them in QGraphicsScene. This provides powerful graph drawing and manipulation functions for applications such as drawing, graph editing, and data visualization.

1.5 Implementation of mouse interaction

    virtual void hoverEnterEvent(QGraphicsSceneHoverEvent *event) override;
    virtual void hoverMoveEvent(QGraphicsSceneHoverEvent *event) override;
    virtual void hoverLeaveEvent(QGraphicsSceneHoverEvent *event) override;
    virtual void mousePressEvent(QGraphicsSceneMouseEvent* event) override;
    virtual void mouseMoveEvent(QGraphicsSceneMouseEvent* event) override;
    virtual void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override;

2. Function display

2.1 Image loading

2.2 Image Enlargement

2.3 Image reduction

2.4 Image Adaptation

2.5 Actual image size

2.6 Rectangle control

2.7 Rotate rectangle control

2.8 Free Polygon Control

2.9 Circle Control

2.10 Concentric circle controls

2.11 Fan ring control

2.12 Linear Caliper Control

2.13 Circle Caliper Controls

Summarize

Due to the limited ability of bloggers, the methods mentioned in this article will inevitably have omissions. I hope you can enthusiastically point out the mistakes, so that the next revision can be presented to everyone in a more perfect and rigorous manner. before.