How to draw on Image loaded in a QGraphicsView

Nico1564

@kenchan this code is only the code that I have download. And yes in fact, there is 2 images, 1 is a grey background (set by the foncion setImageFromRawData) and the second is and image that i choose with this code in the QtGuiApplication1.cpp :

        QString fichier = QFileDialog::getOpenFileName(this, "Ouvrir un fichier", QString(), "Images (*.png *.gif *.jpg *.jpeg)");
	if (fichier.isEmpty())
	{
		QMessageBox::critical(this, "Erreur", "Erreur dans la selection de l'image");
	}
	else
	{
		QMessageBox::information(this, "Fichier", "Vous avez selectionne :\n" + fichier);
		imgWidget->setImage(QImage(fichier));
		ui.horizontalLayout->addWidget(imgWidget);

ui.horizontalLayout is a Layout in my MainWindow

Do you think that I can put my "draws" converted in QImages with the same type of lines ?

kenchan

@Nico1564
I don't understand what you mean by this:
"Do you think that I can put my "draws" converted in QImages with the same type of lines ?"
You should be able to just draw on top of previously dawn items. That is the natural draw order for a QGraphicsScene. I can't see why it will not do this for you. I must look more closely at your code.
Can you post a screen shot of how it appears now?

Nico1564

in fact i just begin the c++ programming, and i'm a little lost. I know how to draw but in this case, i don't know where because i don't want to draw in the scene but on the (real) Image (not the background)

What i wanted to say is that, if i recall SetImage(....) in my QtGuiApplication1, does the previous picture will be replaced by the new one or not ?

I could not upload all my code for confidentials reason, so let me some times to hide somes lines pls

kenchan

@Nico1564
Ah, you say you don't want to draw in the scene but draw something on the actual image and then put that in the scene?
OK, you could make a painter draw on the image then draw other things on the image using the painter. Then you could draw the resulting image in the scene, if that is what you mean.
have a function to draw on the image something like this, then put the image in the scene.

    QImage image(512,512,QImage::Format_RGBA8888);
    image.fill(QColor(128,128,128));
    QPainter painter(&image);
    //...
    //draw something on the image
    painter.drawRect(200,200,200,200);
    //...
    painter.end();

Nico1564

Ok so to do that, i should modify this part of the QtGuiApplication.cpp ?

	QString fichier = QFileDialog::getOpenFileName(this, "Ouvrir un fichier", QString(), "Images (*.png *.gif *.jpg *.jpeg)");
	if (fichier.isEmpty())
	{
		QMessageBox::critical(this, "Erreur", "Erreur dans la selection de l'image");
	}
	else
	{
		QMessageBox::information(this, "Fichier", "Vous avez selectionne :\n" + fichier);
		//create painter with fichier then draw my circle on this painter
		imgWidget->setImage(QImage(fichier));
		ui.horizontalLayout->addWidget(imgWidget);
		defCoos();
	}

Another question on my circle, once I have drawn it, I could not delete it right ? Or there is a system of layer with QPainter or QImage like we should find in Photoshop for exemple?

kenchan

@Nico1564
I just edited my last reply with some code to paint on an image. Use an image format which works best for your needs.
No, using a painter you can't delete only overwrite. That is the difference between a painter and a scene.
If you manage your own primitives you can repaint the image when you need to I suppose.
They are low level things you are supposed to add the high level stuff like a Photoshop app does :-)

kenchan

@Nico1564
I just built that sample you used. If you draw something with the painter in the drawOnImage() function you will see it drawn on top of the image.

Nico1564

