How Can I Draw Inside Existing Qgraphicsview?

just like the title says i'm trying to draw inside an existing QGraphicsView. The window I generated using QT Designer, and I would like to draw a matrix of 16x16 squares inside th

Solution 1:

I recommend you inherit from QMainWindow and implement the Ui_MainWindow interface, to draw in a QGraphicsView you must use a QGraphicsScene, and use its methods, in this case use addRect().

from PyQt5 import QtCore, QtGui, QtWidgets

class MyFirstGuiProgram(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        QtWidgets.QMainWindow.__init__(self, parent=parent)
        self.setupUi(self)
        scene = QtWidgets.QGraphicsScene()
        self.graphicsView.setScene(scene)
        pen = QtGui.QPen(QtCore.Qt.green)

        side = 20

        for i in range(16):
            for j in range(16):
                r = QtCore.QRectF(QtCore.QPointF(i*side, j*side), QtCore.QSizeF(side, side))
                scene.addRect(r, pen)


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MyFirstGuiProgram()
    w.show()
    sys.exit(app.exec_())

Solution 2:

You can also draw it by QLineF(), it gives more control from design point of view.

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

defsceneWithPen(grid):

    scene = QGraphicsScene()
    view = QGraphicsView()
    view.setScene(scene)
                                        # Creating line's colors
    red = QColor(qRgb(172, 50, 99))
    blue = QColor(qRgb(50, 150, 203))
                                        # Set length of square's side and number of horizontal and vertical lines
    vLines = 16
    hLines = 16
    side = 30# Set starting values for loops
    hor = 0
    ver = 0
    subdiv = 16
    leftX,leftY = 0, 0
    rightX, rightY = subdiv*side, 0
    bottomX, bottomY= 0, 0
    topX, topY = 0, subdiv*side

    while ver < vLines:
                                        # Drawing vertical lines
        ver = ver + 1
        vLine = QLineF(bottomX, bottomY, topX, topY)
        bottomX, topX = bottomX + side, topX + side
        scene.addLine(vLine, red)

    while hor < hLines:
                                        #Drawing horizontal lines
        hor = hor + 1
        hLine = QLineF(leftX, leftY, rightX, rightY)
        leftY, rightY = leftY + side, rightY + side
        scene.addLine(hLine, blue)

    grid.addWidget(view)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = QWidget()
    grid = QGridLayout()
    sceneWithPen(grid)
    w.setLayout(grid)
    w.show()
    sys.exit(app.exec_())

It will be like this:

Solution 3:

Great example @eyllanesc just gave you right above, here is another small example I just happened to have laying around, if you need to draw like a simple free hand.

1. Have your MainWindow, for example a QMainWindow or Qwidget or...
2. Have a QGraphicsView.
3. Set the QGraphicsView's scene with your QGraphicsScene
4. Have your own QGraphicsPathItem so you can set properties you need.
5. Have the implementation of what you want to draw inside your scene, so it knows how to draw on itself.

Having things in this way you will have control of several scenes knowing how to draw on itself independently, of course if you will need more than one scene.

This example the logic were implemented inside the QGraphicsView, you could move it to your GraphicsScene.

classMainWindow(QMainWindow):

    central_widget = None
    layout_container = Nonedef__init__(self):
        super(MainWindow, self).__init__()
        self.central_widget = QWidget()
        self.layout_container = QVBoxLayout()
        self.central_widget.setLayout(self.layout_container)
        self.setCentralWidget(self.central_widget)
        self.layout_container.addWidget(GraphicsView())

classGraphicsView(QGraphicsView):

    start = None
    end = None
    item = None
    path = Nonedef__init__(self):
        super(GraphicsView, self).__init__()
        self.setScene(QGraphicsScene())
        self.path = QPainterPath()
        self.item = GraphicsPathItem()
        self.scene().addItem(self.item)

    defmousePressEvent(self, event):
        self.start = self.mapToScene(event.pos())
        self.path.moveTo(self.start)

    defmouseMoveEvent(self, event):
        self.end = self.mapToScene(event.pos())
        self.path.lineTo(self.end)
        self.start = self.end
        self.item.setPath(self.path)

classGraphicsPathItem(QGraphicsPathItem):

    def__init__(self):
        super(GraphicsPathItem, self).__init__()
        pen = QPen()
        pen.setColor(Qt.black)
        pen.setWidth(10)
        self.setPen(pen)

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