Qt Tutorial 4 : Paint App

Posted by Derek Banas on Jul 23, 2018 in C Video Tutorial | 0 comments

I received a bunch of questions about the Qt Paint App Example, so I decided to do a tutorial in which I explain every line of code. This paint app allows for opening, saving and printing images. You can also draw on the screen using different colors and pen widths. The are a bunch of dialogs covered as well along with numerous other topics. I provide all of the heavily commented code below for the finished app.

If you like videos like this, consider donating $1, or simply turn off Ad Blocking software. Either allows me to continue making free tutorials for all.

Code from the Video

// ---------- Qt Tutorial 4 ----------

If you get this error "Undefined symbols for architecture x86_64"
Go to /Users/derekbanas/Qt/5.11.0/clang_64/mkspecs/macx-clang/qmake.conf
and change 
QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.11
to
QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.12

// ---------- mainwindow.h ----------

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QList>
#include <QMainWindow>

// ScribbleArea used to paint the image
class ScribbleArea;

class MainWindow : public QMainWindow
{
    // Declares our class as a QObject which is the base class
    // for all Qt objects
    // QObjects handle events
    Q_OBJECT

public:
    MainWindow();

protected:
    // Function used to close an event
    void closeEvent(QCloseEvent *event) override;

// The events that can be triggered
private slots:
    void open();
    void save();
    void penColor();
    void penWidth();
    void about();

private:
    // Will tie user actions to functions
    void createActions();
    void createMenus();

    // Will check if changes have occurred since last save
    bool maybeSave();

    // Opens the Save dialog and saves
    bool saveFile(const QByteArray &fileFormat);

    // What we'll draw on
    ScribbleArea *scribbleArea;

    // The menu widgets
    QMenu *saveAsMenu;
    QMenu *fileMenu;
    QMenu *optionMenu;
    QMenu *helpMenu;

    // All the actions that can occur
    QAction *openAct;

    // Actions tied to specific file formats
    QList<QAction *> saveAsActs;
    QAction *exitAct;
    QAction *penColorAct;
    QAction *penWidthAct;
    QAction *printAct;
    QAction *clearScreenAct;
    QAction *aboutAct;
    QAction *aboutQtAct;
};

#endif

// ---------- END mainwindow.h ----------

// ---------- scribblearea.h ----------

#ifndef SCRIBBLEAREA_H
#define SCRIBBLEAREA_H

#include <QColor>
#include <QImage>
#include <QPoint>
#include <QWidget>

class ScribbleArea : public QWidget
{
    // Declares our class as a QObject which is the base class
    // for all Qt objects
    // QObjects handle events
    Q_OBJECT

public:
    ScribbleArea(QWidget *parent = 0);

    // Handles all events
    bool openImage(const QString &fileName);
    bool saveImage(const QString &fileName, const char *fileFormat);
    void setPenColor(const QColor &newColor);
    void setPenWidth(int newWidth);

    // Has the image been modified since last save
    bool isModified() const { return modified; }
    QColor penColor() const { return myPenColor; }
    int penWidth() const { return myPenWidth; }

public slots:

    // Events to handle
    void clearImage();
    void print();

protected:
    void mousePressEvent(QMouseEvent *event) override;
    void mouseMoveEvent(QMouseEvent *event) override;
    void mouseReleaseEvent(QMouseEvent *event) override;

    // Updates the scribble area where we are painting
    void paintEvent(QPaintEvent *event) override;

    // Makes sure the area we are drawing on remains
    // as large as the widget
    void resizeEvent(QResizeEvent *event) override;

private:
    void drawLineTo(const QPoint &endPoint);
    void resizeImage(QImage *image, const QSize &newSize);

    // Will be marked true or false depending on if
    // we have saved after a change
    bool modified;

    // Marked true or false depending on if the user
    // is drawing
    bool scribbling;

    // Holds the current pen width & color
    int myPenWidth;
    QColor myPenColor;

    // Stores the image being drawn
    QImage image;

    // Stores the location at the current mouse event
    QPoint lastPoint;
};

#endif

// ---------- END scribblearea.h ----------

// ---------- main.cpp ----------

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

int main(int argc, char *argv[])
{
    // The main application
    QApplication app(argc, argv);

    // Create and open the main window
    MainWindow window;
    window.show();

    // Display the main window
    return app.exec();
}

