How to Use Pen-Constructors in C# Graphics

Posted by ေတဇာလင္း Wednesday, 7 October 2015 0 comments

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုးပဲ မဂၤလာပါဗ်ာ။ က်ေနာ္တို႔ C# Graphics ေလ့က်င့္ခန္းေလးကို ဆက္ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ အရင္အပတ္ေလ့က်င့္ခန္းမွာေတာ့ က်ေနာ္တို႔ Fill Method ေတြကို အသံုးျပဳၿပီး Myanmar National Flag တစ္ခုကို ဖန္တီးယူခဲ့ၾကပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းေလးမွာေတာ့ အေျခခံက်က်သိသြားေအာင္ ေနာက္သို႔ အနည္းငရ္ ျပန္ဆုတ္ၿပီး Graphic ဆြဲရာမွာ Pen ကို အသံုးျပဳႏိုင္ဖို႔အတြက္ Object ဘရ္လိုတည္ေဆာက္ႏိုင္မလဲ( )? ၊ အသံုးျပဳႏိုင္တဲ့ Constructor ေတြ ဘာေတြရွိေနအံုးမလဲ ဆိုတာေလးေတြကို ေဆြးေႏြးေပးသြားပါ့မရ္ဗ်ာ။
Pen Class ဟာ System.Drawing; ဆိုတဲ့ Library ရဲ႕ လက္ေအာက္ခံ Class တစ္ခုျဖစ္ပါတရ္။ Graphics တစ္ခု ဖန္တီးရာမွာ အရမ္းကို အေရးပါၿပီး မရွိမျဖစ္ လိုအပ္တဲ့ Tool တစ္ခုလည္း ျဖစ္ပါတရ္။ ဒီလို Drawing Tool အတြက္ Pen ကို အသံုးျပဳေတာ့မရ္ဆိုရင္ က်ေနာ္တို႔အေနနဲ႔ Pen Object တစ္ခုကို မျဖစ္မေန တည္ေဆာက္ေပးရပါတရ္။ တနည္းအားျဖင့္ ဒါဟာ Pen Class က ခြင့္ျပဳေပးထားတဲ့ Constructors ေတြကို ေခၚသံုးလိုက္တာပါပဲဗ်ာ။ Constructor ကို မေခၚထားပဲနဲ႔ က်ေနာ္တို႔ Pen ရဲ႕ အျခားေသာ Method ေတြ၊ Properties ေတြကို ေခၚသံုးလို႔ မရႏိုင္ပါဘူးဗ်(ဒီေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ Pen ကိုအသံုးျပဳမရ္ဆိုတာနဲ႔ Constructor တစ္ခုကို တည္ေဆာက္ေပးရမရ္ဆိုတာကိုေတာ့ မွတ္ထားေစခ်င္ပါတရ္)။
ကဲ… က်ေနာ္တို႔ သေဘာတရားေလးကို သိၿပီဆိုရင္ Pen Class မွာ က်ေနာ္တို႔ ေခၚယူအသံုးျပဳႏိုင္တဲ့ Constructor ဘယ္ႏွစ္ခုရွိလဲ ဆိုတာေလးကို ေလ့လာၾကည့္လိုက္ၾကရေအာင္။ Pen Class မွာ Constructor အေနနဲ႔ က်ေနာ္တို႔ ေလးမ်ိဳး ေခၚသံုးႏိုင္ပါတရ္ဗ်ာ။ ေအာက္မွာ အမည္ေလးေတြနဲ႔ သက္ဆိုင္ရာ Syntax ေလးေတြကို ေဖာ္ျပေပးထားပါတရ္။ ေလ့လာၾကည့္လုိက္ၾကပါအံုးဗ်ာ။

Pen(Brush) – Constructor
Initializes a new instance of the Pen class with the specified Brush. Initializes a new instance of the Pen class with the specified Brush. 
public Pen(
          Brush brush
)


Pen(Brush, Single) – Constructor
Initializes a new instance of the Pen class with the specified Brush and Width. 
public Pen(
 Brush brush,
 float width
)


Pen(Color) – Constructor
Initializes a new instance of the Pen class with the specified color. 
public Pen(
 Color color
)


Pen(Color, Single) – Constructor
Initializes a new instance of the Pen class with the specified Color and Width properties. 
public Pen(
 Color color,
 float width
)
ကဲ… အသံုးျပဳပံု Syntax ေတြကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလးကို စလိုက္ၾကရေအာင္….။
အဆင့္(၁)။ Drawing အတြက္ using System.Drawing;နဲ႔ using System.Drawing.Drawing2D;ဆိုတဲ့ Namespace ႏွစ္ခုကို ကိုေၾကျငာပါ။ ဒါမွ က်ေနာ္တို႔ project မွာ Graphics နဲ႔ သက္ဆိုင္တဲ့ Attribute ေတြကို ေခၚယူအသံုးျပဳႏိုင္မွာျဖစ္ပါတရ္ဗ်ာ။

