မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ 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 ေတြကို ပံုေဖာ္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေတြနဲ႔ Graphics Design တစ္ခု ဖန္တီးယူတာနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးခဲ့ၿပီး ျဖစ္ပါတရ္။ ဒီအပတ္မွာလည္း Straight Line Graphic ပတ္သတ္ၿပီး အျခားေသာ Design တစ္ခုကို ထပ္ေလ့လာၾကည့္ၾကမရ္ဗ်ာ။
ေရွ႕ေလ့က်င့္ခန္းမွာတုန္းက Coordinate Graph ဆြဲရာမွာ First Point ကိုအေသ ထားၿပီး Last Point အေျပာင္းအလဲ သေဘာနဲ႔ Straight Line Graphic Design တစ္ခုကို ဖန္တီးယူခဲ့တာပါ။ ဒီေလ့က်င့္ခန္းမွာေတာ့ Straight Line တစ္ခုျဖစ္ဖို႔အတြက္ Point ႏွစ္ခုစလံုးကို အေျပာင္းအလဲ လုပ္ၿပီး ပံုေဖာ္ ယူမွာေလးကို ေလ့လာၾကည့္ၾကမွာျဖစ္ပါတရ္ဗ်ာ။ အားလံုးက လြရ္ကူလြန္းပါတရ္။ Straight Line ကိုပဲ အသံုးျပဳမွာမို႔ Coding နည္းနည္းမ်ားသြားႏိုင္ပါတရ္။ ဒါေပမဲ့ က်ေနာ္ကေတာ့ ေတြးေတာပံု logic ေလးကိုပဲ သိသြားေစခ်င္တာပါ။ ကိုယ္ပိုင္အေတြးေလးရသြားရင္ Method ေတြ၊ Tool ေတြက အဓိကမက်ေတာ့ပဲ မိမိ သိထားတဲ့ Scope ထဲပဲ Graphics တစ္ခုကို ေကာင္းေကာင္းဆြဲယူႏိုင္ပါတရ္ဗ်ာ။ ကဲ… စလိုက္ၾကရေအာင္…။
ေလ့က်င့္ခန္းေလးရဲ႕ Over View ေလးကို ၾကည့္မရ္ဆိုရင္ေတာ့ က်ေနာ္တို႔ ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာ Skeledon Line Graphic ဆြဲယူျခင္းအပိုင္းနဲ႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး X and Y Coordinate အေျပာင္းအလဲေတြနဲ႔ Straight Line မ်ားျဖင့္ Design တစ္ခု ဖန္တီးယူျခင္း အပိုင္းဆိုၿပီး အပိုင္း(၂)ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing; နဲ႔ using System.Drawing.Drawing2D; ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button Control တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnCreateLineGraphics Create Line Graphics Silverဒီေလ့က်င့္ခန္းအတြက္ လိုလားခ်က္ေတြကေတာ့ Button1 ကို Click ေပးတဲ့အခါ Form ေပၚမွာပဲ က်ေနာ္တို႔ စိတ္ႀကိဳက္ဖန္တီးထားတဲ့ Line Graphics တစ္ခုကို ဆြဲယူေပးမွာျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၃)။ Button1 အတြက္ Coding ေရးယူျခင္း
ကဲ… က်ေနာ္တို႔ လိုလားခ်က္ကိုလဲသိၿပီး Form ရဲ႕ GUI ကိုခ်ၿပီးၿပီဆိုရ္ေတာ့ Button1 ကို Click ေပးၿပီး ေအာက္ပါ Coding ေလးေတြ ေရးယူလိုက္ၾကရေအာင္။ ပထမဦးဆံုး က်ေနာ္တို႔ Graphcis Object တစ္ခုကို ဖန္တီးၿပီး ၄င္းနဲ႔ ဆက္စပ္ေနတဲ့ Attribute ေတြကို ျပင္ဆင္ယူၾကည့္ၾကပါ့မရ္ဗ်ာ။
ဒုတိယအဆင့္အေနနဲ႔ Skeledon Line Graphic တစ္ခုကို ပံုေဖာ္ ဖန္တီးယူမွာျဖစ္ပါတရ္ဗ်ာ။
နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အခုတတိယအဆင့္မွာေတာ့ က်ေနာ္တို႔ X and Y Coordinate အေျပာင္းအလဲေတြနဲ႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေတြနဲ႔ Graphics Design ေတြ ဆြဲယူၾကမွာ ျဖစ္ပါတရ္။
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
//Create Graphics Object on Panel Graphics gr = this.CreateGraphics(); //Define Graphics Quality gr.SmoothingMode = SmoothingMode.HighQuality; //Change Custom Start Point of Graphics gr.TranslateTransform(100, ClientRectangle.Height / 2); //Refresh Graphic's BG Color gr.Clear(Color.Silver);အနည္းငယ္ ရွင္းရမရ္ဆိုရင္ TranslateTransform( )Method ကေတာ့ က်ေနာ္တို႔ Graphics ရဲ႕ Point(0,0) ေနရာကို သတ္မွတ္ေပး လိုက္တာပါဗ်ာ။ ဒီေလ့က်င့္ခန္းမွာေတာ့ (100, ClientRectangle.Height / 2) လို႔ ခိုင္းထားတဲ့အတြက္ေၾကာင့္ က်ေနာ္တို႔ ဆြဲယူလိုက္တဲ့ Graphic ဟာ Form ရဲ႕ X coordinate 100 နဲ႔ Y coordinate ကေတာ့ Form’s Height ရဲ႕ တ၀က္ကို Point(0,0) လို႔ သတ္မွတ္ၿပီး ဆြဲယူေပးပါလိမ့္မရ္ဗ်ာ။ Coding တစ္ေၾကာင္းစီတိုင္းမွာ Comment ေလးေတြနဲ႔ ရွင္းထားၿပီးမို႔ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
ဒုတိယအဆင့္အေနနဲ႔ Skeledon Line Graphic တစ္ခုကို ပံုေဖာ္ ဖန္တီးယူမွာျဖစ္ပါတရ္ဗ်ာ။
//Create Pen Object Specified Color and Width
using (Pen p = new Pen(Color.Gray, 1))
{
//Create X and Y axes
gr.DrawLine(p, 0, 0, 300, -300);
gr.DrawLine(p, 0, 0, 300, 300);
gr.DrawLine(p, 150, -150, 450, 150);
gr.DrawLine(p, 150, 150, 450, -150);
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ အနည္းငရ္ရွင္းရမရ္ဆိုရင္ေတာ့ Coding စစခ်င္းမွာ Graphics ဆြဲမည့္ Pen Object ကို Color=Gray နဲ႔ Width=1 ဆိုၿပီး ဖန္တီးယူလိုက္ပါတရ္။ ထိုေနာက္ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေလးေၾကာင္းကို ဆြဲယူထားတာပါ။ ရလာတဲ့ Result ကေတာ့….
အခုတတိယအဆင့္မွာေတာ့ က်ေနာ္တို႔ X and Y Coordinate အေျပာင္းအလဲေတြနဲ႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေတြနဲ႔ Graphics Design ေတြ ဆြဲယူၾကမွာ ျဖစ္ပါတရ္။
//Create Fist Arrow with Line Graphics
int a1 = 150;
int b1 = -150;
int a2 = 10;
for (int b2 = 10; b2 <= 150; b2 += 10)
{
gr.DrawLine(Pens.Gray, a1, b1, a2, b2);
a1 -= 10;
b1 += 10;
a2 += 10;
}
//Create Back Arrow with Line Graphics
int i1 = 150;
int j1 = -150;
int i2 = 290;
for (int j2 = 10; j2 <= 150; j2 += 10)
{
gr.DrawLine(Pens.Gray, i1, j1, i2, j2);
i1 += 10;
j1 += 10;
i2 -= 10;
}
//Create Second Arrow with Line Graphics
int c1 = 300;
int d1 = -300;
int c2 = 150;
for (int d2 = -150; d2 <= 0; d2 += 10)
{
gr.DrawLine(Pens.Gray, c1, d1, c2, d2);
c1 -= 10;
d1 += 10;
c2 += 10;
}
//Create Third Arrow with Line Graphics
int e1 = 300;
int f1 = 0;
int e2 = 150;
for (int f2 = 150; f2 <= 300; f2 += 10)
{
gr.DrawLine(Pens.Gray, e1, f1, e2, f2);
e1 -= 10;
f1 += 10;
e2 += 10;
}
//Create Last Arrow with Line Graphics
int g1 = 450;
int h1 = -150;
int g2 = 310;
for (int h2 = 10; h2 <= 150; h2 += 10)
{
gr.DrawLine(Pens.Gray, g1, h1, g2, h2);
g1 -= 10;
h1 += 10;
g2 += 10;
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ Line တစ္ခုဖန္တီးဖို႔အတြက္ က်ေနာ္အေပၚမွာ ေျပာခဲ့ သလိုပါပဲ X and Y Coordinate ေလးခုစလံုးကို ေျပာင္းလဲေပးရပါတရ္ဗ်ာ။ ဒါေၾကာင့္ Arrow တစ္ခုအတြက္ က်ေနာ္ မသိကိန္း Variable ေလးခု သတ္မွတ္ေပးထားၿပီး Loop တခါပတ္တိုင္း အျမင့္ဆံုးအမွတ္နဲ႔ အနိမ့္ဆံုးအမွတ္ကို ဆက္ဆြဲေပးျခင္းျဖင့္ ပံုေဖာ္ထားတာ ျဖစ္ပါတရ္ဗ်ာ။ Coordinate သတ္မွတ္ရမွာေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ မကၽြမ္းက်င္ေသးရင္ Paper ေပၚမွာ အရင္ Point ခ်ၿပီးမွ Cooding အျဖစ္ ေျပာင္းလဲယူဖို႔ တိုက္တြန္းပါရေစဗ်ာ။ အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line ေတြနဲ႔ Graphics Design တစ္ခုကို ပံုေဖာ္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ X and Y ပါတဲ့ Coordinate Graph တစ္ခုကို Custom အေနနဲ႔ C# Graphics ကို အသံုးျပဳၿပီး ဖန္တီးယူတာေလးကို ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္ပါတရ္။ ဒီအပတ္ ေလ့က်င့္ခန္းေလးမွာေတာ့ DrawLine( ) Method အသံုးျပဳ ပံုေလးကို ေဆြးေႏြးေပးသြားပါ့မရ္။ DrawLine( )Method ကေတာ့ Point ႏွစ္ခုပါတဲ့ Straight Line တစ္ခုကို ဖန္တီးယူတဲ့ အခါမ်ိဳးမွာ အသံုးျပဳပါတရ္။ နည္းလမ္းေပါင္းစံု ရွိတဲ့အထဲက အေျခခံအက်ဆံုးနဲ႔ အလြရ္ကူဆံုး နည္းလမ္းေလးကေန စၿပီး က်ေနာ္တို႔ ခ်ည္းကပ္ၾကည့္သြားၾကပါ့မရ္။
ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာေတာ့ က်ေနာ္တို႔အေနနဲ႔ Coordinate Graph တစ္ခုဆြဲယူျခင္းအပိုင္းနဲ႔ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straight Line မ်ားျဖင့္ Design တစ္ခု ဖန္တီးယူျခင္းဆိုၿပီး အပိုင္း(၂)ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။ ဒါအျပင္ ေလ့က်င့္ခန္းနဲ႔ဆက္စပ္ၿပီး….
Graphics Object တစ္ခုကိုတည္ေဆာက္ျခင္းႏွင့္ ၄င္းႏွင့္သက္ဆိုင္ေသာ Attribute မ်ားျပင္ဆင္ယူျခင္းစတဲ့ အခ်က္ေလးေတြကို ထည့္သြင္းေဆြးေႏြးေပးထားပါ့တရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
Pen Object တစ္ခုတည္ေဆာက္ျခင္းႏွင့္ ၄င္း၏ Attribute မ်ားျပင္ဆင္ယူျခင္း
Font Object တစ္ခု တည္ေဆာက္ျခင္းႏွင့္ ၄င္း၏ Attribute မ်ားျပင္ဆင္ယူျခင္း
DrawLine( )Method ကိုအသံုးျပဳျခင္း
DrawString( )Method ကိုအသံုးျပဳျခင္း
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing; နဲ႔ using System.Drawing.Drawing2D; ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button ႏွစ္ခုနဲ႔ Panel Control တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnCreateCoordinate Create Coordinate - Button2 btnCreateLineGraphics Create Line Graphics - Panel1 pnPlotView - Silverဒီေလ့က်င့္ခန္းအတြက္ လိုလားခ်က္ေတြကေတာ့ Button1 ကို Click ေပးတဲ့အခါ Panel1 ထဲမွာ Coordinate Graph တစ္ခုဆြဲယူမယ္။ Button2 ကို Click ေပးတဲ့အခါမွာေတာ့ Panel1 ထဲမွာပဲ LineGraphic Design တစ္ခုကိုဆြဲယူဖန္တီးမွာျဖစ္ပါတရ္ဗ်ာ။
ကဲ… က်ေနာ္တို႔ လိုလားခ်က္ကိုလဲသိၿပီး Form ရဲ႕ GUI ကိုခ်ၿပီးၿပီဆိုရ္ေတာ့ Button1 ကို Click ေပးတဲ့အခါ Coordinate Graph တစ္ခုကို ဘရ္လို ဖန္တီးႏိုင္မလဲဆိုတာေလးကို ေလ့လာၾကည့္ၾကမရ္ဗ်ာ။
အဆင့္(၃)။ Button1 အတြက္ Coding ေရးယူျခင္း
ပထမဦးဆံုး က်ေနာ္တို႔ Graphcis Object တစ္ခုကို ဖန္တီးၿပီး ၄င္းနဲ႔ ဆက္စပ္ေနတဲ့ Attribute ေတြကို ျပင္ဆင္ယူၾကည့္ၾကပါ့မရ္ဗ်ာ။
ဒုတိယအဆင့္အေနနဲ႔ Coordinate Graph တစ္ခုနဲ႔ X and Y label မ်ား ဖန္တီးယူမွာျဖစ္ပါတရ္ဗ်ာ။
အခုတတိယအဆင့္မွာေတာ့ က်ေနာ္တို႔ စိတ္ႀကိဳက္ Offset နဲ႔ Point and Label မ်ားျပင္ဆင္ယူၾကည့္ၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။
အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ Custom အေနနဲ႔ Coordinate Graph Surface တစ္ခုကို ဖန္တီးတတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။ ေရွ႕ဆက္ၾကအံုးစို႔။
အဆင့္(၃)။ Button2 အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းမွာေတာ့ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straingt Line ေတြနဲ႔ Design Graphics တစ္ခုဆြဲယူတာေလးကို ေလ့လာၾကည့္ၾကမွာျဖစ္ပါတရ္ဗ်ာ။ ဒီေကာင့္မွာလည္း Graphic ဆြဲယူမွာျဖစ္လို႔ Graphics Object ကို ေရွ႕က အတုိင္းပဲ ျပင္ဆင္ယူလုိက္ပါ့မရ္ဗ်ာ။
အဆင့္(၃)။ Button1 အတြက္ Coding ေရးယူျခင္း
ပထမဦးဆံုး က်ေနာ္တို႔ Graphcis Object တစ္ခုကို ဖန္တီးၿပီး ၄င္းနဲ႔ ဆက္စပ္ေနတဲ့ Attribute ေတြကို ျပင္ဆင္ယူၾကည့္ၾကပါ့မရ္ဗ်ာ။
//Create Graphics Object on Panel Graphics gr = pnPlotView.CreateGraphics(); //Define Graphics Quality gr.SmoothingMode = SmoothingMode.HighQuality; //Change Custom Start Point of Graphics gr.TranslateTransform(30,30); //Refresh Graphic's BG Color gr.Clear(Color.Silver);Coding တစ္ေၾကာင္းစီတိုင္းမွာ Comment ေလးေတြနဲ႔ ရွင္းထားၿပီးမို႔ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
ဒုတိယအဆင့္အေနနဲ႔ Coordinate Graph တစ္ခုနဲ႔ X and Y label မ်ား ဖန္တီးယူမွာျဖစ္ပါတရ္ဗ်ာ။
//Create Pen Object Specified Color and Width
using (Pen p = new Pen(Color.Black, 5))
{
//Create X and Y axes
p.CustomEndCap = new AdjustableArrowCap(3, 3);
gr.DrawLine(p, 0, 0, pnPlotView.Width - 40, 0);
gr.DrawLine(p, 0, 0, 0, pnPlotView.Height - 40);
//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, pnPlotView.Width - 60, 10);
gr.DrawString("Y", f, Brushes.Blue, 10, pnPlotView.Height - 60);
}
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ အနည္းငရ္ရွင္းရမရ္ဆိုရင္ေတာ့ Coding စစခ်င္းမွာ Graphics ဆြဲမည့္ Pen Object ကို Color=Black နဲ႔ Width=5 ဆိုၿပီး ဖန္တီးယူလိုက္ပါတရ္။ ေနာက္ က်ေနာ္တို႔ဆြဲယူမရ္႕ Line တိုင္းကို အဆံုးမွာ မွ်ားေခါင္းတတ္ေပးခ်င္တာျဖစ္တဲ့အတြက္ AdjustableArrowCap(3, 3) Constructor
ကိုအသံုးျပဳထားပါတရ္ဗ်ာ။ ထိုေနာက္ DrawLine( )Method ကိုအသံုးျပဳၿပီး X Coordinate အတြက္ Line တစ္လိုင္းနဲ႔ Y Coordinate အတြက္ Line တစ္လိုင္း ဆြဲလိုက္ပါတရ္ဗ်ာ။ ေနာက္တစ္ဆင့္မွာေတာ့ က်ေနာ္တို႔ Font Object တစ္ခုကို မိမိစိတ္ႀကိဳက္ Attribute ေတြနဲ႔ ဖန္တီးယူလိုက္ပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ Attribute ေတြကို စိတ္ႀကိဳက္ေျပာင္းလဲ အသံုးျပဳႏိုင္ပါတရ္ေနာ္။ ေနာက္ဆံုးအဆင့္မွာေတာ့ DrawString( )Method ကိုအသံုးျပဳၿပီးေတာ့ X နဲ႔ Y ဆိုတဲ့ String ႏွစ္ခုကို Line ႏွစ္ခုရဲ႕ အဆံုးမွာ Label အေနနဲ႔ ဖန္တီးယူလိုက္တာပဲ ျဖစ္ပါတရ္ဗ်ာ။ Coding တိုင္းမွာလည္း Comment ေလးေတြနဲ႔ ရွင္းထားေပးထားပါတရ္။ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အခုတတိယအဆင့္မွာေတာ့ က်ေနာ္တို႔ စိတ္ႀကိဳက္ Offset နဲ႔ Point and Label မ်ားျပင္ဆင္ယူၾကည့္ၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။
//Draw Ticks
int tick = 50;
for (int i = 0; i <= 500; i += tick)
{
using (Pen p = new Pen(Color.Black, 3))
{
if (i != 0)
{
//For X-axes's Line
gr.DrawLine(p, i, -10, i, 0);
//For Y-axes's Line
gr.DrawLine(p, -10, i, 0, i);
//For X-axes's Text
gr.DrawString(i.ToString(), this.Font, Brushes.Green, i + 5, -25);
//For Y-axes's Text
gr.DrawString(i.ToString(), this.Font, Brushes.Green, -25, i + 5);
}
else
{
//For Point(0,0)
gr.DrawString("0", this.Font, Brushes.Green, i - 15, 5);
}
}
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ အနည္းငရ္ရွင္းရမရ္ဆိုရင္ေတာ့ Coding စစခ်င္းမွာ For( )Loop ကို အသံုးျပဳၿပီး 500 နဲ႔ ညီသြားတဲ့အေျခအေနထိ DrawLine( )Method ကိုအသံုးျပဳၿပီး Offset ကို 50 တိုးကာ X axes အတြက္ေရာ Y axes အတြက္ပါ Line ေတြကိုဆြဲယူလုိက္ပါတရ္ဗ်ာ။ Text Label အတြက္ကေတာ့ For( )Loop အထဲမွာပဲ IF( )Statement ကို အသံုးျပဳလိုက္ၿပီး DrawString( )Method နဲ႔ Line Position ထက္ Text Position ကို 5 ေပါင္းေပးကာ ဆြဲယူဖန္တီးလိုက္ပါတရ္ဗ်ာ။ How to Create Custom Coordinate Graph Surface in C# Graphics နဲ႔ သေဘာတရားျခင္းအတူတူပါပဲဗ်ာ။ အနည္းငယ္ ကြဲျပားသြားတာကေတာ့ ေရွ႕သင္ခန္းစာမွာတုန္းက X and Y ရဲ႕ Positive Side ဘက္မွာ Point and Label ေတြကို ထုတ္ျပခဲ့တာျဖစ္ၿပီး ဒီေလ့က်င့္ခန္းမွာေတာ့ X axes နဲ႔ Y axes တို႔ရဲ႕ Negative Side ဘက္ေတြမွာ Point and Label ေတြကို ထုတ္ျပထားတာပဲ ျဖစ္ပါတရ္ဗ်ာ။ ဒါမွသာ က်ေနာ္တို႔ Design ဆြဲတဲ့အခါ Point and Label ေတြနဲ႔ ရႈပ္မေနေတာ့ပဲ ရွင္းရွင္းလင္းလင္း ျမင္ရမွာကိုးဗ်။ Coding တိုင္းမွာလည္း Comment ေလးေတြနဲ႔ ရွင္းလင္းေပးထားတဲ့အတြက္ေၾကာင့္ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။ ေနာက္ဆံုးရလာတဲ့ Result ကေတာ့….
အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ Custom အေနနဲ႔ Coordinate Graph Surface တစ္ခုကို ဖန္တီးတတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။ ေရွ႕ဆက္ၾကအံုးစို႔။
အဆင့္(၃)။ Button2 အတြက္ Coding ေရးယူျခင္း
ဒီအပိုင္းမွာေတာ့ DrawLine( )Method ကိုအသံုးျပဳၿပီး Straingt Line ေတြနဲ႔ Design Graphics တစ္ခုဆြဲယူတာေလးကို ေလ့လာၾကည့္ၾကမွာျဖစ္ပါတရ္ဗ်ာ။ ဒီေကာင့္မွာလည္း Graphic ဆြဲယူမွာျဖစ္လို႔ Graphics Object ကို ေရွ႕က အတုိင္းပဲ ျပင္ဆင္ယူလုိက္ပါ့မရ္ဗ်ာ။
//Create Graphics Object Graphics gr = pnPlotView.CreateGraphics(); //Choice Graphics Quality gr.SmoothingMode = SmoothingMode.HighQuality; //Change Graphic's Custom Start Point gr.TranslateTransform(30, 30);နားလည္ၿပီးသားေတြျဖစ္လို႔ က်ေနာ္ထပ္မရွင္းျပေတာ့ပါဘူးေနာ္။ က်ေနာ္တို႔ Design ေဖာ္တဲ့အပိုင္းကို ေလ့လာၾကည့္ၾကမရ္။ ဒီမွာ က်ေနာ္တို႔ စဥ္းစားထားတဲ့ ပံုစံကေတာ့ X axes ရဲ႕ အနိမ့္ဆံုးအမွတ္နဲ႔ Y axes ရဲ႕ အျမင့္ဆံုး အမွတ္ေတြကို ထိဆက္ဆြဲေပးၿပီး Design ေဖာ္ထားတာျဖစ္ပါတရ္ဗ်ာ။ Logic အရဆိုရင္ေတာ့ First Point မွာ X အမွတ္ကို အငယ္ဆံုးကၿပီး Loop တခါပတ္တိုင္း မိမိစိတ္ႀကိဳက္ Offset ကို တိုးေပးထားပါတရ္။ က်ေနာ္ကေတာ့ 10 တိုးယူထားပါတရ္ဗ်ာ။ ထိုနည္းတူပဲ End Point မွာေတာ့ Y အမွတ္ကို အျမင့္ဆံုးက စထားၿပီး Loop တခါပတ္တိုင္း Offset ကို -10 ႏုတ္ယူထားလိုက္ပါတရ္။
//Create Line Graphics
int x = 10;
for (int y = 500; y >= 10; y -= 10)
{
gr.DrawLine(Pens.Gray, x, 0, 0, y);
x += 10;
}
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
SmoothingMode Property,စတာေလးေတြရဲ႕ အသံုးျပဳပံုေလးေတြကိုပါ ထည့္သြင္းေဆြးေႏြး ေပးထားပါတရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
TranslateTransform( ) Method,
AdjustableArrowCap( )Constructor
Clear( )Method,
Pen Object,
Font Object,
DrawLine( )Method,
DrawString( )Method
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing.Drawing2D; ကိုေၾကျငာပါ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button တစ္ခုနဲ႔ Panel Control တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Text Backgroud Color Button1 btnCreateCoordinate Create Coordinate - Panel1 pnPlotArea - Silverဒီေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ အလုပ္ လုပ္ပံုကို အပိုင္း(၃)ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။ ပထမ အပိုင္းက Graphics Object တစ္ခုန႔ဲ ၄င္းနဲ႔ဆက္စပ္ေနတဲ့ Attribute ေတြကို ျပင္ယူတဲ့အပိုင္းျဖစ္ပါတရ္။ ဒုတိယအပိုင္းကေတာ့ X and Y Coordinate Line ႏွစ္ခုနဲ႔ ၄င္းတို႔ရဲ႕ Lable ကိုဆြဲယူတဲ့အပိုင္းျဖစ္ၿပီး တတိယအပိုင္းကေတာ့ မိမိႏွစ္သတ္ရာ Offset နဲ႔ Point ေတြခ်ၿပီး Lable တတ္တဲ့အပိုင္း ျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၃)။ Graphics Object နဲ႔ Attribute မ်ားျပင္ဆင္ယူျခင္း။
ရိုးရွင္းလြန္းပါတရ္ဗ်ာ။ က်ေနာ္တို႔ေရးေနၾက ပံုစံအတိုင္းပါပဲ။ ပိုနားလည္သြားေအာင္ Coding ေလးကို ေအာက္မွာ ၾကည့္လိုက္ပါအံုးဗ်ာ။
//Create Graphics Object on Panel Graphics gr = pnPlotArea.CreateGraphics(); //Define Graphics Quality gr.SmoothingMode = SmoothingMode.HighQuality; //Change Custom Start Point of Graphics gr.TranslateTransform(30,30); //Refresh Graphic's BG Color gr.Clear(Color.Silver);Coding တစ္ေၾကာင္းစီတိုင္းမွာ Comment ေလးေတြနဲ႔ ရွင္းထားၿပီးမို႔ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အဆင့္(၄)။ X and Y Coordinate Line ႏွစ္ခုနဲ႔ ၄င္းတို႔ရဲ႕ Lable မ်ားျပင္ဆင္ယူျခင္း။
//Create Pen Object Specified Color and Width
using (Pen p = new Pen(Color.Black, 5))
{
//Create X and Y axes
p.CustomEndCap = new AdjustableArrowCap(3, 3);
gr.DrawLine(p, 0, 0, pnPlotArea.Width-40, 0);
gr.DrawLine(p, 0, 0, 0, pnPlotArea.Height-40);
//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-60, 10);
gr.DrawString("Y", f, Brushes.Blue, 10, pnPlotArea.Height-60);
}
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ အနည္းငရ္ရွင္းရမရ္ဆိုရင္ေတာ့ Coding စစခ်င္းမွာ Graphics ဆြဲမည့္ Pen Object ကို Color=Black နဲ႔ Width=5 နဲ႔ ဖန္တီးယူလိုက္ပါတရ္။ ေနာက္ က်ေနာ္တို႔ဆြဲယူမရ္႕ Line တိုင္းကို အဆံုးမွာ မွ်ားေခါင္းတတ္ေပးခ်င္တာျဖစ္တဲ့အတြက္ AdjustableArrowCap(3, 3) Constructor
ကိုအသံုးျပဳထားပါတရ္ဗ်ာ။ ထိုေနာက္ DrawLine( )Method ကိုအသံုးျပဳၿပီး X Coordinate အတြက္ Line တစ္လိုင္းနဲ႔ Y Coordinate အတြက္ Line တစ္လိုင္း ဆြဲလိုက္ပါတရ္ဗ်ာ။ ေနာက္တစ္ဆင့္မွာေတာ့ က်ေနာ္တို႔ Font Object တစ္ခုကို မိမိစိတ္ႀကိဳက္ Attribute ေတြနဲ႔ ဖန္တီးယူလိုက္ပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ Attribute ေတြကို စိတ္ႀကိဳက္ေျပာင္းလဲ အသံုးျပဳႏိုင္ပါတရ္ေနာ္။ ေနာက္ဆံုးအဆင့္မွာေတာ့ DrawString( )Method ကိုအသံုးျပဳၿပီးေတာ့ X နဲ႔ Y ဆိုတဲ့ String ႏွစ္ခုကို Line ႏွစ္ခုရဲ႕ အဆံုးမွာ Lable အေနနဲ႔ ဖန္တီးယူလိုက္တာပဲ ျဖစ္ပါတရ္ဗ်ာ။ ရလာတဲ့ Result ကေတာ့…
အဆင့္(၅)။ မိမိႏွစ္သတ္ရာ Offset နဲ႔ Point and Lable မ်ားျပင္ဆင္ယူျခင္း။
//Draw Ticks
int tick = 50;
for (int i = 0; i <= 400; i+=tick)
{
using (Pen p = new Pen(Color.Black,3))
{
//For X-axes's Line
gr.DrawLine(p, i, 0, i, 10);
//For Y-axes's Line
gr.DrawLine(p,0, i, 10, i);
if (i != 0)
{
//For X-axes's Text Lable
gr.DrawString(i.ToString(),this.Font, Brushes.Green, i+5, 5);
//For Y-axes's Text Lable
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);
}
}
}
ဒီမွာလည္း ခက္ခဲတဲ့ Coding ေတြမပါ ပါဘူးဗ်ာ။ အနည္းငရ္ရွင္းရမရ္ဆိုရင္ေတာ့ Coding စစခ်င္းမွာ For( )Loop ကို အသံုးျပဳၿပီး 400 နဲ႔ ညီသြားတဲ့အေျခအေနထိ DrawLine( )Method ကိုအသံုးျပဳၿပီး Offset ကို 50 တိုးကာ X axes အတြက္ေရာ Y axes အတြက္ပါ Line ေတြကိုဆြဲယူလုိက္ပါတရ္ဗ်ာ။ Text Lable အတြက္ကေတာ့ For( )Loop အထဲမွာပဲ IF( )Statement ကို အသံုးျပဳလိုက္ၿပီး DrawString( )Method နဲ႔ Line Position ထက္ Text Position ကို 5 ေပါင္းေပးကာ ဆြဲယူဖန္တီးလိုက္ပါတရ္ဗ်ာ။ Coding တိုင္းမွာလည္း Comment ေလးေတြနဲ႔ ရွင္းလင္းေပးထားတဲ့အတြက္ေၾကာင့္ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ Custom အေနနဲ႔ Coordinate Graph Surface တစ္ခုကို ဖန္တီးတတ္ၿပီလို႔ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
GraphicsUnit Conversion (1 unit)
Form To
1 Inch --> 25.4 millimeter
72 Point
96 Pixel
100 Display
300 Document
က်န္တာေလးေတြကိုေတာ့ မိတ္ေဆြတို႔ နားလည္သြားေအာင္ ကိုယ္တိုင္ ေလ့လာၾကည့္ေစခ်င္ပါတရ္။
ကဲ… က်ေနာ္တို႔ အတိုင္းအတာေလးေတြကို သိၿပီးဆိုရင္ေတာ့ ဥပမာေလးတစ္ပုဒ္ေလာက္ ေရးၿပီး ေလ့လာ ၾကည့္ၾကရေအာင္ဗ်ာ။ ဥပမာ အက်ဥ္းခ်ဳပ္ေလးကေတာ့ Visual C# က ခြင့္ျပဳထားတဲ့ GraphicsUnit အမ်ိဳးအစား(၇)ခုနဲ႔ Rectangle Graphic တစ္ခုဆီကို ဆြဲၾကည့္ၾကမွာျဖစ္ပါတရ္။ GraphicsUnit တစ္ခုနဲ႔ တစ္ခုရဲ႕ ကြာျခားတဲ့ အခ်ိဳးနဲ႔ ေျပာင္းလဲသြားပံုကို ေလ့လာႏိုင္ပါတရ္ဗ်ာ။
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing.Drawing2D; ကိုေၾကျငာပါ။
အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Panel Control ႏွစ္ခုသံုးထားၿပီး Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။
Control Name Backgroud Color Panel1 pnCreateBtnGraphicsUnit ControlLight Panel2 pnViewGraphicsUnit Silverဒီေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ အလုပ္ လုပ္ပံုကို အပိုင္းႏွစ္ပိုင္းခြဲၿပီး ေလ့လာႏိုင္ပါတရ္ဗ်ာ။ ပထမ အပိုင္းက GraphicsUnit ေတြကို Button အျဖစ္ Display ဆြဲယူတဲ့အပိုင္းျဖစ္ၿပီး ဒုတိယအပိုင္းကေတာ့ ၄င္း Button ကို Click ေပးလိုက္တာနဲ႔ ၄င္း Unit အတိုင္းအတာနဲ႔ Graphics ဆြဲယူတဲ့ အပိုင္း ျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၃)။ GraphicsUnit ေတြကို Button အျဖစ္ Display ဆြဲယူျခင္း။
GraphicsUnit ဟာ Enum Type ျဖစ္ပါတရ္ဗ်ာ။ ဒါေၾကာင့္ က်ေနာ္တို႔ loop တစ္ခုခုကို သံုးၿပီး Enum ထဲက Data ေတြကို ဆြဲယူႏိုင္ပါတရ္ဗ်ာ။ က်ေနာ္ကေတာ့ ဒီေလ့က်င့္ခန္းမွာ Foreach( ) loop ကို သံုးထားပါတရ္ဗ်ာ။
foreach (GraphicsUnit item in Enum.GetValues(typeof(GraphicsUnit)))
ဒီေတာ့ item ထဲကို GraphicsUnit ျဖစ္တဲ့ Display, Document, Point, Pixel, World, Inch and Millimeter စတာတို႔ ေရာက္လာပါၿပီဗ်ာ။ မိမိႏွစ္သတ္ရာ Tool ေပၚမွာ Display ျပႏိုင္ပါတရ္။ က်ေနာ္ကေတာ့ Custom Control အပိုင္းကို နားလည္သြားေစခ်င္တဲ့အတြက္ Button Object တစ္ခုကို ကိုယ္တိုင္ ဖန္တီးၿပီး Item ထဲေရာက္လာတဲ့ GraphicsUnit ေတြကို ၄င္း Button ေတြေပၚသို႔ ဆြဲတင္ထားပါတရ္ဗ်ာ။
Button btn = new Button(); btn.Text = item.ToString();
နားလည္ၾကမရ္ ထင္ပါတရ္ဗ်ာ။ Coding အျပည့္အစံုေလးကေတာ့….
private void Form1_Load(object sender, EventArgs e)
{
//Create FlowLayoutPanel for Display fixContorl
FlowLayoutPanel flp = new FlowLayoutPanel();
flp.Dock = DockStyle.Fill;
flp.AutoScroll = true;
//Get GraphicsUnit Enum List in PanelBox
foreach (GraphicsUnit item in Enum.GetValues(typeof(GraphicsUnit)))
{
//Create Button Object and its properties
Button btn = new Button();
btn.Size = new Size(175, 35);
btn.Text = item.ToString();
btn.Font = new Font("Courier New", 9, FontStyle.Italic);
Create inside Method for Button Click
btn.Click += new EventHandler(btn_Click);
flp.Controls.Add(btn);
}
pnCreateBtnGraphicsUnit.Controls.Add(flp);
}
ရလာတဲ့ Result ေလးကေတာ့…
အဆင့္(၄)။ Button Click ေပးၿပီး GraphicsUnit နဲ႔ Graphics ဆြဲယူျခင္း
ဒီအပိုင္းေလးမွာေတာ့ Button Click က ေပးပို႔လာတဲ့ Sender ကို String အျဖစ္ဖမ္းယူျခင္း၊ ၄င္း String ကို GraphisUnit Type အျဖစ္သို႔ ေျပာင္းယူျခင္းနဲ႔ ၄င္း GraphicsUnit ျဖစ္ Graphic ဆြဲယူျခင္းဆိုၿပီး အဆင့္ သံုးဆင့္နဲ႔ အလုပ္ လုပ္ခိုင္းထားပါတရ္ဗ်ာ။ Button Click ရဲ႕ Sender ကိုေတာ့ ေအာက္ပါ Coding ေလးနဲ႔ ဖမ္းယူထားပါတရ္ဗ်ာ။
Button btnSender = (Button)sender;
string getGraphicsUnit = btnSender.Text;
String ကို GraphisUnit Type အျဖစ္ ေျပာင္းလဲခ်င္တရ္ဆိုရင္ေတာ့…
GraphicsUnit GU = (GraphicsUnit)Enum.Parse(typeof(GraphicsUnit), getGraphicsUnit, true); gr.PageUnit = GU;
အခုလိုေလး ေျပာင္းလဲ ယူႏိုင္ပါတရ္ဗ်ာ။ Graphics ဆြဲယူတဲ့အပိုင္းကေတာ့ ရိုးရွင္းပါတရ္ဗ်ာ။ ဒီေတာ့ မရွင္းျပေတာ့ပါဘူးေနာ္။ Button Click ေပးလိုက္တဲ့အခါမွာ ခိုင္းေစထားတဲ့ Coding အျပည့္အစံုေလး ကိုေတာ့ ေအာက္မွာ ေလ့လာၾကည့္လိုက္ပါဗ်ာ။
void btn_Click(object sender, EventArgs e)
{
try
{
//Create Graphics Object with SmmothingMode
Graphics gr = pnViewGraphicsUnit.CreateGraphics();
gr.SmoothingMode = SmoothingMode.HighQuality;
gr.Clear(Color.Silver);
//Catch sender by User Clicked Button's information
Button btnSender = (Button)sender;
string getGraphicsUnit = btnSender.Text;
//Change String to GraphicsUnit and Assign PageUnit
GraphicsUnit GU = (GraphicsUnit)Enum.Parse(typeof(GraphicsUnit), getGraphicsUnit, true);
gr.PageUnit = GU;
//Draw Rectangle with Specified PageUnit
using (Pen p = new Pen(Color.Blue, 5))
{
gr.DrawRectangle(p, 5, 5, 50, 50);
}
}catch(Exception ex){
MessageBox.Show(ex.Message);
}
}
အခုေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔ အေနနဲ႔ PageUnit အေၾကာင္းကို အနည္းငယ္ တီးမိေခါက္မိၿပီးလို႔ ထင္ပါတရ္ဗ်ာ။
မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ရဲ႕ C# Graphics Programming အေၾကာင္းေလးကို ဆက္ေလ့လာၾကည့္ၾကရေအာင္ဗ်ာ။ အရင္အပတ္ Tutorial ေလးမွာတုန္းကေတာ့ က်ေနာ္တို႔ Graphics Object တစ္ခု ဘရ္လို ဖန္တီးႏိုင္မလဲဆိုတာနဲ႔ ပတ္သတ္ၿပီး နည္းလမ္း(၄)သြရ္နဲ႔ ေလ့လာခဲ့ ၾကၿပီးျဖစ္ပါတရ္။ ဒီေနာက္ပိုင္း ေလ့က်င့္ခန္းေတြမွာေတာ့ က်ေနာ္တို႔ Graphics တစ္ခု ဆြဲယူျခင္းနဲ႔ ပတ္သတ္ၿပီး နားလည္လြရ္ေအာင္ Coding ေလးေတြနဲ႔ ေဆြးေႏြး ေပးသြားပါ့မရ္။ ဒီေတာ့ က်ေနာ္တို႔ မသိမျဖစ္ သိရမရ္႕ အေၾကာင္းအရာ တစ္ခုရွိလာပါၿပီ။ ဒါကေတာ့ Coordinate System ပဲျဖစ္ပါတရ္။ Coordinate System လုိ႔ ေျပာလိုက္တာနဲ႔ မိတ္ေဆြတို႔အေနနဲ႔ X axis နဲ႔ Y axis ႏွစ္ခုပါတဲ့ Point ေတြကို ေျပးျမင္မိၾကလိမ့္မရ္လို႔ ထင္ပါတရ္။ က်ေနာ္တို႔ အငရ္တန္းထဲက ရင္းႏွီးခဲ့ၾကတာကိုဗ်။ ေသခ်ာပါတရ္ ဒီေန႔ က်ေနာ္တို႔ ဒီ Point ေတြ အေၾကာင္းကိုပဲ Visual C# နဲ႔ ဆက္ႏြယ္ၿပီး ဆင့္ကဲ ေလ့လာၾကည့္သြားၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။ ဒီေန႔ အပိုင္းေလးမွာေတာ့....
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အေၾကာင္းေလးေတြနဲ႔ Drawing Area ရဲ႕ စမွတ္ကို Client Area အတြင္း မိမိစိတ္ႀကိဳက္ေနရာက စတင္ႏိုင္တာေလးေတြနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးထားပါ့တရ္ဗ်ာ။ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔ အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
- Visula C# ရဲ႕ Default Coordinate System အေၾကာင္း
- 2D Space C# Graphic ရဲ႕
- World Coordinate System
- Page Coordinate System
- Device Coordinate System
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ မဆံုျဖစ္တာလည္း ၾကာၿပီထင္ပါ့။ ဒီအတြက္ ေတာင္းပန္ပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာေတာ့ Topic အနည္းငရ္ Change ၿပီး Visual C# ကို အသံုးျပဳကာ Graphics Programming တစ္ခုကို ဘရ္လို ေလ့လာႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြး ေပးသြားပါ့မရ္။
Visual C# မွာ Graphics Programming ကိုေလ့လာႏိုင္ဖို႔အတြက္ GUI+ Calss Libarary ေတြကို မ်ားစြာ ေထာက္ပံေပးထားၿပီး Graphics and Charts ေတြဆြဲရာမွာ 2D, 3D တို႔အျပင္ Polt View အေနနဲ႔ပါ ထုတ္ျပေပး ႏိုင္ပါတရ္ဗ်ာ။ က်ေနာ္အေနနဲ႔ နားလည္သေလာက္ကိုေတာ့ အေျခခံက်က်ေလး ေဆြးေႏြးေပးသြားပါ့မရ္။ ဒါေပမဲ့ က်ေနာ္လည္း စတင္ေလ့လာသူတစ္ေယာက္ျဖစ္လို႔ အဓိပၸါယ္ကြဲလြဲသြားတာ၊ တင္ျပပံု မွားယြင္းခဲ့တာမ်ား ရွိခဲ့ရင္ေတာ့ နားလည္ေပးၾကဖို႔နဲ႔ ျပန္လည္ေထာက္ျပေပးၾကပါလို႔ ေမတၱာရပ္ခံပါတရ္ဗ်ာ။
ဒီေန႔အပိုင္းေလးမွာေတာ့ Graphics Programming ရဲ႕ အေျခခံေလးေတြ ျဖစ္တဲ့....
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
စတဲ့ အေၾကာင္းေလးကို ေဆြးေႏြးထားပါတရ္။ ဒါေၾကာင့္ စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ားအားလံုး က်ေနာ္နဲ႔အတူ ေလ့လာ ၾကည့္ၾကရေအာင္ဗ်ာ။
- Graphics ရဲ႕ အေျခခံသေဘာတရားမ်ား
- Getting a Graphics Object အတြက္နည္းလမ္းမ်ား...
- Using CreateGraphics( ) Method
- Using Graphics.FromImage( ) Method
- Using e.Graphics in Paint Event Handlers
- Using e.Graphics in PrintPage Event Handlers
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔ Microsoft Visual Studion C# ကိုအသံုးျပဳၿပီးေတာ့ Non-Repeated Random Number တစ္ခုကို ဘရ္လိုဖန္တီးႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးသြားပါ့မရ္။ သေဘာတရားကေတာ့ မိမိမွာရွိၿပီးသားျဖစ္တဲ့ Number Collection တစ္ခု ထဲမွ Number Item ေတြကို ထုတ္ျပတဲ့ေနရာမွာ Item အားလံုး ကုန္စင္သြားသည္အထိ Number တစ္လံုးႏွင့္ တစ္လံုး ထပ္မသြားေအာင္ Auto Generate လုပ္ေပးတဲ့ လုပ္ငန္းစဥ္ေပါ့ဗ်ာ။ စမွတ္နဲ႔ဆံုးမွတ္ၾကားက Number ေတြကို အစဥ္တိုင္းမဟုတ္ပဲ Random ခ်ေပးဖို႔အတြက္ေတာ့ Random( ) ဆိုတဲ့ C# ရဲ႕ Method တစ္ခုကို အသံုးျပဳထားပါတရ္။ စိတ္၀င္းစားတဲ့ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို ၊ေမာင္ႏွမအားလံုး မဂၤလာပါ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔အေနနဲ႔ Preloading Effect ေလးတစ္ခုကို Percentage(100%) ပံုစံျဖစ္ ေဖာ္ျပ အသံုးျပဳတာေလးနဲ႔ ပတ္သတ္ၿပီးေလ့လာၾကည့္ သြားၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။ IT ကို တီးမိေခါက္မိသူေတြနဲ႔ Application User အားလံုးကေတာ့ Preloading ကိုရင္းႏွီးၿပီးသားျဖစ္ၾကပါလိမ့္မရ္။ Preloading ကိုနယ္ပယ္အသီးသီးမွာ Tools အမ်ိဳးမ်ိဳးကိုအသံုးျပဳၿပီး နည္းသဟာအသီးသီးနဲ႔ ေဖာ္ျပ အသံုးျပဳၾကပါတရ္။ မ်ားေသာအားျဖင့္ေတာ့ Preloading ကို User Waiting Time ေတြမွာအသံုးျပဳ ၾကတာမ်ားပါတရ္။ ဥပမာအေနနဲ႔ေျပာရရင္ မိတ္ေဆြတို႔ Data တစ္ခုကို Download ဆြဲယူတဲ့အခါမ်ိဳးမွာပဲျဖစ္ျဖစ္၊ Upload တင္တဲ့အခါမ်ိဳးမွာပဲျဖစ္ျဖစ္ ...% ရာခိုင္ႏႈန္းဘရ္ေလာက္ ၿပီးေနပါၿပီဆိုၿပီး ျပေနတဲ့ Progress Bar ေလးဟာ Preloading Effect တစ္ခုေပါ့။ ဒါ့အျပင္မိတ္ေဆြတို႔ Software တစ္ခုကို Install တင္ယူတဲ့အခါမ်ိဳးမွာ Software ထဲမွာပါတဲ့ Data အခ်က္အလက္ေတြကို မိမိစက္မွာအသံုးျပဳႏိုင္ဖို႔အတြက္ ဆြဲတင္ေနတဲ့ Install လုပ္ငန္းစဥ္ တစ္ခုဟာလည္း Preloading ပါပဲ။ ေနာက္ဆံုးမိတ္ေဆြတို႔ Facebook အသံုးျပဳတဲ့အခါ Connection Problem ေၾကာင့္ New Feeds မတတ္ပဲ အ၀ိုင္းေလး လည္ေနတာကလည္း Preloading တစ္မ်ိဳးပါပဲဗ်ာ။ ဒီေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ Preloading ဆိုတာကိုအနည္းငရ္ေတာ့ တီးမိေခါက္မိၿပီထင္ပါတရ္။ စိတ္၀င္းစားတဲ့ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကအံုးစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔အေနနဲ႔ Computer ဘာသာရပ္ကို စတင္ေလ့လာမည့္ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ားအတြက္ Computer ဆိုတာ ဘာလဲဆိုတာနဲ႔ ပတ္သတ္ၿပီး အနည္းငယ္ တီးမိေခါက္မိ ျဖစ္သြားရေလေအာင္ Computer Basic & Internet Course ဆိုတဲ့ ေခါင္းစဥ္ေလးနဲ႔ Powerpoint ေလးတစ္ခုကို မွ်ေ၀ေပးခ်င္ပါတရ္ဗ်ာ။ က်ေနာ္ ဒီဆိုက္မွာေတာ့ Programming ဘာသာရပ္နဲ႔ပဲ ပတ္သတ္ၿပီး အဓိကထား မွ်ေ၀ေပးထားပါတရ္။ ဒီေလ့က်င့္ခန္းေလးကေတာ့ ထူးထူးျခားျခားျဖစ္သြားမရ္ ထင္ပါတရ္ဗ်ာ။ တင္ေပးျဖစ္တာကလည္း ပရဟိတေက်ာင္းတစ္ေက်ာင္းက ခေလးေတြကို အလြရ္ကူဆံုးနဲ႔ Computer အေၾကာင္းကို သိသြားေစႏိုင္ေအာင္ ျပဳလုပ္ရင္း စာဖတ္သူမ်ားအတြက္ပါ မွ်ေ၀ေပးခ်င္တဲ့အတြက္တင္ျဖစ္သြားတာပါ။ ဒီေတာ့.... စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ၾကစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔အေနနဲ႔ C++ နဲ႔ ပတ္သတ္ၿပီး မိမိစိတ္ႀကိဳက္ ပံုေဖာ္ထားတဲ့ Desing & Pattern ေလးေတြကို ဘရ္လို ဖန္တီးယူႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး အပိုင္း(၂)ေလးကို ဆက္လက္ေဆြးေႏြးေပးသြားပါ့မရ္။ ေရွ႕မွာ အပိုင္း(၁)ေလးကို ေလ့က်င့္ခန္း (၁၀)ခုနဲ႔ ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္လို႔ အခုမွ စတင္ေလ့လာမရ္႕ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား အေနနဲ႔ ဆက္ဆက္ေလ့လာႏိုင္ေအာင္ ေရွ႕က အပိုင္း(၁)ေလးကို အရင္ ေလ့လာေစခ်င္ပါတရ္ဗ်ာ။ ဒီေလ့က်င့္ခန္းေတြကို က်ေနာ္အေနနဲ႔ Fackbook Page တစ္ခုျဖစ္တဲ့ https://www.facebook.com/pages/C-and-C-plus-plus-programming-language-for-beginner/ မွာလည္း ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္ပါတရ္။
ဒီေလ့က်င့္ခန္းေတြမွာ က်ေနာ္ေဆြးေႏြးေပးမရ္႕ပံုစံကေတာ့ ဖန္တီးယူမရ္႕ Desing ကိုခ်ျပမရ္။ ၿပီးရင္ေတာ့ C++ နဲ႔ Coding ေရးမွာျဖစ္ပါတရ္။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ က်ေနာ္တို႔ ေရးသားခဲ့တဲ့ Coding ဟာ မွန္လား / မွားလား ေသခ်ာကြဲျပားသိေအာင္ Trace လိုက္ၿပီး Error ရွာတဲ့ ပံုစံေလးနဲ႔ ခ်ဥ္းကပ္ေဆြးေႏြး ေပးသြားပါ့မရ္ဗ်ာ။ ဘာေၾကာင့္ Trace လိုက္ျပလဲဆိုတာကို အနည္းငရ္ ရွင္းျပရရင္... တခ်ိဳ႕ Coding ေတြဟာ က်ေနာ္တို႔လိုခ်င္တဲ့ အေျဖကို ထုတ္ေပးေနေပမရ္႕ Procedure က်က် စဥ္းစားၾကည့္ရင္ ခၽြင္းခ်က္မရွိ မမွန္ဘဲ Error ေတြ ရွိေနေသးတာမ်ိဳးေတြ ရွိပါတရ္ဗ်ာ။ ဒါေၾကာင့္ Coding ရဲ႕ ဘရ္ေနရာမွာ မိမိလိုလားခ်က္နဲ႔ ေသြဖယ္ သြားလဲဆိုတာကို အတိအက် သိႏိုင္ေအာင္ Trace လိုက္တဲ့ ပံုစံေလးကို ေဆြးေႏြးေပးတာျဖစ္ပါတရ္။ ကဲ... စကားေတြလည္း ရွည္ေနၿပီး... စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ ၾကစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔အေနနဲ႔ C++ နဲ႔ ပတ္သတ္ၿပီး မိမိစိတ္ႀကိဳက္ ပံုေဖာ္ထားတဲ့ Desing & Pattern ေလးေတြကို ဘရ္လို ဖန္တီးယူႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးသြားပါ့မရ္။ ဒီေလ့က်င့္ခန္းေတြကို က်ေနာ္အေနနဲ႔ Fackbook Page တစ္ခုျဖစ္တဲ့ https://www.facebook.com/pages/C-and-C-plus-plus-programming-language-for-beginner/ မွာလည္း ေဆြးေႏြးေပးခဲ့ၿပီးျဖစ္ပါတရ္။
ဒီေလ့က်င့္ခန္းေတြမွာ က်ေနာ္ေဆြးေႏြးေပးမရ္႕ပံုစံကေတာ့ ဖန္တီးယူမရ္႕ Desing ကိုခ်ျပမရ္။ ၿပီးရင္ေတာ့ C++ နဲ႔ Coding ေရးမွာျဖစ္ပါတရ္။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ က်ေနာ္တို႔ ေရးသားခဲ့တဲ့ Coding ဟာ မွန္လား / မွားလား ေသခ်ာကြဲျပားသိေအာင္ Trace လိုက္ၿပီး Error ရွာတဲ့ ပံုစံေလးနဲ႔ ခ်ဥ္းကပ္ေဆြးေႏြး ေပးသြားပါ့မရ္ဗ်ာ။ ဘာေၾကာင့္ Trace လိုက္ျပလဲဆိုတာကို အနည္းငရ္ ရွင္းျပရရင္... တခ်ိဳ႕ Coding ေတြဟာ က်ေနာ္တို႔လိုခ်င္တဲ့ အေျဖကို ထုတ္ေပးေနေပမရ္႕ Procedure က်က် စဥ္းစားၾကည့္ရင္ ခၽြင္းခ်က္မရွိ မမွန္ဘဲ Error ေတြ ရွိေနေသးတာမ်ိဳးေတြ ရွိပါတရ္ဗ်ာ။ ဒါေၾကာင့္ Coding ရဲ႕ ဘရ္ေနရာမွာ မိမိလိုလားခ်က္နဲ႔ ေသြဖယ္ သြားလဲဆိုတာကို အတိအက် သိႏိုင္ေအာင္ Trace လိုက္တဲ့ ပံုစံေလးကို ေဆြးေႏြးေပးတာျဖစ္ပါတရ္။ ကဲ... စကားေတြလည္း ရွည္ေနၿပီး... စိတ္၀င္စားတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား က်ေနာ္နဲ႔အတူ ေလ့လာၾကည့္ ၾကစို႔ဗ်ာ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။
