Drawing Myanmar National Flag by using Point[ ]Array, FillRectangle( )Method and FillPolygon( )Method in C# Graphics

Posted by ေတဇာလင္း Monday 5 October 2015 0 comments

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ 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 ေလးေတြ ေရးယူလိုက္ၾကရေအာင္။ 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 ေတြကို ပံုေဖာ္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။

Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။