We Keep Coding

How to snap objects to a grid in the QGraphicsScene?

This code implements the ability to move objects with the mouse by using the QGraphicsItem.ItemIsMovable flag. But how to make objects move with a snap to a grid?
from PyQt5 import QtGui
from PyQt5.QtWidgets import QApplication, QMainWindow, QGraphicsScene, QGraphicsView, QGraphicsItem
from PyQt5.QtGui import QPen, QBrush
from PyQt5.Qt import Qt
import sys
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.title = "PyQt5 QGraphicView"
self.top = 200
self.left = 500
self.width = 600
self.height = 500
self.InitWindow()
def InitWindow(self):
self.setWindowIcon(QtGui.QIcon("icon.png"))
self.setWindowTitle(self.title)
self.setGeometry(self.left, self.top, self.width, self.height)
self.createGraphicView()
self.show()
def createGraphicView(self):
self.scene = QGraphicsScene()
self.greenBrush = QBrush(Qt.green)
self.grayBrush = QBrush(Qt.gray)
self.pen = QPen(Qt.red)
graphicView = QGraphicsView(self.scene, self)
graphicView.setGeometry(0, 0, 600, 500)
self.shapes()
def shapes(self):
ellipse = self.scene.addEllipse(20, 20, 200, 200, self.pen, self.greenBrush)
rect = self.scene.addRect(-100, -100, 200, 200, self.pen, self.grayBrush)
ellipse.setFlag(QGraphicsItem.ItemIsMovable)
rect.setFlag(QGraphicsItem.ItemIsMovable)
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

QFrame nad Animation

I have a QFrame on my QWidget and after clicking QPushButton my
QFrame animates from (QRect(0, 0, 100, 100)) to (QRect(600, 500, 100,
100))
Question is: I want to know QFrame every x and y
position when it is animating
from PyQt5.QtWidgets import QWidget, QApplication, QFrame, QPushButton
from PyQt5.QtCore import QPropertyAnimation, QRect
from PyQt5.QtGui import QFont
import sys
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle("Animation Window")
self.setGeometry(100, 100, 400, 400)
self.widgets()
self.show()
def widgets(self):
font = QFont("Times New Roman")
font.setPixelSize(20)
self.start = QPushButton("Start", self)
self.start.setFont(font)
self.start.setGeometry(100, 100, 100, 50)
self.start.clicked.connect(self.doAnimation)
self.frame = QFrame(self)
self.frame.setStyleSheet("background-color:darkGreen;")
self.frame.setFrameStyle(QFrame.Panel | QFrame.Raised)
self.frame.setGeometry(250, 100, 100, 100)
def doAnimation(self):
self.anim = QPropertyAnimation(self.frame, b"geometry")
self.anim.setDuration(10000)
self.anim.setStartValue(QRect(0, 0, 100, 100))
self.anim.setEndValue(QRect(600, 500, 100, 100))
self.anim.start()
if __name__ == "__main__":
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())

When an animation is running, it will trigger the signal valueChanged each time the animated value has changed:
def doAnimation(self):
self.anim = QPropertyAnimation(self.frame, b"geometry")
self.anim.valueChanged.connect(lambda: print(self.frame.pos()))
self.anim.setDuration(10000)
self.anim.setStartValue(QRect(0, 0, 100, 100))
self.anim.setEndValue(QRect(600, 500, 100, 100))
self.anim.start()

A question I meet when adding animation on QGraphicsItem

I want to use QPropertyAnimation on QGraphicsItem, hoping the rect item can move from point(100, 30) to point(100, 90). But why the rect is moving itself on the right side of the window? The x coordinate 100 should make the rect move at the middle according to the Scene's size.
Here is my code:
import sys
from PyQt5.QtCore import QPropertyAnimation, QPointF, QRectF
from PyQt5.QtWidgets import QApplication, QGraphicsEllipseItem, QGraphicsScene, QGraphicsView, \
QGraphicsObject
class CustomRect(QGraphicsObject):
def __init__(self):
super(CustomRect, self).__init__()
def boundingRect(self):
return QRectF(100, 30, 100, 30)
def paint(self, painter, styles, widget=None):
painter.drawRect(self.boundingRect())
class Demo(QGraphicsView):
def __init__(self):
super(Demo, self).__init__()
self.resize(300, 300)
self.scene = QGraphicsScene()
self.scene.setSceneRect(0, 0, 300, 300)
self.rect = CustomRect()
self.ellipse = QGraphicsEllipseItem()
self.ellipse.setRect(100, 180, 100, 50)
self.scene.addItem(self.rect)
self.scene.addItem(self.ellipse)
self.setScene(self.scene)
self.animation = QPropertyAnimation(self.rect, b'pos')
self.animation.setDuration(1000)
self.animation.setStartValue(QPointF(100, 30))
self.animation.setEndValue(QPointF(100, 90))
self.animation.setLoopCount(-1)
self.animation.start()
if __name__ == '__main__':
app = QApplication(sys.argv)
demo = Demo()
demo.show()
sys.exit(app.exec_())

