မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ 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 မ်ားျပင္ဆင္ယူၾကည့္ၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။
အဆင့္(၃)။ 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 ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ PageUnit / GraphicsUnit အေၾကာင္းေလးကို ေဆြးေႏြးေပးခဲ့ပါတရ္။ ဒီေန႔ေတာ့ ေနာက္တစ္ဆင့္အေနနဲ႔ က်ေနာ္တို႔ X and Y ပါတဲ့ Coordinate Graph တစ္ခုကို Custom အေနနဲ႔ C# Graphics ကို အသံုးျပဳၿပီး ဘရ္လို ဖန္တီး တည္ေဆာက္ႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပတ္သတ္ၿပီး ေဆြးေႏြးေပးသြားပါ့မရ္ဗ်ာ။ Coordinate Systems - C# Graphics Programming Part-2 မွာ ေလ့လာခဲ့ၾကၿပီးျဖစ္တဲ့ Default Coordinate System ကိုပဲ လက္ေတြ႔ ပံုေဖာ္ၾကည့္မွာျဖစ္ပါတရ္။ ေလ့က်င့္ခန္းရဲ႕ ရည္ရြယ္ခ်က္ကေတာ့ Coordinate Graph Surface တစ္ခုကို ဖန္တီးတတ္ရန္နဲ႔ ၄င္း Surface ေပၚမွာ တိက်တဲ့ အတိုင္းအတာနဲ႔ Graphis ေတြကို ဆြဲတတ္ရန္အတြက္ပဲ ျဖစ္ပါတရ္ဗ်ာ။ ဒါအျပင္ သင္ခန္းစာနဲ႔ ဆက္စပ္ၿပီး Graphics ရဲ႕
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 ကေတာ့… Coding တိုင္းမွာလည္း Comment ေလးေတြနဲ႔ ရွင္းထားေပးထားပါတရ္။ နားလည္ၾကလိမ့္မရ္ ထင္ပါတရ္ဗ်ာ။
အဆင့္(၅)။ မိမိႏွစ္သတ္ရာ 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 တစ္ခုကို ဖန္တီးတတ္ၿပီလို႔ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ Coordinate System နဲ႔ ပတ္သတ္ၿပီး World, Page, Device Coordinate System အေၾကာင္းေလးေတြကို ေလ့လာခဲ့ၿပီျဖစ္ပါတရ္ဗ်ာ။ Default Unit အေနနဲ႔ေတာ့ Coordinate System သံုးခုစလံုးဟာ Pixel နဲ႔ တိုင္းတာပါတရ္ဗ်ာ။ ဒီေတာ့ Graphic ရဲ႕ အတိုင္းအတာနဲ႔ ပတ္သတ္ၿပီး က်ေနာ္တို႔အေနနဲ႔ ေနာက္တစ္ခု မျဖစ္မေန သိထားရမွာက PageUnit ပါ။ ဒီေန႔ ေလ့က်င့္ခန္းေလး မွာေတာ့ က်ေနာ္တို႔ ၄င္း PageUnit အေၾကာင္းေလးကို ေလ့လာၾကည့္ၾကမွာ ျဖစ္ပါတရ္ဗ်ာ။ Graphic တစ္ခုကို Point ေတြခ်ရာမွာ PageUnit ဟာ အေရးႀကီးတဲ့ အခန္းက႑က ပါ၀င္ပါတရ္။ မိမိသံုးထားတဲ့ Graphics ရဲ႕ အတိုင္းအတာ Unit ကို သိမွသာ Point ေတြကို မွန္မွန္ကန္ကန္ ခ်ႏိုင္မွာ မဟုတ္ပါလားဗ်ာ။ Page Unit အေနနဲ႔ Visual C# မွာ Display, Document, Point, Pixel, World, Inch and Millimeter ဆိုၿပီးရွိပါတရ္။ ပံုဆြဲတဲ့အခါမွာ မိမိစိတ္ႀကိဳက္ အတိုင္းအတာ Unit ကို သံုးႏိုင္ပါတရ္ဗ်ာ။ Default Graphics Unit ကေတာ့ Point ပဲျဖစ္ပါတရ္။ Unit Conversion အေနနဲ႔ေတာ့ အနည္းငယ္ တီးမိေခါက္မိ သြားေအာင္ Inch to Other Conversion ကို ျပလိုက္ပါ့မရ္။ ေအာက္မွာ ေလ့လာၾကည့္လိုက္ပါအံုး။
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
အားလံုးအဆင္ေျပ ေခ်ာေမြ႕နိုင္ၾကပါေစ။