// ---------- END main.cpp ----------

// ---------- mainwindow.cpp ----------

#include <QtWidgets>

#include "mainwindow.h"
#include "scribblearea.h"

// MainWindow constructor
MainWindow::MainWindow()
{
    // Create the ScribbleArea widget and make it
    // the central widget
    scribbleArea = new ScribbleArea;
    setCentralWidget(scribbleArea);

    // Create actions and menus
    createActions();
    createMenus();

    // Set the title
    setWindowTitle(tr("Scribble"));

    // Size the app
    resize(500, 500);
}

// User tried to close the app
void MainWindow::closeEvent(QCloseEvent *event)
{
    // If they try to close maybeSave() returns true
    // if no changes have been made and the app closes
    if (maybeSave()) {
        event->accept();
    } else {

        // If there have been changes ignore the event
        event->ignore();
    }
}

// Check if the current image has been changed and then
// open a dialog to open a file
void MainWindow::open()
{
    // Check if changes have been made since last save
    // maybeSave() returns true if no changes have been made
    if (maybeSave()) {

        // Get the file to open from a dialog
        // tr sets the window title to Open File
        // QDir opens the current dirctory
        QString fileName = QFileDialog::getOpenFileName(this,
                                   tr("Open File"), QDir::currentPath());

        // If we have a file name load the image and place
        // it in the scribbleArea
        if (!fileName.isEmpty())
            scribbleArea->openImage(fileName);
    }
}

// Called when the user clicks Save As in the menu
void MainWindow::save()
{
    // A QAction represents the action of the user clicking
    QAction *action = qobject_cast<QAction *>(sender());

    // Stores the array of bytes of the users data
    QByteArray fileFormat = action->data().toByteArray();

    // Pass it to be saved
    saveFile(fileFormat);
}

// Opens a dialog to change the pen color
void MainWindow::penColor()
{
    // Store the chosen color from the dialog
    QColor newColor = QColorDialog::getColor(scribbleArea->penColor());

    // If a valid color set it
    if (newColor.isValid())
        scribbleArea->setPenColor(newColor);
}

// Opens a dialog that allows the user to change the pen width
void MainWindow::penWidth()
{
    // Stores button value
    bool ok;

    // tr("Scribble") is the title
    // the next tr is the text to display
    // Get the current pen width
    // Define the min, max, step and ok button
    int newWidth = QInputDialog::getInt(this, tr("Scribble"),
                                        tr("Select pen width:"),
                                        scribbleArea->penWidth(),
                                        1, 50, 1, &ok);
    // Change the pen width
    if (ok)
        scribbleArea->setPenWidth(newWidth);
}

// Open an about dialog
void MainWindow::about()
{
    // Window title and text to display
    QMessageBox::about(this, tr("About Scribble"),
            tr("<p>The <b>Scribble</b> example is awesome</p>"));
}

// Define menu actions that call functions
void MainWindow::createActions()
{
    // Create the action tied to the menu
    openAct = new QAction(tr("&Open..."), this);

    // Define the associated shortcut key
    openAct->setShortcuts(QKeySequence::Open);

    // Tie the action to MainWindow::open()
    connect(openAct, SIGNAL(triggered()), this, SLOT(open()));

    // Get a list of the supported file formats
    // QImageWriter is used to write images to files
    foreach (QByteArray format, QImageWriter::supportedImageFormats()) {
        QString text = tr("%1...").arg(QString(format).toUpper());

        // Create an action for each file format
        QAction *action = new QAction(text, this);

        // Set an action for each file format
        action->setData(format);

        // When clicked call MainWindow::save()
        connect(action, SIGNAL(triggered()), this, SLOT(save()));

        // Attach each file format option menu item to Save As
        saveAsActs.append(action);
    }

    // Create print action and tie to MainWindow::print()
    printAct = new QAction(tr("&Print..."), this);
    connect(printAct, SIGNAL(triggered()), scribbleArea, SLOT(print()));

    // Create exit action and tie to MainWindow::close()
    exitAct = new QAction(tr("E&xit"), this);
    exitAct->setShortcuts(QKeySequence::Quit);
    connect(exitAct, SIGNAL(triggered()), this, SLOT(close()));

    // Create pen color action and tie to MainWindow::penColor()
    penColorAct = new QAction(tr("&Pen Color..."), this);
    connect(penColorAct, SIGNAL(triggered()), this, SLOT(penColor()));

    // Create pen width action and tie to MainWindow::penWidth()
    penWidthAct = new QAction(tr("Pen &Width..."), this);
    connect(penWidthAct, SIGNAL(triggered()), this, SLOT(penWidth()));

    // Create clear screen action and tie to MainWindow::clearImage()
    clearScreenAct = new QAction(tr("&Clear Screen"), this);
    clearScreenAct->setShortcut(tr("Ctrl+L"));
    connect(clearScreenAct, SIGNAL(triggered()),
            scribbleArea, SLOT(clearImage()));

    // Create about action and tie to MainWindow::about()
    aboutAct = new QAction(tr("&About"), this);
    connect(aboutAct, SIGNAL(triggered()), this, SLOT(about()));

    // Create about Qt action and tie to MainWindow::aboutQt()
    aboutQtAct = new QAction(tr("About &Qt"), this);
    connect(aboutQtAct, SIGNAL(triggered()), qApp, SLOT(aboutQt()));
}