It seems that they do not know the different coordinate systems of the Graphics View Framework.
In this system there are at least the following coordinate systems:
The coordinate system of the window(viewport()) where the (0, 0) will always be the top-left of the window.
The coordinate system of the scene, this is with respect to some pre-established point.
The coordinate coordinate system of each item, this coordinate system is used by the paint() method to do the painting, and the boundingRect() and shape() methods to obtain the edges of the item.
You also have to have another concept, the position of an item is with respect to the parent if he has it, if he does not have it, it is with respect to the scene.
Analogy
To explain the different coordinate systems I use the analogy of recording a scene using a camera.
The QGraphicsView would be the screen of the camera.
The QGraphicsScene is the scene that is recorded, so the point (0, 0) is some point that is convenient.
The QGraphicsItem are the elements of the scene, their position can be relative to other items or to the scene, for example we can consider the position of the actor's shoes with respect to the actor, or the item can be the same actor.
Based on the above I will explain what happens and we will give several solutions.
The rect item has no parent and by default the posicon of an item is (0, 0) so at that moment the coordinate system of the item and the scene coincide so the boundingRect will visually define the position and as you have placed QRectF(100, 30, 100, 30) this will be drawn in that position that coincidentally will be the same in the scene. But when you apply the animation the first thing that will be done is to set the position of the item to (100, 30) so that since the coordinate systems of the scene and the item do not match, one is displaced from the other, so the boundingRect no longer matches the QRectF(100, 30, 100, 30) of the scene, but will move in the same factor (only because there is a displacement, there is no scaling or rotation) and the rectangle will be QRectF(200, 60, 100, 30) and with respect to the ellipse that was always in the QRect(100, 180, 100, 50) so rectangle is on the right since 200>100 and it is up since 60<180.
So if you want the rectangle to be on top of the ellipse there are at least 2 solutions:
Modify the boundingRect so that it is in position 0,0 so that with the displacement caused by the animation it makes them match:
import sys
from PyQt5 import QtCore, QtWidgets
class CustomRect(QtWidgets.QGraphicsObject):
def boundingRect(self):
return QtCore.QRectF(0, 0, 100, 30) # <---
def paint(self, painter, styles, widget=None):
painter.drawRect(self.boundingRect())
class Demo(QtWidgets.QGraphicsView):
def __init__(self):
super(Demo, self).__init__()
self.resize(300, 300)
self.scene = QtWidgets.QGraphicsScene()
self.scene.setSceneRect(0, 0, 300, 300)
self.rect = CustomRect()
self.ellipse = QtWidgets.QGraphicsEllipseItem()
self.ellipse.setRect(100, 180, 100, 50)
self.scene.addItem(self.rect)
self.scene.addItem(self.ellipse)
self.setScene(self.scene)
self.animation = QtCore.QPropertyAnimation(
self.rect,
b"pos",
duration=1000,
startValue=QtCore.QPointF(100, 30),
endValue=QtCore.QPointF(100, 90),
loopCount=-1,
)
self.animation.start()
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
demo = Demo()
demo.show()
sys.exit(app.exec_())
Modify the animation so that it does not generate the displacement:
import sys
from PyQt5 import QtCore, QtWidgets
class CustomRect(QtWidgets.QGraphicsObject):
def boundingRect(self):
return QtCore.QRectF(100, 30, 100, 30)
def paint(self, painter, styles, widget=None):
painter.drawRect(self.boundingRect())
class Demo(QtWidgets.QGraphicsView):
def __init__(self):
super(Demo, self).__init__()
self.resize(300, 300)
self.scene = QtWidgets.QGraphicsScene()
self.scene.setSceneRect(0, 0, 300, 300)
self.rect = CustomRect()
self.ellipse = QtWidgets.QGraphicsEllipseItem()
self.ellipse.setRect(100, 180, 100, 50)
self.scene.addItem(self.rect)
self.scene.addItem(self.ellipse)
self.setScene(self.scene)
self.animation = QtCore.QPropertyAnimation(
self.rect,
b"pos",
duration=1000,
startValue=QtCore.QPointF(0, 0), # <---
endValue=QtCore.QPointF(0, 60), # <---
loopCount=-1,
)
self.animation.start()
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
demo = Demo()
demo.show()
sys.exit(app.exec_())

