Create Straight Line Graphics Design by using DrawLine( )Method in C# Graphics - 2

Posted by ေတဇာလင္း Monday 28 September 2015 0 comments

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

0 Responses so far.

Post a Comment