မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ Pen Class ရဲ႕ Constructor ေတြကို ဘရ္လို ေခၚသံုးႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္ပါတရ္။ ဒီအပတ္မွာေတာ့ Pen Class ရဲ႕ Property တစ္ခုျဖစ္တဲ့ Alignment Property အသံုးျပဳပံုေလးကို ေဆြးေႏြးေပး ခ်င္ပါတရ္ဗ်ာ။ Alignment ဆိုတဲ့အတိုင္းပါပဲဗ်ာ... က်ေနာ္တို႔ ဆြဲယူခ်င္တဲ့ Graphics ရဲ႕ location Alignment ကို စိတ္ႀကိဳက္ ခ်ိန္ဆေပးႏိုင္ပါတရ္။ အဲ့ဒီလို Pen ရဲ႕ Alignment ကို မိမိစိတ္ႀကိဳက္ခ်ိန္ညို႔ ႏိုင္ဖို႔အတြက္ PenAlignment ဆိုတဲ့ Property တစ္ခုနဲ႔တြဲဘက္အသံုးျပဳရပါတရ္ဗ်ာ။ PenAlignment ဟာ Enum Type တစ္ခုျဖစ္ၿပီး အသံုးျပဳႏိုင္တဲ့ Value ေတြအေနနဲ႔....
ဆိုၿပီး Alignment ပံုစံ(၅)ခုနဲ႔ ေျပာင္းလဲအသံုးျပဳႏိုင္ပါတရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔ အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
public enum PenAlignment{
Center,
Inset,
Outset,
Left,
Right
}
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ Fill Method ေတြကို အသံုးျပဳၿပီး Myanmar National Flag တစ္ခုကို ဖန္တီးယူခဲ့ၾကပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာေတာ့ အေျခခံက်က်သိသြားေအာင္ ေနာက္သို႔ အနည္းငရ္ ျပန္ဆုတ္ၿပီး Graphic ဆြဲရာမွာ Pen ကို အသံုးျပဳႏိုင္ဖို႔အတြက္ Object ဘရ္လိုတည္ေဆာက္ႏိုင္မလဲ( )? ၊ အသံုးျပဳႏိုင္တဲ့ Constructor ေတြ ဘာေတြရွိေနအံုးမလဲ ဆိုတာေလးေတြကို ေဆြးေႏြးေပးသြားပါ့မရ္ဗ်ာ။
Pen Class ဟာ System.Drawing; ဆိုတဲ့ Library ရဲ႕ လက္ေအာက္ခံ Class တစ္ခုျဖစ္ပါတရ္။ Graphics တစ္ခု ဖန္တီးရာမွာ အရမ္းကို အေရးပါၿပီး မရွိမျဖစ္ လိုအပ္တဲ့ Tool တစ္ခုလည္း ျဖစ္ပါတရ္။ ဒီလို Drawing Tool အတြက္ Pen ကို အသံုးျပဳေတာ့မရ္ဆိုရင္ က်ေနာ္တို႔အေနနဲ႔ Pen Object တစ္ခုကို မျဖစ္မေန တည္ေဆာက္ေပးရပါတရ္။ တနည္းအားျဖင့္ ဒါဟာ Pen Class က ခြင့္ျပဳေပးထားတဲ့ Constructors ေတြကို ေခၚသံုးလိုက္တာပါပဲဗ်ာ။ Constructor ကို မေခၚထားပဲနဲ႔ က်ေနာ္တို႔ Pen ရဲ႕ အျခားေသာ Method ေတြ၊ Properties ေတြကို ေခၚသံုးလို႔ မရႏိုင္ပါဘူးဗ်(ဒီေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ Pen ကိုအသံုးျပဳမရ္ဆိုတာနဲ႔ Constructor တစ္ခုကို တည္ေဆာက္ေပးရမရ္ဆိုတာကိုေတာ့ မွတ္ထားေစခ်င္ပါတရ္)။
ကဲ… က်ေနာ္တို႔ သေဘာတရားေလးကို သိၿပီဆိုရင္ Pen Class မွာ က်ေနာ္တို႔ ေခၚယူအသံုးျပဳႏိုင္တဲ့ Constructor ဘယ္ႏွစ္ခုရွိလဲ ဆိုတာေလးကို ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ Pen Class မွာ Constructor အေနနဲ႔ က်ေနာ္တို႔ ေလးမ်ိဳး ေခၚသံုးႏိုင္ပါတရ္ဗ်ာ။ ေအာက္မွာ အမည္ေလးေတြနဲ႔ သက္ဆိုင္ရာ Syntax ေလးေတြကို ေဖာ္ျပေပးထားပါတရ္။ ေလ့လာၾကည့္လုိက္ၾကပါအံုးဗ်ာ။
Pen(Brush) – Constructor
Initializes a new instance of the Pen class with the specified Brush. Initializes a new instance of the Pen class with the specified Brush.
Pen(Brush, Single) – Constructor
Initializes a new instance of the Pen class with the specified Brush and Width.
Pen(Color) – Constructor
Initializes a new instance of the Pen class with the specified color.
Pen(Color, Single) – Constructor
Initializes a new instance of the Pen class with the specified Color and Width properties.
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing;နဲ႔ using System.Drawing.Drawing2D;ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။
Pen(Brush) – Constructor
Initializes a new instance of the Pen class with the specified Brush. Initializes a new instance of the Pen class with the specified Brush.
public Pen(
Brush brush
)
Pen(Brush, Single) – Constructor
Initializes a new instance of the Pen class with the specified Brush and Width.
public Pen( Brush brush, float width )
Pen(Color) – Constructor
Initializes a new instance of the Pen class with the specified color.
public Pen( Color color )
Pen(Color, Single) – Constructor
Initializes a new instance of the Pen class with the specified Color and Width properties.
public Pen( Color color, float width )ကဲ… အသံုးျပဳပံု Syntax ေတြကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလးကို စလိုက္ၾကရေအာင္….။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button ငါးခုနဲ႔ PanelControl တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnPen_BrushCtr Pen(Brush) Constructor - Button2 btnPen_BrushSingleCtr Pen(Brush, Single) Constructor - Button3 btnPen_ColorCtr Pen(Color) Constructor - Button4 btnPen_ColorSingleCtr Pen(Color, Single) Constructor - Button5 btnPensClass Pens Class - Panel1 pnPlotArea - Silver
အဆင့္(၃)။ Button မ်ားအတြက္ Coding ေရးယူျခင္း
ဒီေလ့က်င့္ခန္းမွာ တူညီတဲ့ Graphic တစ္ခုတည္းကိုပဲ Construtors ေတြေျပာင္းလဲၿပီး ဆြဲယူထားတဲ့အတြက္ Coding သေဘာတရားအားလံုးဟာ အတူတူပါပဲဗ်ာ။ ဒီေတာ့ က်ေနာ္ Button တစ္ခုခ်င္းစီအတြက္ Coding ခြဲ မေရးျပေတာ့ပဲ တစ္စုတစ္စည္းတည္း ေဖာ္ျပေပးလိုက္ပါတရ္။
ေနာက္ဆံုး Button5 မွာေတာ့ Pens Class နဲ႔ Color တစ္ခုတည္းအသံုးျပဳၿပီး Draw and Fill Method ေတြထဲမွာ တိုက္ရိုက္ ေခၚသံုးႏိုင္တာေလးကို ေဆြးေႏြးေပးထားပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ႀကိဳက္ႏွစ္သက္ရာ နည္းလမ္းေတြနဲ႔ အသံုးျပဳႏိုင္ပါတရ္။
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
using System;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace PenConstructors
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void btnPen_BrushCtr_Click(object sender, EventArgs e)
{
Graphics gr = pnPlotArea.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
using (Pen p = new Pen(Brushes.Blue))
{
gr.DrawRectangle(p, 100, 50, 150, 200);
}
}
private void btnPen_BrushSingleCtr_Click(object sender, EventArgs e)
{
Graphics gr = pnPlotArea.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
using (Pen p = new Pen(Brushes.SteelBlue, 10))
{
gr.DrawRectangle(p, 100, 50, 150, 200);
}
}
private void btnPen_ColorCtr_Click(object sender, EventArgs e)
{
Graphics gr = pnPlotArea.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
using (Pen p = new Pen(Color.LightBlue))
{
gr.DrawRectangle(p, 100, 50, 150, 200);
}
}
private void btnPen_ColorSingleCtr_Click(object sender, EventArgs e)
{
Graphics gr = pnPlotArea.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
using (Pen p = new Pen(Color.LightSteelBlue, 15))
{
gr.DrawRectangle(p, 100, 50, 150, 200);
}
}
private void btnPensClass_Click(object sender, EventArgs e)
{
Graphics gr = pnPlotArea.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
gr.DrawRectangle(Pens.Brown, 100, 50, 150, 200);
}
}
}
ခက္ခက္ခဲခဲ ဘာမွ မရွိပါဘူးဗ်ာ။ Pen ကို အသံုးျပဳၿပီး Graphics ဆြဲယူရာမွာ မိမိႏွစ္သက္ရာ ကာလာ နဲ႔ ဆြဲယူႏိုင္ဖို႔အတြက္ Color and Brushes ဆိုၿပီး Color Structure ႏွစ္ခုကို အသံုးျပဳႏိုင္ပါတရ္။ ဒုတိယ Parameter ေတြကေတာ့ မိမိ Pen ရဲ႕ အထူ၊အပါး(Width) ကို သတ္မွတ္ေပးတဲ့အခါမွာ သံုးတာပါဗ်ာ။ မိမိ ဖန္တီးလုိက္တဲ့ Constructor အေပၚမူတည္ၿပီး Color တစ္ခုတည္း သံုးမွာလား၊ Width ပါ ထည့္သံုးမလား ဆိုတာပဲ ကြာသြားမွာျဖစ္ပါတရ္။ ဖန္တီးယူရပံုက အရမ္းကို ရိုးရွင္းပါတရ္။
ေနာက္ဆံုး Button5 မွာေတာ့ Pens Class နဲ႔ Color တစ္ခုတည္းအသံုးျပဳၿပီး Draw and Fill Method ေတြထဲမွာ တိုက္ရိုက္ ေခၚသံုးႏိုင္တာေလးကို ေဆြးေႏြးေပးထားပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ႀကိဳက္ႏွစ္သက္ရာ နည္းလမ္းေတြနဲ႔ အသံုးျပဳႏိုင္ပါတရ္။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ Point[ ] Array နဲ႔ DrawLines( )Method တို႔ကို အသံုးျပဳၿပီး Star တစ္ခု ဖန္တီးယူႏိုင္ပံုေလးကို ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္ပါတရ္။ ဒီေန႔ေလ့က်င့္ခန္းေလးမွာေတာ့ ၄င္း Starဖန္တီးယူတာေလးကိုပဲ ဆက္စပ္မွီျငမ္းၿပီး Myanmar National Flag တစ္ခုကို C# Graphics ကိုအသံုးျပဳၿပီး ဘရ္လို ဖန္တီးယူႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးသြားပါ့မရ္ဗ်ာ။
ဒီေလ့က်င့္ခန္းေလးမွာCoordinate Graphမွတ္ယူတာနဲ႔ Star ရဲ႕ Point ေတြကို Drawing Star by using Point[ ]Array and DrawLines( )Method in C# Graphics ေလ့က်င့္ခန္းကအတိုင္း ယူသံုးထားပါတရ္ဗ်ာ။ ဒီေတာ့ အခုမွ စတင္ေလ့လာမိတဲ့ မိတ္ေဆြတို႔အေနနဲ႔ Coordinate Sysetm နဲ႔ Star Pointခ်တာ နားမလည္လိုက္ဘူးဆိုရင္ ေရွ႕က ေလ့က်င့္ခန္းေလးကို အရင္ ေလ့လာၾကည့္ေစခ်င္ပါတရ္ဗ်ာ။
ဒီေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ့္အေနန႔ဲ မိတ္ေဆြတို႔ကို C# Graphics ရဲ႕ Fill Methodေတြျဖစ္တဲ့ FillRectangle( )Method နဲ႔FillPolygon( )Methodတို႔ကို မိတ္ဆက္ေပးခ်င္ပါတရ္ဗ်ာ။ Fill Method ျဖစ္တဲ့အတြက္ Closed curves ေတြနဲ႔ပဲ တြဲဘက္အသံုးျပဳႏိုင္တရ္ဆိုတာကိုေတာ့ မွတ္ထားေစခ်င္တရ္ဗ်ာ။ FillPolygon( )Method ရဲ႕ Syntax ေလးကို ေလ့လာၾကည့္မရ္ဆိုရင္ေတာ့....
public void FillPolygon( Brush brush, Point[] points )Brush ကိုေတာ့ Graphics မွာ မိမိႏွစ္သတ္ရာ Color ကို Fill လုပ္ခ်င္တဲ့အခါမ်ိဳးမွာ သံုးပါတရ္။ Point[ ]Array ကေတာ့ က်ေနာ္တို႔ ဆြဲယူခ်င္တဲ့ Graphics ရဲ႕ Point ေတြ သတ္မွတ္ေပးဖို႔ျဖစ္ပါတရ္ဗ်ာ။ Polygon Method ရဲ႕ ထူးျခားခ်က္ကေတာ့ ဆံုးမွတ္နဲ႔ စမွတ္ကို ျပန္ဆက္ဆြဲေပးဖို႔ Point ခ်ေပးစရာမလိုပါဘူးဗ်ာ။ မည္သည့္ Point မွာပဲ ရပ္ရပ္ ၄င္းဆံုးမွတ္ကို စမွတ္ point နဲ႔ Auto ဆက္ဆြဲေပးၿပီး Graphics တစ္ခုကို ဖန္တီးေပးပါတရ္။ ကဲ… အသံုးျပဳပံုေလးေတြနဲ႔ သေဘာတရားကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလးကို စလိုက္ၾကရေအာင္….။
ေလ့က်င့္ခန္းေလးရဲ႕ Over View ေလးကို ၾကည့္မရ္ဆိုရင္ေတာ့ က်ေနာ္တို႔ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာFlag ရဲ႔ Background Area အတြက္ FillRectangle( )Method ကိုအသံုးျပဳၿပီး ၀ါ၊ စိမ္း၊ နီ ဖန္တီးယူတဲ့အပိုင္းနဲ႔ Point[ ]Arrayကိုအသံုးျပဳၿပီး FillPolygon( )Methodနဲ႔ Starတစ္ခု ဖန္တီးယူျခင္း အပိုင္းဆိုၿပီး အပိုင္း(၂)ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing;နဲ႔ using System.Drawing.Drawing2D;ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Buttonတစ္ခုနဲ႔ PanelControl တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnCreateMmFlag Drawing Myanmar National Flag - Panel1 pnPlotArea - LightGray
အဆင့္(၃)။ Button1 အတြက္ Coding ေရးယူျခင္း
ကဲ… က်ေနာ္တို႔ လိုလားခ်က္ကိုလဲသိၿပီး Form ရဲ႕ GUI ကိုလည္း ခ်ၿပီးၿပီဆိုရင္ေတာ့ Button1 ကို Clickေပးၿပီး ေအာက္ပါ Coding ေလးေတြ ေရးယူလိုက္ၾကရေအာင္။
နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အဆင့္(၄)။ White Star အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းကေတာ့ က်ေနာ့္ Star Graphic တစ္ခုကို ဆြဲယူတဲ့အပိုင္းျဖစ္ပါတရ္ဗ်ာ။ Button1 ClickထဲမွာပဲCoding ကို ျဖည့္ေရးယူ ရမွာျဖစ္ပါတရ္ဗ်ာ။ ဒီေတာ့ Button1 ရဲ႕ ကုဒ္တင္းအျပည့္အစံုအေနနဲ႔....
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
private void btnCreateMmFlag_Click(object sender, EventArgs e)
{
//Create Graphics Object
Graphics gr = pnPlotArea.CreateGraphics();
//Get Graphics's Quality
gr.SmoothingMode = SmoothingMode.HighQuality;
//Get One Rectange's Height
int Rec = pnPlotArea.Height / 3;
//Draw Yellow, Green, Red Rectangle
gr.FillRectangle(Brushes.Yellow, 0, 0, pnPlotArea.Width, Rec);
gr.FillRectangle(Brushes.Green, 0, Rec, pnPlotArea.Width, Rec);
gr.FillRectangle(Brushes.Red, 0, 2*Rec, pnPlotArea.Width, Rec);
}
အနည္းငယ္ ရွင္းရမရ္ဆိုရင္ က်ေနာ္တို႔ Panel1 ရဲ႕ Height ကို ၀ါ၊ စိမ္း၊ နီ အညီအမွ် ဆြဲယူႏိုင္ဖို႔အတြက္ 3 နဲ႔ စားၿပီး Rec ဆိုတဲ့ Variable ထဲကို အရင္သိမ္းထားလိုက္ပါတရ္ဗ်ာ။ ထို႔ေနာက္ FillRectangle( )Method ကိုအသံုးျပဳၿပီး က်ေနာ္တို႔ အထက္မွာ ခြဲေ၀ယူခဲ့တဲ့အတိုင္းအတာအတိုင္း ၀ါ၊ စိမ္း၊ နီ Rectangle သံုးခုကို Panel View အျပည့္ ဆြဲယူလိုက္တာပဲျဖစ္ပါတရ္ဗ်ာ။ Coding တစ္ေၾကာင္းစီတိုင္းမွာ Comment ေလးေတြနဲ႔ ရွင္းထားၿပီးမို႔ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။ရလာတဲ့ Result ကေတာ့….
အဆင့္(၄)။ White Star အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းကေတာ့ က်ေနာ့္ Star Graphic တစ္ခုကို ဆြဲယူတဲ့အပိုင္းျဖစ္ပါတရ္ဗ်ာ။ Button1 ClickထဲမွာပဲCoding ကို ျဖည့္ေရးယူ ရမွာျဖစ္ပါတရ္ဗ်ာ။ ဒီေတာ့ Button1 ရဲ႕ ကုဒ္တင္းအျပည့္အစံုအေနနဲ႔....
privatevoid btnCreateMmFlag_Click(object sender, EventArgs e)
{
//Create Graphics Object
Graphics gr = pnPlotArea.CreateGraphics();
//Get Graphics's Quality
gr.SmoothingMode = SmoothingMode.HighQuality;
//Get One Rectange's Height
int Rec = pnPlotArea.Height / 3;
//Draw Yellow, Green, Red Rectangle
gr.FillRectangle(Brushes.Yellow, 0, 0, pnPlotArea.Width, Rec);
gr.FillRectangle(Brushes.Green, 0, Rec, pnPlotArea.Width, Rec);
gr.FillRectangle(Brushes.Red, 0, 2*Rec, pnPlotArea.Width, Rec);
//Change Graphics's StartPoint Point(0,0)
gr.TranslateTransform(pnPlotArea.Width / 2, pnPlotArea.Height / 2);
//Create Custom Point for Star
Point[] point = {
newPoint(0, -200),
newPoint(50, -50),
newPoint(200, -50),
newPoint(100, 50),
newPoint(150, 200),
newPoint(0, 100),
newPoint(-150, 200),
newPoint(-100, 50),
newPoint(-200, -50),
newPoint(-50, -50)
};
//Drawing Star
gr.FillPolygon(Brushes.White, point);
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ ပထမအဆင့္မွာ Star တခု ရုပ္လံုးေပၚဖို႔အတြက္ Coordinate ေပၚမွာ Point ေတြခ်ပါတရ္။ Point ေတြအမ်ားႀကီးျဖစ္လို႔ တစ္စုတစည္းတည္းျဖစ္ေအာင္ Point[ ]Array ကို က်ေနာ္တို႔ အသံုးျပဳထားပါတရ္။ ဒုတိယအဆင့္မွာေတာ့ FillPolygon( )Method ကုိ အသံုးျပဳၿပီးေတာ့ က်ေနာ္တို႔ Point ခ်ထားတဲ့ Star တစ္ခုကို Graphic အျဖစ္ ဆြဲယူလိုက္တာပဲျဖစ္ပါတရ္ဗ်ာ။ အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ FillPolygon( )Method ကိုအသံုးျပဳၿပီး Point ေတြအမ်ားႀကီးနဲ႔ Closed Curves ေတြကို ပံုေဖာ္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေတြနဲ႔ Graphics Design တစ္ခု ဖန္တီးယူတာနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးခဲ့ၿပီး ျဖစ္ပါတရ္။ ဒီအပတ္မွာေတာ့ Point[ ] Array နဲ႔ DrawLines( )Method တို႔ကို အသံုးျပဳၿပီး Star တစ္ခု ဘရ္လို ဖန္တီးယူႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးသြားပါ့မရ္ဗ်ာ။
ဒီေလ့က်င့္ခန္းေလးမွာ Coordinate Graph ဆြဲယူရာမွာေတာ့ ေရွ႕သင္ခန္းစာေတြနဲ႔ မတူေအာင္ ပံုစံတမ်ိဳးေလးနဲ႔ တည္ေဆာက္ျပထားပါတရ္ဗ်ာ။ ခက္ခဲတဲ့ Coding ေတြေတာ့ မပါ,ပါဘူး။ စဥ္းစားပံု သေဘာတရားကေတာ့ ေရွ႕သင္ခန္းစာေတြမွာ Coordinate Graph ဆြဲယူခဲ့တာေတြနဲ႔ အတူတူပါပဲဗ်ာ။ ေလ့က်င့္ခန္းသေဘာအရ လြရ္ကူရာကေန အျမင့္ဘက္ကို အနည္းငရ္ဆြဲေခၚလာတာျဖစ္လို႔ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ဖန္တီး စဥ္းစားသြားပံုေလးကို က်ေနာ္နဲ႔အတူ လိုက္ၿပီး စဥ္းစားေစခ်င္ပါတရ္ဗ်ာ။
ဆက္လက္ၿပီး... ဒီေလ့က်င့္ခန္းမွာ က်ေနာ္တို႔သံုးသြားမယ့္ Point[ ]Array နဲ႔ DrawLines( )Method အေၾကာင္းေလးေတြကို အနည္းငရ္ ရွင္းျပေပးခ်င္ပါတရ္။ X and Y Coordinate ပါတဲ့ အမွတ္တခုကို Graphic မွာ Point လို႔ ေခၚပါတရ္ဗ်ာ။ ဒီေတာ့ က်ေနာ္တို႔ နားလည္ၿပီေလ... အဲ့ဒီလို႔ Point ေတြ ေျမာက္မ်ားစြာကို တေနရာတည္းမွာ သိမ္းဖို႔အတြက္ဆိုရင္ေတာ့ က်ေနာ္တို႔ Point[ ]Array ကို အသံုးျပဳပါတရ္ဗ်ာ။
DrawLine( )Method တုန္းကေတာ့ က်ေနာ္တို႔ စမွတ္နဲ႔ဆံုးမွတ္ၾကားမွာ Line တစ္ေၾကာင္းတည္းကိုသာ ဆြဲယူႏိုင္ခဲ့ပါတရ္ဗ်ာ။ အခု က်ေနာ္တို႔ ေလ့လာမရ္႕ DrawLines( )Method မွာေတာ့ စမွတ္နဲ႔ဆံုးမွတ္ၾကားမွာ လားရာေပါင္းစံုနဲ႔ Line ေတြအမ်ားႀကီးကို တဆက္တည္း ဆြဲယူအသံုးျပဳႏိုင္ပါတရ္ဗ်ာ။ ကဲ... အသံုးျပဳပံုေလးေတြနဲ႔ သေဘာတရားကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလးကို စလိုက္ၾက ရေအာင္....။
DrawLine( )Method တုန္းကေတာ့ က်ေနာ္တို႔ စမွတ္နဲ႔ဆံုးမွတ္ၾကားမွာ Line တစ္ေၾကာင္းတည္းကိုသာ ဆြဲယူႏိုင္ခဲ့ပါတရ္ဗ်ာ။ အခု က်ေနာ္တို႔ ေလ့လာမရ္႕ DrawLines( )Method မွာေတာ့ စမွတ္နဲ႔ဆံုးမွတ္ၾကားမွာ လားရာေပါင္းစံုနဲ႔ Line ေတြအမ်ားႀကီးကို တဆက္တည္း ဆြဲယူအသံုးျပဳႏိုင္ပါတရ္ဗ်ာ။ ကဲ... အသံုးျပဳပံုေလးေတြနဲ႔ သေဘာတရားကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလးကို စလိုက္ၾက ရေအာင္....။
ေလ့က်င့္ခန္းေလးရဲ႕ Over View ေလးကို ၾကည့္မရ္ဆိုရင္ေတာ့ က်ေနာ္တို႔ ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာ Coordinate Graph ဆြဲယူျခင္းအပိုင္းနဲ႔ Point[ ]Array ကိုအသံုးျပဳၿပီး DrawLines( )Method နဲ႔ Star တစ္ခု ဖန္တီးယူျခင္း အပိုင္းဆိုၿပီး အပိုင္း(၂)ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing; နဲ႔ using System.Drawing.Drawing2D; ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button ႏွစ္ခုနဲ႔ Panel Control တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnDrawCoordinate Drawing Coordinate - Button2 btnDrawStar Draw Star - Panel1 pnPlotArea - LightGray
အဆင့္(၃)။ Button1 အတြက္ Coding ေရးယူျခင္း
ကဲ… က်ေနာ္တို႔ လိုလားခ်က္ကိုလဲသိၿပီး Form ရဲ႕ GUI ကိုလည္း ခ်ၿပီးၿပီဆိုရင္ေတာ့ Button1 ကို Click ေပးၿပီး ေအာက္ပါ Coding ေလးေတြ ေရးယူလိုက္ၾကရေအာင္။
နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အဆင့္(၄)။ Button2 အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းကေတာ့ က်ေနာ့္ Star Graphic တစ္ခုကို ဆြဲယူတဲ့အပိုင္းျဖစ္ပါတရ္ဗ်ာ။ Button2 Click မွာ ဆြဲယူမွာျဖစ္လို႔ Button2 ထဲမွာ ေအာက္ပါ Coding ကို ေရးယူလိုက္ၾကပါဗ်ာ။
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
private void btnDrawCoordinate_Click(object sender, EventArgs e)
{
//Create Graphics Object
Graphics gr = pnPlotArea.CreateGraphics();
//Get Graphics's Quality
gr.SmoothingMode = SmoothingMode.HighQuality;
//Change StartPoint Point(0,0)
gr.TranslateTransform(pnPlotArea.Width / 2, pnPlotArea.Height / 2);
//Refresh Background Color of Graphics
gr.Clear(Color.LightGray);
//Create Pen Object Specified Color and Width
using (Pen p = new Pen(Color.Black, 5))
{
//Create X and Y axes
gr.DrawLine(p, -pnPlotArea.Width / 2, 0, pnPlotArea.Width / 2, 0);
gr.DrawLine(p, 0, -pnPlotArea.Height / 2, 0, pnPlotArea.Height / 2);
//Create Font Object Specified FontFamily,Size,Style
using (Font f = new Font("Courier New", 18, FontStyle.Bold))
{
//Create Axes's Label
gr.DrawString("X", f, Brushes.Blue, pnPlotArea.Width / 2 - 20, -30);
gr.DrawString("Y", f, Brushes.Blue, -25, -pnPlotArea.Height / 2 + 5);
}
}
//Draw Ticks
int tick = 50;
for (int i = -300; i <= 300; i += tick)
{
using (Pen p = new Pen(Color.Black, 3))
{
if (i != 0)
{
//For X-axes's Line
gr.DrawLine(p, i, 0, i, 10);
//For Y-axes's Line
gr.DrawLine(p, 0, i, 10, i);
//For X-axes's Text
gr.DrawString(i.ToString(), this.Font, Brushes.Green, i + 5, 5);
//For Y-axes's Text
gr.DrawString(i.ToString(), this.Font, Brushes.Green, 5, i + 5);
}
else
{
//For Point(0,0)
gr.DrawString("0", this.Font, Brushes.Green, i + 5, 5);
}
}
}
}
အနည္းငယ္ ရွင္းရမရ္ဆိုရင္ TranslateTransform( )Method ကေတာ့ က်ေနာ္တို႔ Graphics ရဲ႕ Point(0,0) ေနရာကို သတ္မွတ္ေပး လိုက္တာပါဗ်ာ။ ဒီေလ့က်င့္ခန္းမွာေတာ့ (pnPlotArea.Width / 2, pnPlotArea.Height / 2) လို႔ ခိုင္းထားတဲ့အတြက္ေၾကာင့္ က်ေနာ္တို႔ ဆြဲယူလိုက္တဲ့ Graphic ဟာ Panel ရဲ႕ X coordinate တ၀က္ နဲ႔ Y coordinate တ၀က္ကို Point(0,0) လို႔ သတ္မွတ္ၿပီး ဆြဲယူေပးပါလိမ့္မရ္ဗ်ာ။ Coding တစ္ေၾကာင္းစီတိုင္းမွာ Comment ေလးေတြနဲ႔ ရွင္းထားၿပီးမို႔ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။ ရလာတဲ့ Result ကေတာ့….
အဆင့္(၄)။ Button2 အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းကေတာ့ က်ေနာ့္ Star Graphic တစ္ခုကို ဆြဲယူတဲ့အပိုင္းျဖစ္ပါတရ္ဗ်ာ။ Button2 Click မွာ ဆြဲယူမွာျဖစ္လို႔ Button2 ထဲမွာ ေအာက္ပါ Coding ကို ေရးယူလိုက္ၾကပါဗ်ာ။
private void btnDrawStar_Click(object sender, EventArgs e)
{
//Create Graphics Object
Graphics gr = pnPlotArea.CreateGraphics();
//Get Graphics's Quality
gr.SmoothingMode = SmoothingMode.HighQuality;
//Change StartPoint Point(0,0)
gr.TranslateTransform(pnPlotArea.Width / 2, pnPlotArea.Height / 2);
//Create Pen Object
Pen p = new Pen(Color.Green, 5);
//Create Custom Point
Point[] point = {
new Point(0, -200),
new Point(50, -50),
new Point(200, -50),
new Point(100, 50),
new Point(150, 200),
new Point(0, 100),
new Point(-150, 200),
new Point(-100, 50),
new Point(-200, -50),
new Point(-50, -50),
new Point(0, -200)
};
//Drawing Star
gr.DrawLines(p, point);
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ ပထမအဆင့္မွာ Star တခု ရုပ္လံုးေပၚဖို႔အတြက္ Coordinate ေပၚမွာ Point ေတြခ်ပါတရ္။ Point ေတြအမ်ားႀကီးျဖစ္လို႔ တစ္စုတစည္းတည္းျဖစ္ေအာင္ Point[ ]Array ကို က်ေနာ္တို႔ အသံုးျပဳထားပါတရ္။ ဒုတိယအဆင့္မွာေတာ့ DrawLines( )Method ကုိ အသံုးျပဳၿပီးေတာ့ က်ေနာ္တို႔ Point ခ်ထားတဲ့ Star တစ္ခုကို Graphic အျဖစ္ ဆြဲယူလိုက္တာပဲျဖစ္ပါတရ္ဗ်ာ။ အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ DrawLines( )Method ကိုအသံုးျပဳၿပီး Point ေတြအမ်ားႀကီးနဲ႔ လားရာေပါင္းစံုနဲ႔ Line ေတြကို ပံုေဖာ္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။
