How do I keep drawing on image after window resize in PyQt?

Question

I have written a code to draw a rectangle on an image in a QGraphicsView but if I resize the image, for example full screen, the position of the rectangle becomes misplaced. Is there any way to fix this? I think one possible solution is to align the image every time in top left corner but I cannot give 2 arguments in setAlignment().

Here is the code:(the buttons are just for show atm)

class MyWidget(QWidget):
def __init__(self):
    super().__init__()

    self.b1 = QPushButton('Next Image')
    self.b2 = QPushButton('Crop')
    self.b3 = QPushButton('Clear')

    self.view = GraphicsView()
    h_box = QHBoxLayout()
    v_box = QVBoxLayout()
    v_box.addWidget(self.b1)
    v_box.addWidget(self.b2)
    v_box.addWidget(self.b3)
    h_box.addWidget(self.view)
    h_box.addLayout(v_box)
    self.setLayout(h_box)
    #self.resize(800, 800)
    self.setWindowTitle("Super Duper Cropper")

    self.show()



class GraphicsView(QGraphicsView):

def __init__(self):
    super().__init__()
    self.setScene(QGraphicsScene())

    self.item = QGraphicsPixmapItem(QPixmap('test.jpg'))
    self.scene().addItem(self.item)



def mousePressEvent(self, event):
    self.xi = event.x()
    self.yi = event.y()

def mouseMoveEvent(self, event):
    self.xf = event.x()
    self.yf = event.y()
    self.draw_rect()


def mouseReleaseEvent(self, event):
    self.xf = event.x()
    self.yf = event.y()
    self.draw_rect()

def draw_rect(self):
    self.scene().removeItem(self.item)
    self.scene().addItem(self.item)

    self.scene().addRect(self.xi, self.yi, self.xf-self.xi, self.yf-self.yi, pen=QPen(QColor(51, 153, 255), 2,
                        Qt.SolidLine), brush=QBrush(QColor(0, 255, 0, 40)))



if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWidget()
    window.show()
    app.aboutToQuit.connect(app.deleteLater)
    sys.exit(app.exec_())

eyllanesc · Accepted Answer · 2018-08-09T11:48:23.187

You have the following errors:

The coordinates of the scene are different from the coordinates of the view, so you must use the mapToScene() method if you want to establish the right position of the rectangle.
Why do you add and remove the items? the best thing is to reuse
You want the position of the rectangle to be relative to the QGraphicsPixmapItem, so the rectangle has to be a child of the QGraphicsPixmapItem.

Using the above we obtain the following:

class GraphicsView(QGraphicsView):
    def __init__(self):
        super().__init__()
        self.setScene(QGraphicsScene())
        self.item = QGraphicsPixmapItem(QPixmap('test.jpg'))
        self.scene().addItem(self.item)
        self.rect_item = QGraphicsRectItem(QRectF(), self.item)
        self.rect_item.setPen(QPen(QColor(51, 153, 255), 2, Qt.SolidLine))
        self.rect_item.setBrush(QBrush(QColor(0, 255, 0, 40)))

    def mousePressEvent(self, event):
        self.pi = self.mapToScene(event.pos())
        super().mousePressEvent(event)

    def mouseMoveEvent(self, event):
        pf = self.mapToScene(event.pos())
        if (self.pi - pf).manhattanLength() > QApplication.startDragDistance():
            self.pf = pf
            self.draw_rect()
        super().mouseMoveEvent(event)

    def mouseReleaseEvent(self, event):
        pf = self.mapToScene(event.pos())
        if (self.pi - pf).manhattanLength() > QApplication.startDragDistance():
            self.pf = pf
            self.draw_rect()
        super().mouseReleaseEvent(event)

    def draw_rect(self):
        r = QRectF(self.pi, self.pf).normalized()
        r = self.rect_item.mapFromScene(r).boundingRect()
        self.rect_item.setRect(r)

I was removing and adding because the picture was not updating the way I wrote it. I'm still a beginner at this. Thank you very much! It works now — Daniel T., Aug 09 '18 at 11:47
@DanielT. If my answer helps you, do not forget to mark it as correct, if you do not know how to do it, review the [tour], that is the best way to thank. — eyllanesc, Aug 09 '18 at 11:49

How do I keep drawing on image after window resize in PyQt?

1 Answers1