WLC_Programming Knowledge

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ 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 ကိုအသံုးျပဳျခင္း

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

 Control       Name            Text                       Backgroud Color
Button1        btnCreateCoordinate      Create Coordinate        -
Button2        btnCreateLineGraphics    Create Line Graphics     -
Panel1         pnPlotView               -                        Silver

ကဲ… က်ေနာ္တို႔ လိုလားခ်က္ကိုလဲသိၿပီး Form ရဲ႕ GUI ကိုခ်ၿပီးၿပီဆိုရ္ေတာ့ Button1 ကို Click ေပးတဲ့အခါ Coordinate Graph တစ္ခုကို ဘရ္လို ဖန္တီးႏိုင္မလဲဆိုတာေလးကို ေလ့လာၾကည့္ၾကမရ္ဗ်ာ။
အဆင့္(၃)။ 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;
}