// Create the menubar
void MainWindow::createMenus()
{
    // Create Save As option and the list of file types
    saveAsMenu = new QMenu(tr("&Save As"), this);
    foreach (QAction *action, saveAsActs)
        saveAsMenu->addAction(action);

    // Attach all actions to File
    fileMenu = new QMenu(tr("&File"), this);
    fileMenu->addAction(openAct);
    fileMenu->addMenu(saveAsMenu);
    fileMenu->addAction(printAct);
    fileMenu->addSeparator();
    fileMenu->addAction(exitAct);

    // Attach all actions to Options
    optionMenu = new QMenu(tr("&Options"), this);
    optionMenu->addAction(penColorAct);
    optionMenu->addAction(penWidthAct);
    optionMenu->addSeparator();
    optionMenu->addAction(clearScreenAct);

    // Attach all actions to Help
    helpMenu = new QMenu(tr("&Help"), this);
    helpMenu->addAction(aboutAct);
    helpMenu->addAction(aboutQtAct);

    // Add menu items to the menubar
    menuBar()->addMenu(fileMenu);
    menuBar()->addMenu(optionMenu);
    menuBar()->addMenu(helpMenu);
}

bool MainWindow::maybeSave()
{
    // Check for changes since last save
    if (scribbleArea->isModified()) {
       QMessageBox::StandardButton ret;

       // Scribble is the title
       // Add text and the buttons
       ret = QMessageBox::warning(this, tr("Scribble"),
                          tr("The image has been modified.\n"
                             "Do you want to save your changes?"),
                          QMessageBox::Save | QMessageBox::Discard
                          | QMessageBox::Cancel);

       // If save button clicked call for file to be saved
        if (ret == QMessageBox::Save) {
            return saveFile("png");

        // If cancel do nothing
        } else if (ret == QMessageBox::Cancel) {
            return false;
        }
    }
    return true;
}

bool MainWindow::saveFile(const QByteArray &fileFormat)
{
    // Define path, name and default file type
    QString initialPath = QDir::currentPath() + "/untitled." + fileFormat;

    // Get selected file from dialog
    // Add the proper file formats and extensions
    QString fileName = QFileDialog::getSaveFileName(this, tr("Save As"),
                               initialPath,
                               tr("%1 Files (*.%2);;All Files (*)")
                               .arg(QString::fromLatin1(fileFormat.toUpper()))
                               .arg(QString::fromLatin1(fileFormat)));

    // If no file do nothing
    if (fileName.isEmpty()) {
        return false;
    } else {

        // Call for the file to be saved
        return scribbleArea->saveImage(fileName, fileFormat.constData());
    }
}

// ---------- END mainwindow.cpp ----------

// ---------- scribblearea.cpp ----------

#include <QtWidgets>
#if defined(QT_PRINTSUPPORT_LIB)
#include <QtPrintSupport/qtprintsupportglobal.h>
#if QT_CONFIG(printdialog)
#include <QPrinter>
#include <QPrintDialog>
#endif
#endif

#include "scribblearea.h"

