Drawing Star by using Point[ ]Array and DrawLines( )Method in C# Graphics

Posted by ေတဇာလင္း Wednesday 30 September 2015 0 comments

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

0 Responses so far.

Post a Comment