Pemrograman Qt 16 – QGraphicsScene dan QGraphicsView untuk Menayangkan Gambar


Bismillahirrahmanirrahim.

Tulisan ini tersedia dalam PDF.

qt-creator-logoPembuatan suatu aplikasi image viewer dengan Qt bisa dilakukan dengan kelas QGraphicsScene dan QGraphicsView. Namun niat saya kali ini hanyalah mempersiapkan suatu penampil gambar paling dasar yang hanya bisa menayangkan gambar tanpa fungsi tambahan. Anda akan belajar bagaimana menggunakan kedua kelas tersebut di sini. Selanjutnya, saya berharap nanti bisa menulis kelanjutan dari tulisan ini agar program dapat memiliki fungsi tambahan semisal pan, zoom, rotate, dan lain-lain. Anda dapat mengunduh kode sumber dari program ini di bagian akhir tulisan. Semoga tulisan ini bermanfaat.

Spesifikasi Sistem

  • Ubuntu 12.04
  • Qt Creator 2.4.1
  • Qt 4.8

Daftar Kelas

  1. QGraphicsScene
  2. QGraphicsView
  3. QPixmap
  4. QHBoxLayout

Daftar Method

  1. addPixmap()
  2. setScene()
  3. show()
  4. setStyleSheet()
  5. setAlignMent()

Arah Tulisan Ini

Kita akan membuat sebuah jendela dengan widget yang menampilkan suatu gambar PNG. Jika gambarnya terlalu besar, otomatis akan ada scrollbar vertikal dan horizontal.

Kode

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    QGraphicsScene *qgs_simpan_gambar = new QGraphicsScene;
    QGraphicsView  *qgv_tayang_gambar = new QGraphicsView;
    QPixmap        gambarnya(":/gambar/ubuntu");

    QHBoxLayout    *layout_h          = new QHBoxLayout;

    QWidget        *widget_utama      = new QWidget;

    qgv_tayang_gambar->setAlignment(Qt::AlignLeft);

    qgs_simpan_gambar->addPixmap(gambarnya);
    qgv_tayang_gambar->setScene(qgs_simpan_gambar);         //begini cara memasukkan QGS ke QGV
    qgv_tayang_gambar->show();

    layout_h->addWidget(qgv_tayang_gambar);                 //QGV langsung masukkan ke layout gak perlu widget
    widget_utama->setLayout(layout_h);
    this->setCentralWidget(widget_utama);   //berhasil secara total tanpa perlu setSizePolicy
                                            //dicapai pada Thursday, February 06, 2014 12:11 PM
}

MainWindow::~MainWindow()
{
    delete ui;
}

Qt Creator dan Kode

apt-get-okular103

Hasil

apt-get-okular104

Analisis

mainwindow.h

Kode pada header ini tidak diubah dari default-nya. Jika belum memahami kode-kode header di Qt, silakan baca dulu tutorial pemrograman Qt pertama ini.

mainwindow.cpp

Kode pada mainwindow.cpp ini hanya memiliki dua bagian penting saja yakni pemakaian kelas QGraphicsScene dan QGrahicsView. Keduanya saya ringkas menjadi QGS dan QGV untuk memudahkan penyebutan. Selebihnya, hanya pembentukan GUI seperti biasanya. Jika belum paham bagaimana membuat GUI di Qt, silakan merujuk ke tautan tutorial pemrograman Qt pertama di atas.

Alasan digunakannya QGraphicsScene dan QGraphicsView pada aplikasi Qt adalah menayangkan gambar pada GUI. Dengan kedua kelas ini, kita bisa membuat aplikasi image viewer (semacam Gwenview atau IrfanView) atau yang semisal dengan itu. Kalau untuk saya, tentu dua kelas ini sangat berguna untuk membangun aplikasi semacam Otodidak. Dengan dua kelas ini Anda bisa menayangkan, rotate, pan, zoom, dan lain-lain selayaknya yang bisa dilakukan dengan aplikasi semacam Gwenview. Namun pada tulisan ini saya hanya fokuskan pada menayangkan gambar tanpa satu pun fungsi lainnya.

