Tag Archives: Grafika

Membuat Paint App dengan C# dan GDI+ (Part 1)

Posted on by
Reply

Sesudah anda membaca tutorial saya yang sebelumnya tentang pemrograman GDI+ dengan C# Part 1 dan 2 maka pada kesempatan ini saya akan melanjutkannya dengan membuat sebuah contoh yang simple agar penerapan GDI+ menjadi lebih mudah untuk dimengerti

Pada tutorial kali ini saya akan mengajak anda untuk mencoba beberapa fitur yang ditawarkan oleh library GDI+ dan C# untuk membuat sebuah aplikasi pengolah citra yang sederhana (mirip aplikasi paint). Aplikasi ini juga saya gunakan sebagai tugas untuk mahasiswa yang mengambil matakuliah komputer grafis.

Untuk membuat aplikasi ini pertama-tama anda harus membuat design form sebagai berikut:

image 

kemudian deklarasikan beberapa variabel yang akan digunakan pada aplikasi ini

private Bitmap bitmap = null;
private Bitmap curBitmap = null;
private bool dragMode = false;
private bool boolFill = false;
private int drawIndex = 1;
private int curX, curY, x, y;
private int diffX, diffY;
private Graphics curGraphics;
public Pen curPen;
private SolidBrush curBrush;
private Size fullSize;

private Color borderColor = Color.Black;
private Color fillColor = Color.White;

private Image currImage = null;
private string currFilename = "";

pada saat form di load buat object Bitmap dan Graphic sebagai berikut, 

private void Form1_Load(object sender, EventArgs e)
{
    //cek ukuran display monitor
    fullSize = SystemInformation.PrimaryMonitorMaximizedWindowSize;
    //buat object bitmap baru
    bitmap = new Bitmap(fullSize.Width,fullSize.Height);
    //buat object graphic baru
    curGraphics = Graphics.FromImage(bitmap);
    curPen = new Pen(Color.Black);
    curBrush = new SolidBrush(Color.Black);
}

pada saat event MouseDown pada form simpan titik (x,y)

private void Form1_MouseDown(object sender, MouseEventArgs e)
{
    curX = e.X;
    curY = e.Y;
    dragMode = true;
}

pada saat event MouseMove, hitung height dan width dari titik awak ke titik akhir

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    x = e.X;
    y = e.Y;
    //hitung beda antara titik awal dan akhir(pada saat move)
    diffX = e.X - curX;
    diffY = e.Y - curY;

    if (dragMode)
    {
        this.Refresh();
    }
}

Pada saat event MouseUp gambar dulu objectnya (rectangle, pen, atau, ellipse). Penggambaran object ini bukan di form melainkan pada object Graphic yang akan digunakan sebagai background agar setelah digambar object gambar yang lama tidak hilang.

private void Form1_MouseUp(object sender, MouseEventArgs e)
{
    diffX = x - curX;
    diffY = y - curY;

    switch (drawIndex)
    {
        case 1:
            //gambar garis
            curGraphics.DrawLine(curPen, curX, curY, x, y);
            break;
        case 2:
            //gambar ellipse
                curGraphics.DrawEllipse(curPen, curX, curY, diffX, diffY);
            break;
        case 3:
            //gambar kotak
                curGraphics.DrawRectangle(curPen, curX, curY, diffX, diffY);
            break;
    }

    RefreshFormBackground();
    dragMode = false;
}

Pada event Paint di form gambar objecnya

private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;

    if (currImage != null)
    {
        g.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        curGraphics.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        RefreshFormBackground();
        currImage = null;
    }

    if (dragMode)
    {
        switch (drawIndex)
        {
            case 1:
                //gambar garis
                g.DrawLine(curPen, curX, curY, x, y);
                break;
            case 2:
                //gambar ellipse
                    g.DrawEllipse(curPen, curX, curY, diffX, diffY);
                break;
            case 3:
                //gambar kotak
                    g.DrawRectangle(curPen, curX, curY, diffX, diffY);
                break;
        }
    }
}

method RefreshFormBackground() digunakan untuk menjadikan object curGraphic sebagai background form

private void RefreshFormBackground()
{
    curBitmap = bitmap.Clone(new Rectangle(0, 0, this.Width, this.Height), bitmap.PixelFormat);
    this.BackgroundImage = curBitmap;
}

setelah itu coba anda jalankan programnya dan mencoba menggambar object line atau rectangle sebagai berikut

image

untuk menambahkan pewarnaan fiil, border, open, dan save file akan dibahas di artikel selanjutnya, selamat mencoba

have fun guys.. coding is fun 🙂

Advertisement