Try it:
import sys
from PyQt5.QtCore import QPropertyAnimation, QPointF, QRectF
from PyQt5.QtWidgets import QApplication, QGraphicsEllipseItem, QGraphicsScene, QGraphicsView, \
QGraphicsObject
class CustomRect(QGraphicsObject):
def __init__(self):
super(CustomRect, self).__init__()
def boundingRect(self):
# return QRectF(100, 30, 100, 30)
return QRectF(0, 0, 100, 30) # +++
def paint(self, painter, styles, widget=None):
painter.drawRect(self.boundingRect())
class Demo(QGraphicsView):
def __init__(self):
super(Demo, self).__init__()
self.resize(300, 300)
self.scene = QGraphicsScene()
self.scene.setSceneRect(0, 0, 300, 300)
self.rect = CustomRect()
self.ellipse = QGraphicsEllipseItem()
self.ellipse.setRect(100, 180, 100, 50)
self.scene.addItem(self.rect)
self.scene.addItem(self.ellipse)
self.setScene(self.scene)
self.animation = QPropertyAnimation(self.rect, b'pos')
self.animation.setDuration(3000)
self.animation.setStartValue(QPointF(100, 30))
self.animation.setEndValue(QPointF(100, 90))
self.animation.setLoopCount(-1)
self.animation.start()
if __name__ == '__main__':
app = QApplication(sys.argv)
demo = Demo()
demo.show()
sys.exit(app.exec_())

Superposition of QWidget in PyQt5