အဆင့္(၂)။ က်ေနာ္တို႔ Form တြင္ Button ငါးခုနဲ႔ PanelControl တစ္ခုကိုသံုးထားပါတရ္။ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ပါဗ်ာ။ 
Control Name       Text         Backgroud Color
Button1 btnPen_BrushCtr       Pen(Brush) Constructor         -
Button2 btnPen_BrushSingleCtr Pen(Brush, Single) Constructor   -
Button3 btnPen_ColorCtr       Pen(Color) Constructor         -
Button4 btnPen_ColorSingleCtr Pen(Color, Single) Constructor   -
Button5 btnPensClass          Pens Class                 -
Panel1  pnPlotArea                   -                                 Silver

အဆင့္(၃)။ Button မ်ားအတြက္ Coding ေရးယူျခင္း
ဒီေလ့က်င့္ခန္းမွာ တူညီတဲ့ Graphic တစ္ခုတည္းကိုပဲ Construtors ေတြေျပာင္းလဲၿပီး ဆြဲယူထားတဲ့အတြက္ Coding သေဘာတရားအားလံုးဟာ အတူတူပါပဲဗ်ာ။ ဒီေတာ့ က်ေနာ္ Button တစ္ခုခ်င္းစီအတြက္ Coding ခြဲ မေရးျပေတာ့ပဲ တစ္စုတစ္စည္းတည္း ေဖာ္ျပေပးလိုက္ပါတရ္။ 
using System;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

namespace PenConstructors
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnPen_BrushCtr_Click(object sender, EventArgs e)
        {
            Graphics gr = pnPlotArea.CreateGraphics();

            gr.SmoothingMode = SmoothingMode.HighQuality;

            gr.Clear(Color.Silver);

            using (Pen p = new Pen(Brushes.Blue))
            {
                gr.DrawRectangle(p, 100, 50, 150, 200);
            }            
        }

        private void btnPen_BrushSingleCtr_Click(object sender, EventArgs e)
        {
            Graphics gr = pnPlotArea.CreateGraphics();

            gr.SmoothingMode = SmoothingMode.HighQuality;

            gr.Clear(Color.Silver);

            using (Pen p = new Pen(Brushes.SteelBlue, 10))
            {
                gr.DrawRectangle(p, 100, 50, 150, 200);
            } 
        }

        private void btnPen_ColorCtr_Click(object sender, EventArgs e)
        {
            Graphics gr = pnPlotArea.CreateGraphics();

            gr.SmoothingMode = SmoothingMode.HighQuality;

            gr.Clear(Color.Silver);

            using (Pen p = new Pen(Color.LightBlue))
            {
                gr.DrawRectangle(p, 100, 50, 150, 200);
            } 
        }

        private void btnPen_ColorSingleCtr_Click(object sender, EventArgs e)
        {
            Graphics gr = pnPlotArea.CreateGraphics();

            gr.SmoothingMode = SmoothingMode.HighQuality;

            gr.Clear(Color.Silver);

            using (Pen p = new Pen(Color.LightSteelBlue, 15))
            {
                gr.DrawRectangle(p, 100, 50, 150, 200);
            } 
        }

        private void btnPensClass_Click(object sender, EventArgs e)
        {
            Graphics gr = pnPlotArea.CreateGraphics();

            gr.SmoothingMode = SmoothingMode.HighQuality;

            gr.Clear(Color.Silver);

            gr.DrawRectangle(Pens.Brown, 100, 50, 150, 200);
        }

    }
}
 ခက္ခက္ခဲခဲ ဘာမွ မရွိပါဘူးဗ်ာ။ Pen ကို အသံုးျပဳၿပီး Graphics ဆြဲယူရာမွာ မိမိႏွစ္သက္ရာ ကာလာ နဲ႔ ဆြဲယူႏိုင္ဖို႔အတြက္ Color and Brushes ဆိုၿပီး Color Structure ႏွစ္ခုကို အသံုးျပဳႏိုင္ပါတရ္။ ဒုတိယ Parameter ေတြကေတာ့ မိမိ Pen ရဲ႕ အထူ၊အပါး(Width) ကို သတ္မွတ္ေပးတဲ့အခါမွာ သံုးတာပါဗ်ာ။ မိမိ ဖန္တီးလုိက္တဲ့ Constructor အေပၚမူတည္ၿပီး Color တစ္ခုတည္း သံုးမွာလား၊ Width ပါ ထည့္သံုးမလား ဆိုတာပဲ ကြာသြားမွာျဖစ္ပါတရ္။ ဖန္တီးယူရပံုက အရမ္းကို ရိုးရွင္းပါတရ္။

ေနာက္ဆံုး Button5 မွာေတာ့ Pens Class နဲ႔ Color တစ္ခုတည္းအသံုးျပဳၿပီး Draw and Fill Method ေတြထဲမွာ တိုက္ရိုက္ ေခၚသံုးႏိုင္တာေလးကို ေဆြးေႏြးေပးထားပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ႀကိဳက္ႏွစ္သက္ရာ နည္းလမ္းေတြနဲ႔ အသံုးျပဳႏိုင္ပါတရ္။
Coding ေလးနဲ႔ ScreenShoot ေလးကို ၾကည့္လိုက္ရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ ရွင္းျပစရာမလိုေလာက္ေအာင္ နားလည္သြားၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်ာ။ မိတ္ေဆြအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစဗ်ာ။

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

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

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