Untuk periode bulan agustus 2008 dibuka kelas training ASP.NET 2.0 (C#) untuk mahasiswa
Materi pelatihan :
Lama Training: 24 jam (jadwal diatur sesuai dengan permintaan peserta dan kesediaan trainer)
Pendaftaran: email ke actualtraining@gmail.com atau telp 08156881169
Kapasitas Peserta: 6 orang
Peserta yang sudah mendaftar saat ini sebanyak 4 orang
kelas akan segera dimulai jika jumlah peserta sudah memenuhi
Dibuka kelas baru PHP dan MySQL periode agustus dengan materi sebagai berikut:
Lama Training: 24 jam (jadwal diatur sesuai dengan permintaan peserta dan kesediaan trainer)
Pendaftaran: email ke actualtraining@gmail.com atau telp 08156881169
Kapasitas Peserta: 6 orang
Peserta yang sudah mendaftar saat ini sebanyak 2 orang
kelas akan segera dimulai jika jumlah peserta sudah memenuhi
Secara default ketika anda menekan tombol maka secara otomatis halaman akan dipostback atau di kirim ke server kemudian dikembalikan kehalaman itu lagi. Jika anda menginginkan agar setelah menekan tombol maka dikirimkan ke halaman lain maka anda harus mendefinisikan property PostBackUrl property.
Buat halaman dengan nama CrossPage.aspx
<form id="form1" runat="server">
<div>
<asp:Label id="lblSearch" Text="Search:" Runat="server" />
<asp:TextBox id="txtSearch" Runat="server" />
<asp:Button id="btnSearch" Text="Go!" PostBackUrl="CrossPage2.aspx" Runat="server" />
</div>
</form>
Kemudian buat halaman baru lagi dengan nama CrossPage2.aspx
<form id="form1" runat="server">
<div>
<asp:Label id="lblSearch" Runat="server" />
</div>
</form>
Untuk mengambil nilai dari server control yang ada di halaman sebelumnya tulis kode berikut
protected void Page_Load(object sender, EventArgs e)
{
if (Page.PreviousPage != null) {
TextBox txtSearch = (TextBox)PreviousPage.FindControl("txtSearch");
lblSearch.Text = "Search For : " + txtSearch.Text;
}
}
untuk kode dari source diatas dapat di download disini
Jika anda ingin mengambil nilai dari GridView pada saat anda mengklik link select, caranya adalah sebagai berikut:
cara untuk mengambil nilai pada gridview ketika anda menekan select adalah melalui event Row_Command
Protected Sub gvBuku_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvBuku.RowCommand
If e.CommandName = "Select" Then
Dim intIndex As Integer = CInt(e.CommandArgument)
Dim row As GridViewRow = gvBuku.Rows(intIndex)
'mengambil nilai cell ketiga karena index dimulai dari Nol
lblKeterangan.Text = String.Empty
lblKeterangan.Text &= "Kode Buku : " & row.Cells(2).Text & "<br/>" & _
"Judul Buku : " & row.Cells(3).Text & "<br/>" & _
"Tahun Terbit : " & row.Cells(4).Text & "<br/>" & _
"Pengarang : " & row.Cells(5).Text & "<br/>" & _
"Penerbit : " & row.Cells(6).Text
End If
End Sub
intIndex digunakan untuk mendapatkan index dari row yang anda click
untuk contoh program diatas dapat di download pada link
semoga membantu :)
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:
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
untuk menambahkan pewarnaan fiil, border, open, dan save file akan dibahas di artikel selanjutnya, selamat mencoba
have fun guys.. coding is fun :)
Graphic Class Method
Draw Method
Digunakan untuk menggambar garis, rectangle, dan ellipse
Drawing Lines
Method DrawLine digunakan untuk menggambar garis yang menghubungkan dua titik.
Contoh2_4 Menggambar Garis
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen redPen = new Pen(Color.Red, 1); Pen bluePen = new Pen(Color.Blue, 2); Pen greenPen = new Pen(Color.Green, 3); Pen blackPen = new Pen(Color.Black, 4); // Draw line using float coordinates float x1 = 20.0F, y1 = 20.0F; float x2 = 200.0F, y2 = 20.0F; g.DrawLine(redPen, x1, y1, x2, y2); // Draw line using Point structure Point pt1 = new Point(20, 20); Point pt2 = new Point(20, 200); g.DrawLine(greenPen, pt1, pt2); // Draw line using PointF structure PointF ptf1 = new PointF(20.0F, 20.0F); PointF ptf2 = new PointF(200.0F, 200.0F); g.DrawLine(bluePen, ptf1, ptf2); // Draw line using integer coordinates int X1 = 60, Y1 = 40, X2 = 250, Y2 = 100; g.DrawLine(blackPen, X1, Y1, X2, Y2); // Dispose of objects redPen.Dispose(); bluePen.Dispose(); greenPen.Dispose(); blackPen.Dispose(); }
Contoh2_5 Menggambar Garis yang Terhubung
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen redPen = new Pen(Color.Red, 1); PointF[] ptsArray ={ new PointF( 20.0F, 20.0F), new PointF( 20.0F, 200.0F), new PointF(200.0F, 200.0F), new PointF(20.0F, 20.0F)}; g.DrawLines(redPen, ptsArray); }
Drawing Rectangle
Bentuk dasar selanjutnya adalah rectangle. Jika anda ingin menggambar rectangle maka yang harus diperhatikan adalah titik awal / starting point, width, dan height-nya.
Contoh2_6 Menggambar Rectangle
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create pens and points Pen redPen = new Pen(Color.Red, 1); Pen bluePen = new Pen(Color.Blue, 2); Pen greenPen = new Pen(Color.Green, 3); float x = 5.0F, y = 5.0F; float width = 100.0F; float height = 200.0F; // Create a rectangle Rectangle rect = new Rectangle(20, 20, 80, 40); // Draw rectangles g.DrawRectangle(bluePen, x, y, width, height); g.DrawRectangle(redPen, 60, 80, 140, 50); g.DrawRectangle(greenPen, rect); // Dispose of objects redPen.Dispose(); bluePen.Dispose(); greenPen.Dispose(); }
Contoh 2_7 Menggambar Rectangle Berurutan / Series Mode
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen greenPen = new Pen(Color.Green, 4); RectangleF[] rectArray = { new RectangleF( 5.0F, 5.0F, 100.0F, 200.0F), new RectangleF(20.0F, 20.0F, 80.0F, 40.0F), new RectangleF(60.0F, 80.0F, 140.0F, 50.0F) }; g.DrawRectangles(greenPen, rectArray); greenPen.Dispose(); }
Drawing Ellipses dan Circle
Bentuk ellipses adalah bentuk circular didalam bentuk rectangle. Bentuk ellipses mempunyai titik tengah / center point.
Contoh2_8 Menggambar Ellipses
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create pens Pen redPen = new Pen(Color.Red, 6); Pen bluePen = new Pen(Color.Blue, 4); Pen greenPen = new Pen(Color.Green, 2); // Create a rectangle Rectangle rect = new Rectangle(80, 80, 50, 50); // Draw ellipses g.DrawEllipse(greenPen, 100.0F, 100.0F, 10.0F, 10.0F); g.DrawEllipse(redPen, rect); g.DrawEllipse(bluePen, 60, 60, 90, 90); g.DrawEllipse(greenPen, 40.0F, 40.0F, 130.0F, 130.0F); // Dispose of objects redPen.Dispose(); greenPen.Dispose(); bluePen.Dispose(); }
Drawing Text
Digunakan untuk menggambar text string dalam graphic surfaces
Contoh2_9 Menggambar String
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create brushes SolidBrush blueBrush = new SolidBrush(Color.Blue); SolidBrush redBrush = new SolidBrush(Color.Red); SolidBrush greenBrush = new SolidBrush(Color.Green); // Create a rectangle Rectangle rect = new Rectangle(20, 20, 200, 100); // The text to be drawn String drawString = "Hello GDI+ World!"; // Create a Font object Font drawFont = new Font("Verdana", 14); float x = 100.0F; float y = 100.0F; // String format StringFormat drawFormat = new StringFormat(); // Set string format flag to direction vertical, // which draws text vertically drawFormat.FormatFlags = StringFormatFlags.DirectionVertical; // Draw string g.DrawString("Drawing text", new Font("Tahoma", 14), greenBrush, rect); g.DrawString(drawString, new Font("Arial", 12), redBrush, 120, 140); g.DrawString(drawString, drawFont, blueBrush, x, y, drawFormat); // Dispose of objects blueBrush.Dispose(); redBrush.Dispose(); greenBrush.Dispose(); drawFont.Dispose(); }
Drawing Arc
Arc adalah bagian dari ellipse, yang dibentuk dari area rectangle, start angle, dan sweep angle. Cara penggunaan Arc adalah sebagai berikut:
Contoh2_11 Menggambar Arc
Buat design form sebagai berikut:
Buat variabel awal untuk deklarasi awal start dan sweep angle
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen redPen = new Pen(Color.Red, 3); Rectangle rect = new Rectangle(20, 20, 200, 200); g.DrawArc(redPen, rect, startAngle, sweepAngle); redPen.Dispose(); } private void btnReset_Click(object sender, EventArgs e) { startAngle =(float)Convert.ToDouble(txtStart.Text); sweepAngle =(float)Convert.ToDouble(txtSweep.Text); Invalidate(); }
Drawing Curves
Curve terdiri dari dua macam yaitu open dan close curve
Contoh2_12 Drawing Curves
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create a pen Pen bluePen = new Pen(Color.Blue, 1); // Create an array of points PointF pt1 = new PointF(40.0F, 50.0F); PointF pt2 = new PointF(50.0F, 75.0F); PointF pt3 = new PointF(100.0F, 115.0F); PointF pt4 = new PointF(200.0F, 180.0F); PointF pt5 = new PointF(200.0F, 90.0F); PointF[] ptsArray = { pt1, pt2, pt3, pt4, pt5 }; // Draw curve g.DrawCurve(bluePen, ptsArray); // Dispose of object bluePen.Dispose(); }
Contoh2_13 Drawing Curves dengan Tension
private float tension = 0.5F; private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create a pen Pen bluePen = new Pen(Color.Blue, 1); // Create an array of points PointF pt1 = new PointF(40.0F, 50.0F); PointF pt2 = new PointF(50.0F, 75.0F); PointF pt3 = new PointF(100.0F, 115.0F); PointF pt4 = new PointF(200.0F, 180.0F); PointF pt5 = new PointF(200.0F, 90.0F); PointF[] ptsArray = { pt1, pt2, pt3, pt4, pt5 }; // Draw curve g.DrawCurve(bluePen, ptsArray,tension); // Dispose of object bluePen.Dispose(); } private void btnApply_Click(object sender, EventArgs e) { tension = (float)Convert.ToDouble(txtTension.Text); Invalidate(); }
Contoh2_14 Drawing Closed Curve
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create a pen Pen bluePen = new Pen(Color.Blue, 1); // Create an array of points PointF pt1 = new PointF(40.0F, 50.0F); PointF pt2 = new PointF(50.0F, 75.0F); PointF pt3 = new PointF(100.0F, 115.0F); PointF pt4 = new PointF(200.0F, 180.0F); PointF pt5 = new PointF(200.0F, 90.0F); PointF[] ptsArray = { pt1, pt2, pt3, pt4, pt5 }; // Draw curve g.DrawClosedCurve(bluePen, ptsArray); // Dispose of object bluePen.Dispose(); }
Drawing Polygon
Polygon adalah bentuk yang terdiri dari tiga atau lebih garis, misal: segitiga, dan kotak.
Contoh2_15 Drawing Polygon
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create pens Pen greenPen = new Pen(Color.Green, 2); Pen redPen = new Pen(Color.Red, 2); // Create points for polygon PointF p1 = new PointF(40.0F, 50.0F); PointF p2 = new PointF(60.0F, 70.0F); PointF p3 = new PointF(80.0F, 34.0F); PointF p4 = new PointF(120.0F, 180.0F); PointF p5 = new PointF(200.0F, 150.0F); PointF[] ptsArray = { p1, p2, p3, p4, p5 }; // Draw polygon g.DrawPolygon(greenPen, ptsArray); // Dispose of objects greenPen.Dispose(); redPen.Dispose(); }
Drawing Graphic Path
Graphic Path menghubungkan beberapa objek drawing seperti line, rectable, circle, dll.
Contoh2_16 Drawing Graphic Path
using System.Drawing; using System.Drawing.Drawing2D; private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; // Create a pen Pen greenPen = new Pen(Color.Green, 1); // Create a graphics path GraphicsPath path = new GraphicsPath(); // Add a line to the path path.AddLine(20, 20, 103, 80); // Add an ellipse to the path path.AddEllipse(100, 50, 100, 100); // Add three more lines path.AddLine(195, 80, 300, 80); path.AddLine(200, 100, 300, 100); path.AddLine(195, 120, 300, 120); // Create a rectangle and call // AddRectangle Rectangle rect = new Rectangle(50, 150, 300, 50); path.AddRectangle(rect); // Draw path g.DrawPath(greenPen, path); // Dispose of object greenPen.Dispose(); }
Drawing Pie Shapes
Contoh2_17 Drawing Pie Chart
private void btnDraw_Click(object sender, EventArgs e) { // Create a Graphics object Graphics g = this.CreateGraphics(); g.Clear(this.BackColor); // Get the current value of start and sweep // angles float startAngle = (float)Convert.ToDouble(textBox1.Text); float sweepAngle = (float)Convert.ToDouble(textBox2.Text); // Create a pen Pen bluePen = new Pen(Color.Blue, 1); // Draw pie g.DrawPie(bluePen, 20, 20, 100, 100, startAngle, sweepAngle); // Dispose of objects bluePen.Dispose(); g.Dispose(); }
bersambung Part 3…..
Apa itu GDI+?
GDI+ adalah library pada .NET yang digunakan untuk membuat aplikasi grafis berbasis Windows dan Web yang dapat berinteraksi dengan perangkat grafis berupa printer atau monitor.
Graphical User Interface (GUI) berinteraksi dengan perangkat hardware seperti monitor, printer, atau scanner untuk menampilkan format yang dapat dibaca oleh manusia, tetapi tidak ada program yang dapat mengakses perangkat hardware tersebut secara langsung, maka dibuat user interface agar pengguna dapat berinteraksi dengan perangkat-perangkat tersebut.
Untuk membuat user interface tersebut harus digunakan third component sebagai jembatan antara program dan perangkat keras, maka dibuatlah komponen GDI+ library, dengan komponen tersebut anda dapat menampilkan output berupa text dan gambar ke perangkat hardware.
Pada aplikasi .NET anda dapat menggunakan GDI+ untuk membuat aplikasi grafis baik untuk aplikasi berbasi windows maupun aplikasi web. Library GDI+ sudah tersinstall secara default pada sistem operasi Windows XP, Vista, dan Windows 2003 yang berlokasi di class library dengan nama Gdiplus.dll. Gdiplus.dll.
Apa saja fitur GDI+?
Fitur GDI+ dapat kategorikan dalam 3 fungsi utama yaitu:
2D Vector Graphics Programming
Vector Graphic merupakan komponen pembentuk bentuk gambar mis (kotak, lingkaran) yang dibentuk dari kumpulan titik pada sistem koordinat.
Pada .NET Framework library 2D vector graphic programming dibagi menjadi dua kategori yaitu general dan advanced. General 2D vector graphic didefinisikan dalam library System.Drawing namespace dan advance function didefinisikan dalam library System.Drawing.Drawing2D namespace.
Imaging
Imaging digunakan untuk memanipulasi image. Image file yang dapat dimanipulasi misalnya .bmp, .jpg, .gif, dan .png. Fungsi-fungsi untuk memanipulasi images ada dalam Image class yang digunakan untuk create, save, dan load images.
Typography
Typography digunakan untuk mendesign dan merepresentasikan text. GDI+ menyediakan class untuk membuat dan menggunakan font.
GDI+ Namespaces dan Class dalam .NET
Area Drawing
Setiap aplikasi drawing paling tidak terdiri dari tiga komponen yaitu canvas, brush, pen, dan process
Setiap area drawing memiliki empat property utama yaitu: weight, height, resolution dan color depth.
Definisi dari pixel adalah: elemen terkecil pada proses drawing untuk menampilkan graphic object atau images pada layar. Pixel density sering direpresentasikan dengan nilai dpi (dot per inch).
Struktur color pada GDI+ mempunyai empat komponen warna yaitu: alpha, red, green, dan blue. Red green blue (RGB) komponen mewakili kombinasi warna yang akan muncul. Setiap komponen dalam RGB mempunyai 256 (28) color combination, sehingga kombinasi tiga komponen RGB tersebut mempunyai kemungkinan warna 256x256x256. Alpha komponen mewakili aspek transparan dari warna, yang akan terlihat ketika beberapa warna digabungkan.
Seperti yang terlihat pada gambar diatas, area drawing paling tidak harus mensupport 24-bit color system (8-bit untuk setiap R, G, dan B komponen).
Sistem Koordinat
Memahami sistem koordinat sangat penting untuk pemrograman graphic, sistem koordinat merepresentasikan letak graphic objet pada perangkat tampilan seperti monitor dan printer.
Sistem Koordinat Kartesian
Ini adalah koordinat umum yang anda pelajari pada pelajaran matematika dasar, terdiri dari sumbu x dan y
Posisi sitem koordinat kartesian dibagi menjadi beberapa kuadran:
Sistem Koordinat Standar GDI+
Tidak seperti sistem kartesian, pada perangkat tampilan seperti monitor sumbu (0,0) terletak pada pojok kiri atas.
Aplikasi Pertama menggunakan GDI+
Sekarang saatnya anda untuk mencoba membuat aplikasi menggunakan library GDI+ menggunakan .NET Framework.
1. Pertama buat aplikasi windows form baru pada visual studio, beri nama projectnya contoh2_1
2. Untuk menggunakan GDI+ maka anda harus menambahkan referensi library kedalam program
using System.Drawing; using System.Drawing.Drawing2D;
3. Untuk menggambar di form anda dapat menambahkan kode dalam method OnPaint.
private void Form1_Paint(object sender, PaintEventArgs e) { //membuat instan class / objek dari class graphic Graphics g = e.Graphics; }
4. Untuk menambahkan object Pen, Brush, serta Drawing Shape kedalam form tambahkan kode sebagai berikut
private void Form1_Paint(object sender, PaintEventArgs e) { //membuat instan class / objek dari class graphic Graphics g = e.Graphics; //set smothing mode pada area drawing g.SmoothingMode = SmoothingMode.AntiAlias; //membuat kotak dengan width 100 dan height 100 Rectangle rect = new Rectangle(20, 20, 100, 100); //membuat objek pen berwarna merah Pen redPen = new Pen(Color.Red, 3); Pen blackPen = Pens.Black; //membuat objek solid brush SolidBrush greenBrush = new SolidBrush(Color.Green); //menggambar shape dan line g.DrawRectangle(redPen, rect); g.FillEllipse(greenBrush, rect); g.DrawLine(blackPen, 0, 250, this.Width, 250); g.FillEllipse(Brushes.Blue, 70, 220, 30, 30); g.FillEllipse(Brushes.SkyBlue, 100, 210, 40, 40); g.FillEllipse(Brushes.Green, 140, 200, 50, 50); g.FillEllipse(Brushes.Yellow, 190, 190, 60, 60); g.FillEllipse(Brushes.Violet, 250, 180, 70, 70); g.FillEllipse(Brushes.Red, 320, 170, 80, 80); }
5.Jalankan program dengan menekan tombol F5 untuk melihat hasilnya.
Menggunakan Struktur Point dan PointF
Pada GDI+ point digunakan untuk mendefinisikan koordinat titik dua dimensi yang direpresentasikan sebagai matrix (x dan y koordinat) . ada tiga macam konstruktor yang dapat digunakan untuk membuat object point yaitu:
Point pt1 = new Point(10); Point pt2 = new Point( new Size(20, 20) ); Point pt3 = new Point(30, 30);
Struktur PointF hampir sama dengan Point hanya saja nilai sumbu x dan y-nya tidak berupa integer melainkan floating point.
PointF pt3 = new PointF(30.0f, 30.0f);
Contoh 2_2 Penggunaan Struktur Point
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; //membuat object point Point pt = new Point(50, 50); //membuat object point kosong Point newPoint = Point.Empty; newPoint.X = 100; newPoint.Y = 200; Pen pn = new Pen(Color.Blue, 4); //menggambar garis dari titik pt ke newPoint g.DrawLine(pn, pt, newPoint); pn.Dispose(); g.Dispose(); }
Menggunakan Struktur Rectangle
Struktur rectangle digunakan untuk membuat object rectangle di GDI+
Contoh2_3 Penggunaan Struktur Rectangle
private void Form1_Paint(object sender, PaintEventArgs e) { // Create a Graphics object Graphics g = this.CreateGraphics(); int x = 40; int y = 40; int height = 120; int width = 120; // Create a Point object Point pt = new Point(80, 80); // Create a Size object Size sz = new Size(100, 100); // Create a rectangle from Point and Size Rectangle rect1 = new Rectangle(pt, sz); // Create a rectangle from integers Rectangle rect2 = new Rectangle(x, y, width, height); // Create a rectangle from direct integers Rectangle rect3 = new Rectangle(10, 10, 180, 180); // Create pens and brushes Pen redPen = new Pen(Color.Red, 2); SolidBrush greenBrush = new SolidBrush(Color.Blue); SolidBrush blueBrush = new SolidBrush(Color.Green); // Draw and fill rectangles g.DrawRectangle(redPen, rect3); g.FillRectangle(blueBrush, rect2); g.FillRectangle(greenBrush, rect1); // Dispose of the objects redPen.Dispose(); blueBrush.Dispose(); greenBrush.Dispose(); g.Dispose(); }
bersambung Part 2…
ditulis oleh mahasiswa saya : Erwin (TI UKDW 03)
Mengisi Obyek Dengan Ming
Ming menyediakan tiga cara untuk melakukan pengisian obyek, yaitu pengisian obyek dengan warna, mengisi obyek dengan gradient, dan mengisi obyek dengan gambar. Kelas SWFShape() menyediakan dua fungsi untuk mengisi obyek yaitu fungsi setLeftFill() dan fungsi setRightFill(). Untuk menggunakan keduanya, perlu menggunakan SWFFill() sebagai argument. SWFFill() dapat dipanggil dengan menggunakan fungsi addFill() yang merupakan bagian dari SWFShape(). Fungsi addFill() ini mempunyai argument warna RGB. Fungsi setRigthFill() digunakan jika ingin mengisi searah dengan jarum jam, sedangkan fungsi setLeftFill() digunakan untuk mengisi berlawanan dengan arah jarum jam.
1: <?php
2: $myMovie = new SWFMovie();
3: $myMovie->setDimension(400, 300);
4: $myMovie->setRate(30);
5: $myMovie->setBackground(200, 200, 200);
6: // Membuat shape baru dan mengisi obyek
7: $square = new SWFShape();
8: $square->setLine(5, 0, 0, 0, 255);
9: $fill = $square->addFill(0, 255, 0);
10: $square->setRightFill($fill);
11: // Menggambar kotak
12: $square->movePenTo(40, 20);
13: $square->drawLineTo(140, 20);
14: $square->drawLineTo(140, 120);
15: $square->drawLineTo(40, 120);
16: $square->drawLineTo(40, 20);
17: // Menambahkan shape ke movie
18: $myMovie->add($square);
19: // Menampilkan movie
20: header('Content-type:application/x-shockwave-flash');
21: $myMovie->output();
22: ?>
Cara kedua yang dapat digunakan untuk mengisi obyek adalah dengan menggunakan kelas SWFGradient(). Kelas ini dapat digunakan untuk mengisi obyek dengan efek gradasi dari dua warna atau gradient. Untuk menambah warna yang akan digunakan untuk gradasi dapat dengan menggunakan fungsi addEntry(). Fungsi ini memiliki lima argument, pertama adalah ratio yang berisikan antara 0.0 dan 1.0. Ratio ini digunakan untuk menentukan seberapa banyak warna yang ditampilkan dalam satu sisi. Argument berikutnya adalah warna RGB. Untuk argument kelima bersifat opsional, yaitu chanel alpha dari warna.
1: <?php
2: $myMovie = new SWFMovie();
3: $myMovie->setDimension(400, 300);
4: $myMovie->setRate(30);
5: $myMovie->setBackground(200, 200, 200);
6: // Membuat shape baru and mengatur line style
7: $square = new SWFShape();
8: $square->setLine(5, 0, 0, 0, 255);
9: // Membuat gradient fill
10: $gradient = new SWFGradient();
11: $gradient->addEntry(0.0, 255, 0, 0);
12: $gradient->addEntry(0.5, 255, 255, 255);
13: // Menambah fill ke shape
14: $fill=$square->addFill($gradient, SWFFILL_RADIAL_GRADIENT);
15: $square->setRightFill($fill);
16: // Menggambar kotak persegi
17: $square->movePenTo(40, 20);
18: $square->drawLineTo(340, 20);
19: $square->drawLineTo(340, 220);
20: $square->drawLineTo(40, 220);
21: $square->drawLineTo(40, 20);
22: // Menambahkan shapes ke movie
23: $myMovie->add($square);
24: // Menampilkan movie
25: header('Content-type:application/x-shockwave-flash');
26: $myMovie->output();
27: ?>
![clip_image002[4]](http://www2.ukdw.ac.id/kuliah/si/erickblog/MingLibrarydenganPHPPart2_13E73/clip_image0024.jpg)
Pengisian obyek yang terakhir adalah dengan gambar. Gambar dengan format .jpg dan Define Bit Lossless (*.dbl) yang dapat dibuat dari file gambar dengan format Graphic Interchange Format (*.gif) dan Portable Network Graphic (*.png), dapat digunakan untuk mengisi obyek. Developer Ming menyediakan perangkat lunak png2dbl yang terdapat di alamat http://www.opaque.net/ming/ming-winutils.zip. Perangkat lunak ini dapat mengkonversi *.gif ke format *.dbl. Gambar perlu dipanggil ke buffer menggunakan fungsi yang disediakan PHP. Fungsi tersebut adalah fopen() dan fread(). Berikut ini adalah contoh penggunaanya:
$fp = fopen(“somefile.jpg”, “rb”);
$data = fread($fp, filesize(“somefile.jpg”));
Setelah itu data perlu dipindahkan dari buffer ke kelas SWFBitmap(). Kelas SWFBitmap() adalah kelas untuk mengisi obyek dengan gambar.
$bitmap = SWFBitmap($data);
Kelas SWFBitmap() memiliki fungsi addFill() yang digunakan untuk mengisikan data ke dalam obyek. Dalam penggunaanya memerlukan salah satu dari dua flag dibawah ini:
· SWFFILL_CLIPPED_BITMAP. Flag ini digunakan untuk memasukkan gambar ke obyek sesuai dengan ukuran gambar tersebut.
· SWFFILL_TILED_BITMAP. Flag ini digunakan untuk menyesuaikan gambar sesuai dengan ukuran dari obyek.
Berikut ini adalah contoh script untuk mengisi sebuah obyek dengan gambar yang diambil dari suatu folder dan akan menghasilkan tampilan seperti pada gambar
1: <?php
2: $myMovie = new SWFMovie();
3: $myMovie->setDimension(400, 300);
4: $myMovie->setRate(30);
5: $myMovie->setBackground(200, 200, 200);
6: // Membuat shape baru and mengatur line style
7: $square = new SWFShape();
8: $square->setLine(5, 0, 0, 0, 255);
9: // Membuka gambar and membaca data ke buffer
10: $fp = fopen("dog.jpg", "rb");
11: $data = fread($fp, filesize("dog.jpg"));
12: // Membuat gambar bitmap baru
13: $bitmap = new SWFBitmap($data);
14: // mengisikannya ke shape
15: $fill = $square->addFill($bitmap, SWFFILL_TILED_BITMAP);
16: $square->setRightFill($fill);
17: // Menggambar square
18: $square->movePenTo(40, 20);
19: $square->drawLineTo(340, 20);
20: $square->drawLineTo(340, 220);
21: $square->drawLineTo(40, 220);
22: $square->drawLineTo(40, 20);
23: // Menambah shapes ke movie
24: $myMovie->add($square);
25: // Menampilkan movie
26: header('Content-type:application/x-shockwave-flash');
27: $myMovie->output();
28: ?>
29:
![clip_image002[6]](http://www2.ukdw.ac.id/kuliah/si/erickblog/MingLibrarydenganPHPPart2_13E73/clip_image0026.jpg)
Penggunaan Text Dan Font Dengan Ming
Ming menyediakan kelas SWFFont() yang berguna untuk menambahkan bentuk teks pada file movie Flash yang dibuat.
$font = new SWFFont( '_sans' );
Font yang digunakan dapat berasal dari web browser atau font yang disimpan dalam sebuah folder. Untuk font yang disimpan dalam sebuah folder memerlukan format Font Definition Block (*.fdb). Font ini adalah font yang dapat dibuat dengan mengkonversi font dengan format True Type File (*.ttf). Ming tidak dapat mengkonversikan font tersebut secara langsung secara langsung. Sehingga memerlukan sebuah perangkat lunak tambahan untuk mengkonversinya. Perangkat lunak tersebut adalah ttf2fdb yang salah satunya bisa didapat dari alamat situs http://www.amarasoftware.com/downloaddemo/makefdb.zip. Setelah membuat obyek font baru, diperlukan tempat untuk menampung font tersebut. Sehingga diperlukan kelas SWFText() atau SWFTextField().
$text = new SWFTextField();
Kemudian font dipindahkan ke dalam area teks dengan menggunakan fungsi dari kelas SWFTextField() yaitu setFont().
$text->setFont( $font );
Kelas SWFTextField() atau SWFText() memiliki dua fungsi yang digunakan untuk mengatur teks. Pertama adalah setColor() yang memiliki tiga argument warna RGB, kedua adalah setHeight() untuk mengatur tinggi atau besarnya teks, fungsi ini mempunyai satu argument yaitu tinggi teks dalam pixel. Untuk menambahkan string yang akan dimuat, dapat dengan menggunakan fungsi addString() yang diisi dengan argument string dalam tanda kutip.
1: <?php
2: $font = new SWFFont( '_sans' );
3: $text = new SWFTextField();
4: //Memuat font ke dalam teks area
5: $text->setFont( $font );
6: $text->setColor( 0, 0, 0 );
7: $text->setHeight( 400 );
8: //Menambahkan string 'Hello World'
9: $text->addString( 'Hello World' );
10: //Membuat movie baru
11: $myMovie = new SWFMovie();
12: $myMovie->setDimension( 2500, 800 );
13: //Menambahkan teks ke dalam movie
14: $myMovie->add( $text );
15: //Menampilkan Movie
16: header( 'Content-type: application/x-shockwave-flash' );
17: $m->output( );
18: ?>
![clip_image002[8]](http://www2.ukdw.ac.id/kuliah/si/erickblog/MingLibrarydenganPHPPart2_13E73/clip_image0028.jpg)
Menambahkan Animasi Pada Movie Flash
Pada dasarnya obyek bentuk geometri yang ditambahkan ke movie hanya ditampilkan saja dan tidak dianimasikan.
$movie->add($shape);
Untuk menambahkan animasi pada Flash dengan menggunakan Ming, memerlukan manipulasi dari penambahan obyek dengan fungsi add() yang merupakan fungsi dari kelas SWFMovie().
$shapeHandle = $movie->add($shape);
Manipulasi ini mengakibatkan pengembalian obyek SWFDisplayItem() untuk menganimasikan obyek bentuk geometri ke dalam movie Flash. Hal ini sama artinya dengan mempunyai obyek SWFDisplayItem() baru. Kelas SWFDisplayItem() mempunyai fungsi yang dapat digunakan untuk menggerakan obyek, yang pertama adalah fungsi move() yang memiliki dua argument, yaitu koordinat x dan koordinat y, yang kedua adalah fungsi moveTo() yang memiliki argument sama dengan move(). Selain itu dapat juga membuat obyek berputar dengan menggunakan fungsi rotate() yang hanya memiliki satu argument, yaitu derajat perputaran obyek yang diinginkan.
1: <?php
2: $myMovie = new SWFMovie();
3: $myMovie->setDimension(400, 300);
4: $myMovie->setRate(30);
5: $myMovie->setBackground(200, 200, 200);
6: // Membuat shape baru and mengatur line style
7: $square = new SWFShape();
8: $square->setLine(5, 0, 0, 0, 255);
9: // Menggambar kotak
10: $square->movePenTo(1, 1);
11: $square->drawLineTo(61, 1);
12: $square->drawLineTo(61, 61);
13: $square->drawLineTo(1, 61);
14: $square->drawLineTo(1, 1);
15: // Menambahkan shapes ke dalam movie
16: $squareHandle = $myMovie->add($square);
17: // Menggerakan shape
18: $squareHandle->moveTo(30, 100);
19: // Memutar shape 45 derajat
20: $squareHandle->rotate(45);
21:
22: // Tampilan dari movie
23: header('Content-type:application/x-shockwave-flash');
24: $myMovie->output();
25: ?>
![clip_image002[10]](http://www2.ukdw.ac.id/kuliah/si/erickblog/MingLibrarydenganPHPPart2_13E73/clip_image00210.jpg)
Agar pergerakannya kelihatan, maka perlu untuk melakukan perubahan pada obyek secara bertahap pada tiap frame. Untuk menggeser ke frame berikutnya dapat dengan menggunakan fungsi nextFrame() yang merupakan fungsi dari kelas SWFMovie(). Ming juga dapat melakukan animasi morphing. Animasi ini mengubah bentuk sebuah obyek ke bentuk lain. Kelas yang digunakan adalah SWFMorph() yang memiliki dua fungsi, yaitu getShape1() dan getShape2(). Keduanya tidak memiliki argument.
$morph = new SWFMorph();
$shape1 = $morph->getShape1();
$shape2 = $morph->getShape2();
Contoh penggunaanya adalah sebagai berikut:
1: <?php
2: $myMovie = new SWFMovie();
3: $myMovie->setDimension(400, 300);
4: $myMovie->setRate(5);
5: $myMovie->setBackground(200, 200, 200);
6: // Membuat obyek morph baru
7: $morph = new SWFMorph();
8: // Membuat shape baru and mengatur line style
9: $square = new SWFShape();
10: $rectangle = new SWFShape();
11: $square = $morph->getShape1();
12: $square->setLine(5, 0, 0, 0, 255);
13: $rectangle = $morph->getShape2();
14: $rectangle->setLine(5, 0, 0, 0, 255);
15: // Menggambar kotak persegi
16: $square->movePenTo(1, 1);
17: $square->drawLineTo(61, 1);
18: $square->drawLineTo(61, 61);
19: $square->drawLineTo(1, 61);
20: $square->drawLineTo(1, 1);
21: // Menggambar persegi panjang
22: $rectangle->movePenTo(1, 1);
23: $rectangle->drawLineTo(161, 1);
24: $rectangle->drawLineTo(161, 61);
25: $rectangle->drawLineTo(1, 61);
26: $rectangle->drawLineTo(1, 1);
27: $morphHandle = $myMovie->add($morph);
28: $morphHandle->moveTo(100, 100);
29: //Melakukan animasi secara bertahap
30: for($i = 0.0; $i < 1.0; $i += 0.1)
31: {
32: $morphHandle->setRatio($i);
33: $myMovie->nextFrame();
34: }
35: // Tampilan movie
36: header('Content-type:application/x-shockwave-flash');
37: $myMovie->output();
38: ?>
Masih banyak lagi animasi yang dapat dilakukan oleh Ming Library, seperti skew, scale, dan lain sebagainya. Selain itu Ming Library juga mendukung action script. Untuk lebih jelasnya dapat dilihat pada http://phpbuilder.com/manual/en/book.ming.php
Link Ming Library:
Basic:
· http://jerryscript.hostrocket.com/php/ming/lessons/
Contoh:
· http://redhot.pepper.jp/ming_php/
Ming untuk desain:
· http://www.thatmingthing.com/
Ming pada bahasa pemrograman lain:
· http://kumamushi.org/~k/ming/examples/examples.html à pada Ruby
· http://todbot.com/ming/ à Perl
Reference:
· Php manual.
· Rutledge, Matt, 2004, “PHP Game Programing” cetakan pertama, Premier.
Actual Training 