I don't know why but my 2 custom widgets(SquareCalc, LinePainting) when i use them in QXBoxLayout(twoWidgets) , there are being superimposed each other one.
I'm using python 3.5.2 with PyQt5
This is my code:
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QColor, QPainter, QPen
from PyQt5.QtWidgets import (QApplication, QWidget,
QGridLayout, QVBoxLayout, QHBoxLayout,QLabel, QLineEdit, QPushButton)
class SquareCalc(QWidget):
def __init__(self):
super().__init__()
def initUI(self):
self.setGeometry(0,0,100,100)
self.inputLine = QLineEdit()
self.outputLine = QLineEdit()
self.outputLine.setReadOnly(True)
self.inputLine.returnPressed.connect(self.calc)
self.calcButton = QPushButton("&Calc")
self.calcButton.clicked.connect(self.calc)
lineLayout = QGridLayout()
lineLayout.addWidget(QLabel("num"), 0, 0)
lineLayout.addWidget(self.inputLine, 0, 1)
lineLayout.addWidget(QLabel("result"), 1, 0)
lineLayout.addWidget(self.outputLine, 1, 1)
buttonLayout = QHBoxLayout()
buttonLayout.addWidget(self.calcButton)
mainLayout = QVBoxLayout()
mainLayout.addLayout(lineLayout)
mainLayout.addLayout(buttonLayout)
self.setLayout(mainLayout)
def calc(self):
n = int(self.inputLine.text())
r = n**2
self.outputLine.setText(str(r))
class LinePainting(QWidget):
def __init__(self):
super().__init__()
def initPainting(self):
self.setGeometry(0, 0, 300, 300)
self.setWindowTitle('Pen styles')
mainLayout = QVBoxLayout()
mainLayout.addWidget(self)
self.show()
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)
pen.setStyle(Qt.DashLine)
qp.setPen(pen)
qp.drawLine(20, 80, 250, 80)
pen.setStyle(Qt.DashDotLine)
qp.setPen(pen)
qp.drawLine(20, 120, 250, 120)
pen.setStyle(Qt.DotLine)
qp.setPen(pen)
qp.drawLine(20, 160, 250, 160)
pen.setStyle(Qt.DashDotDotLine)
qp.setPen(pen)
qp.drawLine(20, 200, 250, 200)
pen.setStyle(Qt.CustomDashLine)
pen.setDashPattern([1, 4, 5, 4])
qp.setPen(pen)
qp.drawLine(20, 240, 250, 240)
class twoWidget(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.widget1 = SquareCalc()
self.widget2 = LinePainting()
mainLayout = QHBoxLayout()
mainLayout.addWidget(self.widget1)
mainLayout.addWidget(self.widget2)
self.setLayout(mainLayout)
self.setWindowTitle("Mix line/factorial")
self.widget2.initPainting()
self.widget1.initUI()
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
main_window = twoWidget()
main_window.setStyleSheet(open("lol.qss", "r").read())
main_window.show()
sys.exit(app.exec_())

I find the problem , i just need no put a fixed size to my widget SquareCalc,
just add
self.setFixedSize(sizeX,sizeY)
In replace of :
self.setGeometry(0, 0, 300, 300)
Just because QPainter no need to have a minimum size , on the contrary QLineEdit() and QPushButton(), yes

Using selectionChanged signal from QGraphicsScene to addRect around selected items

I am trying to draw a rect around the items that are selected in the scene (either via RubberBandDrag or ctrl+click for each item).
In order to do this I've subclassed QGraphicsScene and reimplemented the selectionChanged method to add a QGraphicsRectItem around the selected area, but for some reason, this method is not being called when items are selected or unselected in the scene. I've made sure that the items are in fact selectable.
Here is a minimal example of what I'm trying to do:
from PyQt4.QtGui import *
from PyQt4.QtCore import *
import sys
class DiagramScene(QGraphicsScene):
def __init__(self, parent=None):
super().__init__(parent)
self.selRect = None
def selectionChanged(self):
area = self.selectionArea().boundingRect()
pen = QPen()
pen.setColor(Qt.black)
pen.setStyle(Qt.DashLine)
self.selRect = self.addRect(area, pen)
if __name__ == "__main__":
app = QApplication(sys.argv)
view = QGraphicsView()
view.setDragMode(QGraphicsView.RubberBandDrag)
scene = DiagramScene()
scene.setSceneRect(0, 0, 500, 500)
rect1 = scene.addRect(20, 20, 100, 50)
rect2 = scene.addRect(80, 80, 100, 50)
rect3 = scene.addRect(140, 140, 100, 50)
rect1.setFlag(QGraphicsItem.ItemIsSelectable, True)
rect2.setFlag(QGraphicsItem.ItemIsSelectable, True)
rect3.setFlag(QGraphicsItem.ItemIsSelectable, True)
view.setScene(scene)
view.show()
sys.exit(app.exec_())

selectionChanged is a signal, not a method that you have to implement. What you need to do is to connect this signal to slot and your the implementation in the slot, so whenever the signal is emitted, your code gets executed:
from PyQt4.QtGui import *
from PyQt4.QtCore import *
import sys
class DiagramScene(QGraphicsScene):
def __init__(self, parent=None):
super().__init__(parent)
self.selRect = None
self.selectionChanged.connect(self.onSelectionChanged)
#pyqtSlot()
def onSelectionChanged(self):
area = self.selectionArea().boundingRect()
pen = QPen()
pen.setColor(Qt.black)
pen.setStyle(Qt.DashLine)
self.selRect = self.addRect(area, pen)
if __name__ == "__main__":
app = QApplication(sys.argv)
view = QGraphicsView()
view.setDragMode(QGraphicsView.RubberBandDrag)
scene = DiagramScene()
scene.setSceneRect(0, 0, 500, 500)
rect1 = scene.addRect(20, 20, 100, 50)
rect2 = scene.addRect(80, 80, 100, 50)
rect3 = scene.addRect(140, 140, 100, 50)
rect1.setFlag(QGraphicsItem.ItemIsSelectable, True)
rect2.setFlag(QGraphicsItem.ItemIsSelectable, True)
rect3.setFlag(QGraphicsItem.ItemIsSelectable, True)
view.setScene(scene)
view.show()
sys.exit(app.exec_())