ScribbleArea::ScribbleArea(QWidget *parent)
    : QWidget(parent)
{
    // Roots the widget to the top left even if resized
    setAttribute(Qt::WA_StaticContents);

    // Set defaults for the monitored variables
    modified = false;
    scribbling = false;
    myPenWidth = 1;
    myPenColor = Qt::blue;
}

// Used to load the image and place it in the widget
bool ScribbleArea::openImage(const QString &fileName)
{
    // Holds the image
    QImage loadedImage;

    // If the image wasn't loaded leave this function
    if (!loadedImage.load(fileName))
        return false;

    QSize newSize = loadedImage.size().expandedTo(size());
    resizeImage(&loadedImage, newSize);
    image = loadedImage;
    modified = false;
    update();
    return true;
}

// Save the current image
bool ScribbleArea::saveImage(const QString &fileName, const char *fileFormat)
{
    // Created to hold the image
    QImage visibleImage = image;
    resizeImage(&visibleImage, size());

    if (visibleImage.save(fileName, fileFormat)) {
        modified = false;
        return true;
    } else {
        return false;
    }
}

// Used to change the pen color
void ScribbleArea::setPenColor(const QColor &newColor)
{
    myPenColor = newColor;
}

// Used to change the pen width
void ScribbleArea::setPenWidth(int newWidth)
{
    myPenWidth = newWidth;
}

// Color the image area with white
void ScribbleArea::clearImage()
{
    image.fill(qRgb(255, 255, 255));
    modified = true;
    update();
}

// If a mouse button is pressed check if it was the
// left button and if so store the current position
// Set that we are currently drawing
void ScribbleArea::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        lastPoint = event->pos();
        scribbling = true;
    }
}

// When the mouse moves if the left button is clicked
// we call the drawline function which draws a line
// from the last position to the current
void ScribbleArea::mouseMoveEvent(QMouseEvent *event)
{
    if ((event->buttons() & Qt::LeftButton) && scribbling)
        drawLineTo(event->pos());
}

// If the button is released we set variables to stop drawing
void ScribbleArea::mouseReleaseEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton && scribbling) {
        drawLineTo(event->pos());
        scribbling = false;
    }
}

// QPainter provides functions to draw on the widget
// The QPaintEvent is sent to widgets that need to
// update themselves
void ScribbleArea::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);

    // Returns the rectangle that needs to be updated
    QRect dirtyRect = event->rect();

    // Draws the rectangle where the image needs to
    // be updated
    painter.drawImage(dirtyRect, image, dirtyRect);
}

// Resize the image to slightly larger then the main window
// to cut down on the need to resize the image
void ScribbleArea::resizeEvent(QResizeEvent *event)
{
    if (width() > image.width() || height() > image.height()) {
        int newWidth = qMax(width() + 128, image.width());
        int newHeight = qMax(height() + 128, image.height());
        resizeImage(&image, QSize(newWidth, newHeight));
        update();
    }
    QWidget::resizeEvent(event);
}

void ScribbleArea::drawLineTo(const QPoint &endPoint)
{
    // Used to draw on the widget
    QPainter painter(&image);

    // Set the current settings for the pen
    painter.setPen(QPen(myPenColor, myPenWidth, Qt::SolidLine, Qt::RoundCap,
                        Qt::RoundJoin));

    // Draw a line from the last registered point to the current
    painter.drawLine(lastPoint, endPoint);

    // Set that the image hasn't been saved
    modified = true;

    int rad = (myPenWidth / 2) + 2;

    // Call to update the rectangular space where we drew
    update(QRect(lastPoint, endPoint).normalized()
                                     .adjusted(-rad, -rad, +rad, +rad));

    // Update the last position where we left off drawing
    lastPoint = endPoint;
}

// When the app is resized create a new image using
// the changes made to the image
void ScribbleArea::resizeImage(QImage *image, const QSize &newSize)
{
    // Check if we need to redraw the image
    if (image->size() == newSize)
        return;

    // Create a new image to display and fill it with white
    QImage newImage(newSize, QImage::Format_RGB32);
    newImage.fill(qRgb(255, 255, 255));

    // Draw the image
    QPainter painter(&newImage);
    painter.drawImage(QPoint(0, 0), *image);
    *image = newImage;
}

