Draw a rectangle over an image

[john_hobbyist]

I need to draw a green rectangle that is transparent inside, so only the green rectangle's lines to be visible, over an image, moreover to know its left top corner and right down corner coordinates. I have found code here: https://codeloop.org/pyqt5-drawing-rectangle-with-qpainter-class/ and here: https://zetcode.com/gui/pyqt5/painting/ I have managed to change the rectangle's lines to green. But I cannot change the inside of the rectangle to transparent.... in order to be able to depict the part of the image that the rectangle bounds...

[Markkyboy]

Hi, this works;

EDIT: x and y positioning added!

p.s. Apologies, I missed the part about python, I don't know/use python sorry.

Window {
width: 640
height: 580
visible: true
title: qsTr("John_Hobbyist")

    Rectangle {
        width: 500
        height: width
        radius: 30
        color: "#00000000"
        border {
            width: 10
            color: "green"
        }
        Image {
            anchors.centerIn: parent
            source: "file:///C:/Users/Mark/Desktop/sailfish-green.png"
        }
        x: 125; y: 125

        Text {
            id: label
            text: qsTr("text")
            anchors {
                top: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            font.pixelSize: 72
        }

        function update() {
            label.text = Math.round(x) + " x " + Math.round(y)
            console.log("X: " + x + " x " + "Y: " + y)
        }

        onXChanged: update()
        onYChanged: update()

        Component.onCompleted: {
            update()
        }
        MouseArea {
            anchors.fill: parent
            drag.target: parent

        }
    }
}

[john_hobbyist]

I have built it in python. I will try to translate the above code (I think it is C++ ) to python and respond to you if it works...Thanks!

[KroMignon]

@john_hobbyist said in Draw a rectangle over an image:

I have built it in python. I will try to translate the above code (I think it is C++ ) to python and respond to you if it works...Thanks!

This no C++ code, it is QML!!!

[Markkyboy]

Code updated @john_hobbyist - sorry, didn't read the part about python!....Oops!, speed reading again!

[john_hobbyist]

@Markkyboy Sorry I do not know QML, moreover I have posted the question under "python" category...Thanks for your time though...

[SGaist]

Hi,

From memory: use a green QPen and a transparent QBrush.

[john_hobbyist]

This is my try (source: https://stackoverflow.com/questions/61034583/drawing-a-circle-on-a-qwidget-python-gui and https://codeloop.org/pyqt5-drawing-rectangle-with-qpainter-class/). I cannot display the image and then above the image the green transparent rectangle...It depicts only the green rectangle and nothing behind...Why?

from PyQt5 import QtGui
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
 
class Canvas(QWidget): 
    def __init__(self, photo, *args, **kwargs): 
        super().__init__(*args, **kwargs) 
        
        self.image = QImage(photo)
        self.setFixedSize(self.image.width(), self.image.height())
        self.pressed = self.moving = False
        self.revisions = []
 
        self.title = "PyQt5 Drawing Rectangle"
        self.top = 100
        self.left = 100
        self.width = 680
        self.height = 500
 
        self.InitWindow()
 
    def InitWindow(self):
        self.setWindowIcon(QtGui.QIcon("icon.png"))
        self.setWindowTitle(self.title)
        self.setGeometry(self.top, self.left, self.width, self.height)
        self.show()
 
    def paintEvent(self, e):
        painter = QPainter(self)
        painter.setPen(QPen(Qt.green, 5, Qt.SolidLine))
        painter.setBrush(QBrush(Qt.transparent))
        painter.drawRect(100, 150, 400,200)

class MainWindow(QMainWindow):

    def __init__(self):
        super().__init__()
        w = QWidget()
        self.setCentralWidget(w)
        canvas = Canvas('image3.png') 
        grid = QGridLayout(w)
        grid.addWidget(canvas)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    gui = MainWindow()
    gui.show()
    sys.exit(app.exec_())

[SGaist]

Because your are doing nothing with the image beside loading it and you are painting your rectangle in your widget and not on your image.

[john_hobbyist]

@SGaist Ok, what to add/fix in the code? Thanks...

[SGaist]

Paint the image before the rectangle.

[john_hobbyist]

I have added this command:

painter.drawImage(photo)

under:

painter = QPainter(self)

Nothing works...I don't see neither the photo, nor the rectangle... Any idea?

[john_hobbyist]

I did some other tests, nothing...

[SGaist]

Except that photo is passed only in your __init__ method.

Please provide your code rather than lines without context stating that it does not work.

[john_hobbyist]

@SGaist Yes, sorry! Here it does not show anything... (source: https://stackoverflow.com/questions/61034583/drawing-a-circle-on-a-qwidget-python-gui and https://codeloop.org/pyqt5-drawing-rectangle-with-qpainter-class/)

from PyQt5 import QtGui
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
 
class Canvas(QWidget): 
    def __init__(self, photo, *args, **kwargs): 
        super().__init__(*args, **kwargs) 
        
        self.image = QImage(photo)
        self.setFixedSize(self.image.width(), self.image.height())
        self.pressed = self.moving = False
        self.revisions = []
 
        self.title = "PyQt5 Drawing Rectangle"
        self.top = 100
        self.left = 100
        self.width = 680
        self.height = 500
 
        self.InitWindow()
 
    def InitWindow(self):
        self.setWindowIcon(QtGui.QIcon("icon.png"))
        self.setWindowTitle(self.title)
        self.setGeometry(self.top, self.left, self.width, self.height)
        self.show()

    def paintEvent(self, e):
        painter = QPainter(self)
        painter.drawImage(photo)
        painter.setPen(QPen(Qt.green, 5, Qt.SolidLine))
        painter.setBrush(QBrush(Qt.transparent))
        painter.drawRect(100, 150, 400,200)

class MainWindow(QMainWindow):

    def __init__(self):
        super().__init__()
        w = QWidget()
        self.setCentralWidget(w)
        canvas = Canvas('image3.png') 
        grid = QGridLayout(w)
        grid.addWidget(canvas)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    gui = MainWindow()
    gui.show()
    sys.exit(app.exec_())

[SGaist]

And that code runs without triggering an exception ?
"photo" is unknown in your paintEvent. You should draw "self.image".

[john_hobbyist]

@SGaist If you mean: "painter.drawImage(self.image)" I see neither the image nor the rectangle and many errors...

[jsulm]

@john_hobbyist said in Draw a rectangle over an image:

many errors

Would be nice if you would let us know what errors...

[john_hobbyist]

@jsulm Yes, of course! The code is this (for source see my previous messages...):

from PyQt5 import QtGui
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
 
class Canvas(QWidget): 
    def __init__(self, photo, *args, **kwargs): 
        super().__init__(*args, **kwargs) 
        
        self.image = QImage(photo)
        self.setFixedSize(self.image.width(), self.image.height())
        self.pressed = self.moving = False
        self.revisions = []
 
        self.title = "PyQt5 Drawing Rectangle"
        self.top = 100
        self.left = 100
        self.width = 680
        self.height = 500
 
        self.InitWindow()
 
    def InitWindow(self):
        self.setWindowIcon(QtGui.QIcon("icon.png"))
        self.setWindowTitle(self.title)
        self.setGeometry(self.top, self.left, self.width, self.height)
        self.show()

    def paintEvent(self, e):
        painter = QPainter(self)
        painter.drawImage(self.image)
        painter.setPen(QPen(Qt.green, 5, Qt.SolidLine))
        painter.setBrush(QBrush(Qt.transparent))
        painter.drawRect(100, 150, 400,200)

class MainWindow(QMainWindow):

    def __init__(self):
        super().__init__()
        w = QWidget()
        self.setCentralWidget(w)
        canvas = Canvas('image3.png') 
        grid = QGridLayout(w)
        grid.addWidget(canvas)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    gui = MainWindow()
    gui.show()
    sys.exit(app.exec_())

The errors are these:

Traceback (most recent call last):
  File "draw_fixed_rectangle_with_image.py", line 32, in paintEvent
    painter.drawImage(self.image)
TypeError: arguments did not match any overloaded call:
  drawImage(self, QRectF, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, int, int, QImage, sx: int = 0, sy: int = 0, sw: int = -1, sh: int = -1, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRectF, QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
QBackingStore::endPaint() called with active painter; did you forget to destroy it or call QPainter::end() on it?
Traceback (most recent call last):
  File "draw_fixed_rectangle_with_image.py", line 32, in paintEvent
    painter.drawImage(self.image)
TypeError: arguments did not match any overloaded call:
  drawImage(self, QRectF, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, int, int, QImage, sx: int = 0, sy: int = 0, sw: int = -1, sh: int = -1, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRectF, QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
Traceback (most recent call last):
  File "draw_fixed_rectangle_with_image.py", line 32, in paintEvent
    painter.drawImage(self.image)
TypeError: arguments did not match any overloaded call:
  drawImage(self, QRectF, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage): argument 1 has unexpected type 'QImage'
  drawImage(self, int, int, QImage, sx: int = 0, sy: int = 0, sw: int = -1, sh: int = -1, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRectF, QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QRect, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, Union[QPointF, QPoint], QImage, QRectF, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
  drawImage(self, QPoint, QImage, QRect, flags: Union[Qt.ImageConversionFlags, Qt.ImageConversionFlag] = Qt.ImageConversionFlag.AutoColor): argument 1 has unexpected type 'QImage'
QBackingStore::endPaint() called with active painter; did you forget to destroy it or call QPainter::end() on it?
QPaintDevice: Cannot destroy paint device that is being painted

[jsulm]

@john_hobbyist Please take a look at documentation: https://doc.qt.io/qt-5/qpainter.html
What are drawImage() parameters? And what do you pass to it? It is quite apparent what you are doing wrong even from the error message itself:

drawImage(self, QRectF, QImage): argument 1 has unexpected type 'QImage'