Alur pemrograman QGS dan QGV di dalam suatu program adalah: QGS digunakan terlebih dahulu baru QGV digunakan kemudian. Ini karena Anda akan mempersiapkan semua pengaturan gambar dahulu untuk QGS lalu Anda panggil QGV untuk menayangkan isi QGS. Inilah alur yang harus Anda ikuti kali ini.

QGraphicsScene *qgs_simpan_gambar = new QGraphicsScene;
QGraphicsView  *qgv_tayang_gambar = new QGraphicsView;

Dua baris di atas adalah deklarasi objek dari kelas QGS dan QGV. Caranya sama dengan deklarasi objek biasanya.

QPixmap        gambarnya(":/gambar/ubuntu");

Sebaris kode QPixmap ini gunanya untuk mempersiapkan isi QGS. Anda harus membuat variabel yang berisi gambar terlebih dahulu. Dalam hal ini, variabel gambarnya diisi oleh gambar bernama ubuntu. Tentu sebelumnya, Anda harus mengimpor gambar ke dalam proyek dulu. Cara impor gambar bisa dipelajari di tutorial Qt Creator pertama ini. Lihat pengaturan impor pada gambar di bawah ini.

apt-get-okular105

qgs_simpan_gambar->addPixmap(gambarnya);

Sebaris kode dari objek QGS di atas maksudnya memasukkan gambar yang sudah dipersiapkan tadi ke dalam QGS. Di sinilah method addPixmap() milik QGS digunakan. Dan parameternya sudah tentu variabel gambarnya yang tadi.

qgv_tayang_gambar->setScene(qgs_simpan_gambar);         //begini cara memasukkan QGS ke QGV
qgv_tayang_gambar->show();

Dua baris kode dari objek QGV di atas maksudnya untuk menayangkan gambar dari QGS. Alur kodenya selalu seperti ini, yaitu didahului dengan memasang scene dengan method setScene() lalu menayangkannya dengan method show(). Selalu seperti ini.

qgv_tayang_gambar->setAlignment(Qt::AlignLeft);

Adapun sebaris kode di atas, gunanya untuk meratakirikan tayangan gambar pada objek QGV. Parameter lain yang bisa dipakai adalah Qt::AlignRight, Qt::AlignTop, Qt::AlignBottom, dan lain-lain. Gunakan autocomplete pada Qt Creator untuk mengetahuinya.

layout_h->addWidget(qgv_tayang_gambar);

Adapun sebaris kode di atas, gunanya untuk memasangkan objek QGV ke dalam layout. Saya temukan bahwa pemasangan ini tidak membutuhkan kelas QWidget tambahan seperti biasanya. Langsung saja masukkan QGV ke dalam layout.

Kelemahan Program

Karena hanya melakukan penayangan gambar, maka program kali ini memiliki banyak kelemahan. Di antaranya yang paling tampak adalah gambar tidak rata kiri maksimal (ujung kiri atas gambar tidak ditaruh tepat ujung kiri atas QGV). Ini mengakibatkan pengguna harus scroll dulu dengan mouse untuk melihat sisi paling kiri/kanan gambar. Selain itu, belum ada fitur pan, zoom in zoom out, rotate, dan lain-lain.

Kesimpulan

  1. Alur pemrograman penayangan gambar adalah QGS kemudian QGV.
  2. QGV adalah kelas dan objek yang bersentuhan langsung dengan pengguna, sedangkan QGS bekerja di balik layar.

Unduh Kode Sumber

Program kali ini bernama PerangQGV. Dinamakan begitu karena saya menemukan kesulitan untuk membuatnya menayangkan gambar dengan tepat. Silakan unduh kode sumber ini dan bukalah di Qt Creator Anda.

  1. Alamat: http://otodidak.freeserver.me/tarball/PerangQGV.tar.gz
  2. Ukuran: 400 KB

Referensi

Dokumentasi di dalam Qt Creator sendiri mengenai QGraphicScene dan QGraphicsView.

apt-get-okular106

6 thoughts on “Pemrograman Qt 16 – QGraphicsScene dan QGraphicsView untuk Menayangkan Gambar

  1. Ping balik: Pemrograman Qt 17 – Pan, Scroll, Zoom, Flip, dan Rotate untuk QGraphicsView | Ade Malsasa Akbar

Dilarang menggunakan emotikon

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s