// Print the image
void ScribbleArea::print()
{
    // Check for print dialog availability
#if QT_CONFIG(printdialog)

    // Can be used to print
    QPrinter printer(QPrinter::HighResolution);

    // Open printer dialog and print if asked
    QPrintDialog printDialog(&printer, this);
    if (printDialog.exec() == QDialog::Accepted) {
        QPainter painter(&printer);
        QRect rect = painter.viewport();
        QSize size = image.size();
        size.scale(rect.size(), Qt::KeepAspectRatio);
        painter.setViewport(rect.x(), rect.y(), size.width(), size.height());
        painter.setWindow(image.rect());
        painter.drawImage(0, 0, image);
    }
#endif // QT_CONFIG(printdialog)
}

// ---------- END scribblearea.cpp ----------

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

// ---------- Qt Tutorial 4 ----------

If you get this error "Undefined symbols for architecture x86_64"

Go to /Users/derekbanas/Qt/5.11.0/clang_64/mkspecs/macx-clang/qmake.conf

and change

QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.11

QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.12

// ---------- mainwindow.h ----------

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

#include <QList>

#include <QMainWindow>

// ScribbleArea used to paint the image

class ScribbleArea;

class MainWindow : public QMainWindow

{

// Declares our class as a QObject which is the base class

// for all Qt objects

// QObjects handle events

Q_OBJECT

public:

MainWindow();

protected:

// Function used to close an event

void closeEvent(QCloseEvent *event) override;

// The events that can be triggered

private slots:

void open();

void save();

void penColor();

void penWidth();

void about();

private:

// Will tie user actions to functions

void createActions();

void createMenus();

// Will check if changes have occurred since last save

bool maybeSave();

// Opens the Save dialog and saves

bool saveFile(const QByteArray &fileFormat);

// What we'll draw on

ScribbleArea *scribbleArea;

// The menu widgets

QMenu *saveAsMenu;

QMenu *fileMenu;

QMenu *optionMenu;

QMenu *helpMenu;

// All the actions that can occur

QAction *openAct;

// Actions tied to specific file formats

QList<QAction *> saveAsActs;

QAction *exitAct;

QAction *penColorAct;

QAction *penWidthAct;

QAction *printAct;

QAction *clearScreenAct;

QAction *aboutAct;

QAction *aboutQtAct;

};

#endif

// ---------- END mainwindow.h ----------

// ---------- scribblearea.h ----------

#ifndef SCRIBBLEAREA_H

#define SCRIBBLEAREA_H

#include <QColor>

#include <QImage>

#include <QPoint>

#include <QWidget>

class ScribbleArea : public QWidget

{

// Declares our class as a QObject which is the base class

// for all Qt objects

// QObjects handle events

Q_OBJECT

public:

ScribbleArea(QWidget *parent = 0);

// Handles all events

bool openImage(const QString &fileName);

bool saveImage(const QString &fileName, const char *fileFormat);

void setPenColor(const QColor &newColor);

void setPenWidth(int newWidth);

// Has the image been modified since last save

bool isModified() const { return modified; }

QColor penColor() const { return myPenColor; }

int penWidth() const { return myPenWidth; }

public slots:

// Events to handle

void clearImage();

void print();

protected:

void mousePressEvent(QMouseEvent *event) override;

void mouseMoveEvent(QMouseEvent *event) override;

void mouseReleaseEvent(QMouseEvent *event) override;

// Updates the scribble area where we are painting

void paintEvent(QPaintEvent *event) override;

// Makes sure the area we are drawing on remains

// as large as the widget

void resizeEvent(QResizeEvent *event) override;

private:

void drawLineTo(const QPoint &endPoint);

void resizeImage(QImage *image, const QSize &newSize);

// Will be marked true or false depending on if

// we have saved after a change

bool modified;

// Marked true or false depending on if the user

// is drawing

bool scribbling;

// Holds the current pen width & color

int myPenWidth;

QColor myPenColor;

// Stores the image being drawn

QImage image;

// Stores the location at the current mouse event

QPoint lastPoint;

};

#endif

// ---------- END scribblearea.h ----------

// ---------- main.cpp ----------

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])

{

// The main application

QApplication app(argc, argv);

// Create and open the main window

MainWindow window;

window.show();

// Display the main window

return app.exec();

}

// ---------- END main.cpp ----------

// ---------- mainwindow.cpp ----------

#include <QtWidgets>

#include "mainwindow.h"

#include "scribblearea.h"

// MainWindow constructor

