How to draw on Image loaded in a QGraphicsView

[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.