PyQT5: How to interactively paint on image within QLabel Widget?

Question

Python 3, latest version of PyQt5 on Mac OS Mojave

I want a PyQt5 program in which the user could paint connected dots on an image (click distinctively and the points are automatically connected). It is important that I can only draw on the image in the QLabel widget (or an alternative widget) and not over the entire main window.

I can plot the image and get the the coordinates of the previous two clicks but when I want to paint on the image it happens underneath the image. Further I have troubles in getting the coordinates as input for my paintevent.

class Example(QWidget):

   def __init__(self):

      super().__init__()


      title = "Darcy"
      top = 400
      left = 400
      width = 550
      height = 600

      self.clickcount = 0
      self.x = 0
      self.y = 0



      self.setWindowTitle(title)
      self.setGeometry(top,left, width, height)

      self.initUI()

  def paintEvent(self, e):

      qp = QPainter()
      qp.begin(self)
      self.drawLines(qp)
      qp.end()


  def drawLines(self, qp):

      pen = QPen(Qt.black, 2, Qt.SolidLine)

      qp.setPen(pen)
      qp.drawLine(20, 40, 250, 40)

  def initUI(self):

      self.map = QLabel()
      Im = QPixmap("GM_loc.png")
      Im = Im.scaled(450,450)
      self.map.setPixmap(Im)

      self.loc = QLabel()
      self.test = QLabel()

      self.map.mousePressEvent = self.getPos



      #organize in grid
      grid = QGridLayout()
      grid.setSpacing(10)

      grid.addWidget(self.map, 0, 0)
      grid.addWidget(self.loc,1,0)
      grid.addWidget(self.test,2,0)

      self.setLayout(grid)
      self.show()


  def getPos(self , event):

      self.clickcount += 1

      self.x_old = self.x
      self.y_old = self.y

      self.x = event.pos().x()
      self.y = event.pos().y() 


      self.loc.setText("x = "+str(self.x)+" & y= "+str(self.y)+" & old x = " + str(self.x_old) + " & old y = " + str(self.y_old))


 if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_()) 

Thanks in advance! PS I am a rookie in PyQt5 so any hints in more efficient code are more than welcome!

Answer 1

Try it:

import sys
from PyQt5.QtCore    import *
from PyQt5.QtWidgets import *
from PyQt5.QtGui     import *

class MyScribbling(QMainWindow):
    def __init__(self):
        super().__init__()
        self.penOn = QAction(QIcon('Image/ok.png'), 'ON   drawing', self)
        self.penOn.triggered.connect(self.drawingOn)
        self.penOff = QAction(QIcon('Image/exit.png'), 'OFF drawing', self)
        self.penOff.triggered.connect(self.drawingOff)
        toolbar = self.addToolBar('Tools')
        toolbar.addAction(self.penOn)
        toolbar.addAction(self.penOff)

        self.scribbling = False
        self.myPenColor = Qt.red      
        self.myPenWidth = 3           

        self.lastPoint = QPoint()
        self.image     = QPixmap("Image/picture.png")
        self.setFixedSize(600, 600)
        self.resize(self.image.width(), self.image.height())
        self.setWindowTitle("drawing On / Off")

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.drawPixmap(self.rect(), self.image)

    def mousePressEvent(self, event):
        if (event.button() == Qt.LeftButton) and self.scribbling: 
            self.lastPoint = event.pos()

    def mouseMoveEvent(self, event):
        if (event.buttons() & Qt.LeftButton) and self.scribbling:
            painter = QPainter(self.image)
            painter.setPen(QPen(self.myPenColor, self.myPenWidth, 
                                Qt.SolidLine, Qt.RoundCap, Qt.RoundJoin))
            painter.drawLine(self.lastPoint, event.pos())
            self.lastPoint = event.pos()
            self.update()

    def drawingOn(self):
        self.scribbling = True

    def drawingOff(self):
        self.scribbling = False

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