MainWindow::MainWindow()

{

// Create the ScribbleArea widget and make it

// the central widget

scribbleArea = new ScribbleArea;

setCentralWidget(scribbleArea);

// Create actions and menus

createActions();

createMenus();

// Set the title

setWindowTitle(tr("Scribble"));

// Size the app

resize(500, 500);

}

// User tried to close the app

void MainWindow::closeEvent(QCloseEvent *event)

{

// If they try to close maybeSave() returns true

// if no changes have been made and the app closes

if (maybeSave()) {

event->accept();

} else {

// If there have been changes ignore the event

event->ignore();

}

// Check if the current image has been changed and then

// open a dialog to open a file

void MainWindow::open()

{

// Check if changes have been made since last save

// maybeSave() returns true if no changes have been made

if (maybeSave()) {

// Get the file to open from a dialog

// tr sets the window title to Open File

// QDir opens the current dirctory

QString fileName = QFileDialog::getOpenFileName(this,

tr("Open File"), QDir::currentPath());

// If we have a file name load the image and place

// it in the scribbleArea

if (!fileName.isEmpty())

scribbleArea->openImage(fileName);

}

// Called when the user clicks Save As in the menu

void MainWindow::save()

{

// A QAction represents the action of the user clicking

QAction *action = qobject_cast<QAction *>(sender());

// Stores the array of bytes of the users data

QByteArray fileFormat = action->data().toByteArray();

// Pass it to be saved

saveFile(fileFormat);

}

// Opens a dialog to change the pen color

void MainWindow::penColor()

{

// Store the chosen color from the dialog

QColor newColor = QColorDialog::getColor(scribbleArea->penColor());

// If a valid color set it

if (newColor.isValid())

scribbleArea->setPenColor(newColor);

}

// Opens a dialog that allows the user to change the pen width

void MainWindow::penWidth()

{

// Stores button value

bool ok;

// tr("Scribble") is the title

// the next tr is the text to display

// Get the current pen width

// Define the min, max, step and ok button

int newWidth = QInputDialog::getInt(this, tr("Scribble"),

tr("Select pen width:"),

scribbleArea->penWidth(),

1, 50, 1, &ok);

// Change the pen width

if (ok)

scribbleArea->setPenWidth(newWidth);

}

// Open an about dialog

void MainWindow::about()

{

// Window title and text to display

QMessageBox::about(this, tr("About Scribble"),

tr("<p>The <b>Scribble</b> example is awesome</p>"));

}

// Define menu actions that call functions

void MainWindow::createActions()

{

// Create the action tied to the menu

openAct = new QAction(tr("&Open..."), this);

// Define the associated shortcut key

openAct->setShortcuts(QKeySequence::Open);

// Tie the action to MainWindow::open()

connect(openAct, SIGNAL(triggered()), this, SLOT(open()));

// Get a list of the supported file formats

// QImageWriter is used to write images to files

foreach (QByteArray format, QImageWriter::supportedImageFormats()) {

QString text = tr("%1...").arg(QString(format).toUpper());

// Create an action for each file format

QAction *action = new QAction(text, this);

// Set an action for each file format

action->setData(format);

// When clicked call MainWindow::save()

connect(action, SIGNAL(triggered()), this, SLOT(save()));

// Attach each file format option menu item to Save As

saveAsActs.append(action);

}

// Create print action and tie to MainWindow::print()

printAct = new QAction(tr("&Print..."), this);

connect(printAct, SIGNAL(triggered()), scribbleArea, SLOT(print()));

// Create exit action and tie to MainWindow::close()

exitAct = new QAction(tr("E&xit"), this);

exitAct->setShortcuts(QKeySequence::Quit);

connect(exitAct, SIGNAL(triggered()), this, SLOT(close()));

// Create pen color action and tie to MainWindow::penColor()

penColorAct = new QAction(tr("&Pen Color..."), this);

connect(penColorAct, SIGNAL(triggered()), this, SLOT(penColor()));

// Create pen width action and tie to MainWindow::penWidth()

penWidthAct = new QAction(tr("Pen &Width..."), this);

connect(penWidthAct, SIGNAL(triggered()), this, SLOT(penWidth()));

// Create clear screen action and tie to MainWindow::clearImage()

clearScreenAct = new QAction(tr("&Clear Screen"), this);

clearScreenAct->setShortcut(tr("Ctrl+L"));

connect(clearScreenAct, SIGNAL(triggered()),

scribbleArea, SLOT(clearImage()));

// Create about action and tie to MainWindow::about()

aboutAct = new QAction(tr("&About"), this);

connect(aboutAct, SIGNAL(triggered()), this, SLOT(about()));

// Create about Qt action and tie to MainWindow::aboutQt()

aboutQtAct = new QAction(tr("About &Qt"), this);

connect(aboutQtAct, SIGNAL(triggered()), qApp, SLOT(aboutQt()));

}

// Create the menubar

void MainWindow::createMenus()

{

// Create Save As option and the list of file types

saveAsMenu = new QMenu(tr("&Save As"), this);

foreach (QAction *action, saveAsActs)

saveAsMenu->addAction(action);

// Attach all actions to File

fileMenu = new QMenu(tr("&File"), this);

fileMenu->addAction(openAct);

fileMenu->addMenu(saveAsMenu);

fileMenu->addAction(printAct);

fileMenu->addSeparator();

fileMenu->addAction(exitAct);

// Attach all actions to Options

optionMenu = new QMenu(tr("&Options"), this);

optionMenu->addAction(penColorAct);

optionMenu->addAction(penWidthAct);

optionMenu->addSeparator();

optionMenu->addAction(clearScreenAct);

// Attach all actions to Help

helpMenu = new QMenu(tr("&Help"), this);

helpMenu->addAction(aboutAct);

helpMenu->addAction(aboutQtAct);

// Add menu items to the menubar

menuBar()->addMenu(fileMenu);

menuBar()->addMenu(optionMenu);

menuBar()->addMenu(helpMenu);

}

bool MainWindow::maybeSave()

{

// Check for changes since last save

if (scribbleArea->isModified()) {

QMessageBox::StandardButton ret;

// Scribble is the title

// Add text and the buttons

ret = QMessageBox::warning(this, tr("Scribble"),

tr("The image has been modified.\n"

"Do you want to save your changes?"),

QMessageBox::Save | QMessageBox::Discard

| QMessageBox::Cancel);

// If save button clicked call for file to be saved

if (ret == QMessageBox::Save) {

return saveFile("png");

// If cancel do nothing

} else if (ret == QMessageBox::Cancel) {

return false;

}

return true;

}

bool MainWindow::saveFile(const QByteArray &fileFormat)

{

// Define path, name and default file type

QString initialPath = QDir::currentPath() + "/untitled." + fileFormat;

// Get selected file from dialog

// Add the proper file formats and extensions

QString fileName = QFileDialog::getSaveFileName(this, tr("Save As"),

initialPath,

tr("%1 Files (*.%2);;All Files (*)")

.arg(QString::fromLatin1(fileFormat.toUpper()))

.arg(QString::fromLatin1(fileFormat)));

// If no file do nothing

if (fileName.isEmpty()) {

return false;

} else {

// Call for the file to be saved

return scribbleArea->saveImage(fileName, fileFormat.constData());

}

// ---------- END mainwindow.cpp ----------

// ---------- scribblearea.cpp ----------

#include <QtWidgets>

#if defined(QT_PRINTSUPPORT_LIB)

#include <QtPrintSupport/qtprintsupportglobal.h>

#if QT_CONFIG(printdialog)

#include <QPrinter>

#include <QPrintDialog>

#endif

#include "scribblearea.h"

ScribbleArea::ScribbleArea(QWidget *parent)

: QWidget(parent)

{

// Roots the widget to the top left even if resized

setAttribute(Qt::WA_StaticContents);

// Set defaults for the monitored variables

modified = false;

scribbling = false;

myPenWidth = 1;

myPenColor = Qt::blue;

}

// Used to load the image and place it in the widget

bool ScribbleArea::openImage(const QString &fileName)

{

// Holds the image

QImage loadedImage;

// If the image wasn't loaded leave this function

if (!loadedImage.load(fileName))

return false;

QSize newSize = loadedImage.size().expandedTo(size());

resizeImage(&loadedImage, newSize);

image = loadedImage;

modified = false;

update();

return true;

}

// Save the current image

bool ScribbleArea::saveImage(const QString &fileName, const char *fileFormat)

{

// Created to hold the image

QImage visibleImage = image;

resizeImage(&visibleImage, size());

if (visibleImage.save(fileName, fileFormat)) {

modified = false;

return true;

} else {

return false;

}

// Used to change the pen color

void ScribbleArea::setPenColor(const QColor &newColor)

{

myPenColor = newColor;

}

// Used to change the pen width

void ScribbleArea::setPenWidth(int newWidth)

{

myPenWidth = newWidth;

}

// Color the image area with white

void ScribbleArea::clearImage()

{

image.fill(qRgb(255, 255, 255));

modified = true;

update();

}

// If a mouse button is pressed check if it was the

// left button and if so store the current position

// Set that we are currently drawing

void ScribbleArea::mousePressEvent(QMouseEvent *event)

{

if (event->button() == Qt::LeftButton) {

lastPoint = event->pos();

scribbling = true;

}

// When the mouse moves if the left button is clicked

// we call the drawline function which draws a line

// from the last position to the current

void ScribbleArea::mouseMoveEvent(QMouseEvent *event)

{

if ((event->buttons() & Qt::LeftButton) && scribbling)

drawLineTo(event->pos());

}

// If the button is released we set variables to stop drawing

void ScribbleArea::mouseReleaseEvent(QMouseEvent *event)

{

if (event->button() == Qt::LeftButton && scribbling) {

drawLineTo(event->pos());

scribbling = false;

}

// QPainter provides functions to draw on the widget

// The QPaintEvent is sent to widgets that need to

// update themselves

void ScribbleArea::paintEvent(QPaintEvent *event)

{

QPainter painter(this);

// Returns the rectangle that needs to be updated

QRect dirtyRect = event->rect();

// Draws the rectangle where the image needs to

// be updated

painter.drawImage(dirtyRect, image, dirtyRect);

}

// Resize the image to slightly larger then the main window

// to cut down on the need to resize the image

void ScribbleArea::resizeEvent(QResizeEvent *event)

{

if (width() > image.width() || height() > image.height()) {

int newWidth = qMax(width() + 128, image.width());

int newHeight = qMax(height() + 128, image.height());

resizeImage(&image, QSize(newWidth, newHeight));

update();

}

QWidget::resizeEvent(event);

}

void ScribbleArea::drawLineTo(const QPoint &endPoint)

{

// Used to draw on the widget

QPainter painter(&image);

// Set the current settings for the pen

painter.setPen(QPen(myPenColor, myPenWidth, Qt::SolidLine, Qt::RoundCap,

Qt::RoundJoin));

// Draw a line from the last registered point to the current

painter.drawLine(lastPoint, endPoint);

// Set that the image hasn't been saved

modified = true;

int rad = (myPenWidth / 2) + 2;

// Call to update the rectangular space where we drew

update(QRect(lastPoint, endPoint).normalized()

.adjusted(-rad, -rad, +rad, +rad));

// Update the last position where we left off drawing

lastPoint = endPoint;

}

// When the app is resized create a new image using

// the changes made to the image

void ScribbleArea::resizeImage(QImage *image, const QSize &newSize)

{

// Check if we need to redraw the image

if (image->size() == newSize)

return;

// Create a new image to display and fill it with white

QImage newImage(newSize, QImage::Format_RGB32);

newImage.fill(qRgb(255, 255, 255));

// Draw the image

QPainter painter(&newImage);

painter.drawImage(QPoint(0, 0), *image);

*image = newImage;

}

// Print the image

void ScribbleArea::print()

{

// Check for print dialog availability

#if QT_CONFIG(printdialog)

// Can be used to print

QPrinter printer(QPrinter::HighResolution);

// Open printer dialog and print if asked

QPrintDialog printDialog(&printer, this);

if (printDialog.exec() == QDialog::Accepted) {

QPainter painter(&printer);

QRect rect = painter.viewport();

QSize size = image.size();

size.scale(rect.size(), Qt::KeepAspectRatio);

painter.setViewport(rect.x(), rect.y(), size.width(), size.height());

painter.setWindow(image.rect());

painter.drawImage(0, 0, image);

}

#endif // QT_CONFIG(printdialog)

}

// ---------- END scribblearea.cpp ----------

	Facebook
	YouTube
	Twitter
	LinkedIn

Qt Tutorial 4 : Paint App

Leave a Reply Cancel reply