Fast drawing on a qDeclarativeItem - c++

Question

Let's say we have 2 qDeclarativeItem's laying on top of each other. Bottom item contains a background image (most of the time remaining unchanged). Top item contains a bunch of simple items (lines, arcs...) that can be directly edited by using a mouse.
Problem:
When painting on top layer, buttom layer is fully repainted too. Considering that I'm having a large image there, repainting it is very slow.
As an example of above said, here is some code.
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QmlApplicationViewer viewer;
qmlRegisterType<BottomLayer>("Layer", 1, 0, "BottomLayer");
qmlRegisterType<UpperLayer>("Layer", 1, 0, "UpperLayer");
viewer.setMainQmlFile(QLatin1String("qml/main.qml"));
viewer.setViewportUpdateMode(QGraphicsView::MinimalViewportUpdate);
viewer.showExpanded();
return app.exec();
}
Background layer (painting the background image):
BottomLayer::BottomLayer(QDeclarativeItem *parent) : QDeclarativeItem(parent)
{
setFlag(QGraphicsItem::ItemHasNoContents, false);
image.load( "../img.png");
}
void BottomLayer::paint(QPainter* painter,const QStyleOptionGraphicsItem* option, QWidget* widget)
{
painter->drawImage( QRectF(0, 0, 1920, 1080), image );
}
Foreground layer (drawing lines):
UpperLayer::UpperLayer(QDeclarativeItem *parent) : QDeclarativeItem(parent)
{
setFlag(QGraphicsItem::ItemHasNoContents, false);
}
void UpperLayer::mousePosCanvasChanged(QPoint pos)
{
p2 = pos;
if(drawing)
update();
}
void UpperLayer::mouseDownCanvasChanged(QPoint pos)
{
p1 = pos;
drawing = true;
}
void UpperLayer::mouseUpCanvasChanged(QPoint pos)
{
drawing = false;
}
void UpperLayer::paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget)
{
QPen pen(Qt::red, 3, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
painter->setPen(pen);
painter->drawLine(p1, p2);
}
QML code
Rectangle {
width: 1920
height: 1080
color: "transparent"
MouseArea {
anchors.fill: parent
onMousePositionChanged: upper_layer.mousePosCanvasChanged(Qt.point(mouseX,mouseY));
onPressed: upper_layer.mouseDownCanvasChanged(Qt.point(mouseX,mouseY))
onReleased: upper_layer.mouseUpCanvasChanged(Qt.point(mouseX,mouseY))
}
BottomLayer{
anchors.fill: parent
}
UpperLayer {
id: upper_layer
anchors.fill: parent
}
}
What did I try:
I tried painting everything right on the screen with viewer.setAttribute(Qt::WA_PaintOnScreen, true), so I can avoid buffering overhead. This gives me the desired frame rate, but everything becomes flickery.
I thought about using the background image as a buffer and do the painting right on it. Considering that sometimes I have to clean after myself (ex. movind the item on the screen), this approach becomes too complex and unjustified.
I tried doing it with Graphics View Framework, so I can limit the repaint area to foreground item's clip rectangle. This however does not work as desired. If f.ex. I have a line going from top-left to bottom-right corner, the clipRectangle covers the whole image (everything is slow again).
I tried calculating the clipRectangle for every foreground item and passing it to update(QRect) and update(QRegion). This gives me the same performance as GraphicsViewFramework, but, now I can divide my items in several rectangles, repaint each separately and get an even smaller repaint area. If I go further with this approach, I can update every item pixel-by-pixel and avoid background repainting at all. However, I have a feeling that I'm doing something wrong. If it is possible to do it this way, isn't there something in Qt that can do everything for me?
P.S. If you have some other ideas that I can try, I'm interested to hear (read) them.

Answer 1

If the image is below all items and doesn't need to be moved, you could probably draw it in QGraphicsView'::drawBackground()