@kenchan yes i just test it but it overwrite the first image (wich is a map, let's call it like this if you agree), so i have to set the backgroud of the draw to transparent
EDIT : even setting the background transparent, the map disappear

kenchan

@Nico1564
Hm, well i just made the sample load the Qt image in the constructor. Then drew a rectangle with the painter in the drawOnImage() functions. That function gets called from the drawForeground() function so it gets refreshed all the time.
You draw another image but that should get over written by what ever is drawn in the drawOnImage(). Now, I am not sure when you are calling the setBackgroundBrush() function but I would suggest you only call that before you do any other drawing and not after, just to be on the safe side.

Asperamanca

@Nico1564 said in How to draw on Image loaded in a QGraphicsView:

Ok so to do that, i should modify this part of the QtGuiApplication.cpp ?
	QString fichier = QFileDialog::getOpenFileName(this, "Ouvrir un fichier", QString(), "Images (*.png *.gif *.jpg *.jpeg)");
	if (fichier.isEmpty())
	{
		QMessageBox::critical(this, "Erreur", "Erreur dans la selection de l'image");
	}
	else
	{
		QMessageBox::information(this, "Fichier", "Vous avez selectionne :\n" + fichier);
		//create painter with fichier then draw my circle on this painter
		imgWidget->setImage(QImage(fichier));
		ui.horizontalLayout->addWidget(imgWidget);
		defCoos();
	}
Another question on my circle, once I have drawn it, I could not delete it right ? Or there is a system of layer with QPainter or QImage like we should find in Photoshop for exemple?

If you want to work with something like layers, then you should not modify the image. GraphicsView is a framework that allows you to create multiple visual objects (images, circles, rectangles, texts,...) and manipulate them individually. You can move objects along x/y axis, you can define a z-order (which object is drawn on top, which below, etc.), and you can define transformations (scaling, rotating,...). You can group objects to they can be manipulated together. A bit like Powerpoint, really, but with code.

For what you want, it would make sense to create the image, and then a separate circle (QGraphicsEllipseItem) on top of it. Want to delete the circle later on? Just delete the QGraphicsEllipseItem, and your image stays.

I recommend reading about the basics of the QGraphicsView framework: https://doc.qt.io/qt-5/graphicsview.html

Nico1564

Ok I have understand (i think) so I just try something in a new project (to see if i have really understood) but I failed and now I'm depressed .... :(

here is my new code :

testGraphicView.cpp

#include "testGraphicView.h"

testGraphicView::testGraphicView(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	scene = new QGraphicsScene(this);
	ui.graphicsView->setScene(scene);
	connect(ui.pushButton, SIGNAL(triggered), this, SLOT(Circle()));
}

void testGraphicView::Circle()
{
	ellipse = scene->addEllipse(10, 10, 100, 100);

}

testGraphicView.h

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_testGraphicView.h"
#include <QGraphicsView>


class testGraphicView : public QMainWindow
{
	Q_OBJECT

public:
	testGraphicView(QWidget *parent = Q_NULLPTR);

public slots :
	void Circle();

private:
	Ui::testGraphicViewClass ui;
	QGraphicsScene *scene;
	QGraphicsEllipseItem *ellipse;

};

kenchan

@Nico1564 No no, That is not going to work. A QMainWindow is not going to work because it is not a QGraphicsView.
You must but your QGraphicsView in the central widget of the main window, like the sample you used did.
The sample is not a bad start but you should simplify it by just removing the functions you don't need for now.

kenchan

@Nico1564
I would suggest you don't call the drawOnImage(painter,imageSize); function.
Don't add the initial image, just the one you want to add the way you want to add it.
Add a function to your rOg_image to add the circle or whatever you want to draw on your image, or just draw it directly with the scene functions. Draw it after you have loaded your image.
Call the draw function you made after you load and draw the image.
Then you should see what ever you draw on top of the image and you will be able to zoom and scroll after you have zoomed in on the scene.
Please do as @Asperamanca suggested and read up on the docs for the QGraphicsView and QGraphicsScene.

Asperamanca

Here's a minimal GraphicsView sample, that draws an Ellipse:

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QGraphicsView>
#include <QGraphicsScene>

class MainWindow : public QWidget
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    QGraphicsScene* m_pScene;
    QGraphicsView* m_pView;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QGraphicsEllipseItem>

MainWindow::MainWindow(QWidget *parent)
    : QWidget(parent)
{
    m_pScene = new QGraphicsScene(0,0,800,480,this);

    m_pView = new QGraphicsView(m_pScene, this);
    m_pView->setFrameStyle(QFrame::NoFrame);
    m_pView->setGeometry(0,0,800,480);
    m_pView->setAutoFillBackground(false);
    m_pView->show();

    // Add your image here, as a QGraphicsPixmapItem, and it will be drawn below the ellipse
    QGraphicsEllipseItem* testItem = new QGraphicsEllipseItem(20,30,120,70,0);
    m_pScene->addItem(testItem);
}

MainWindow::~MainWindow()
{
}

main.cpp

#include <QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

Maybe you can go from there

Nico1564

Yeah i know that this work but i need to draw with fonctions. I successed to do that but I don't want to have the GraphicsView at the beginning of the program, and i want to add draws like an Ellipse (and the image) when i click on buttons.

kenchan

@Nico1564
Because you have a main window you can add menus, toolbars with buttons or dock widget with buttons. You can make these buttons and menus call your daw functions or what ever you want.
The sample you used is a good basis to start from. the sample that @Asperamanca has posted is also a good basis to start from. Now it is up to you to study the docs for the gui elements and do what you need to do.

Asperamanca

@Nico1564 said in How to draw on Image loaded in a QGraphicsView:

Yeah i know that this work but i need to draw with fonctions. I successed to do that but I don't want to have the GraphicsView at the beginning of the program, and i want to add draws like an Ellipse (and the image) when i click on buttons.

These lines could just as well happen inside a button click

    QGraphicsEllipseItem* testItem = new QGraphicsEllipseItem(20,30,120,70,0);
    m_pScene->addItem(testItem);

In that case, you would create an ellipse every time you pressed that button.

I don't quite understand the "I don't want to have the GraphicsView at the beginning of the program" - maybe you could elaborate on that.

QtWS: Super Early Bird Tickets Available!

How to draw on Image loaded in a QGraphicsView