WLC_Programming Knowledge

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား အားလံုးပဲ မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔ Visual Studio C# ကို အသံုးျပဳၿပီး Image တစ္ခုကို ZoomIn, ZoomOut ပံုစံျဖစ္ ဘရ္လိုဆြဲယူ ၾကည့္ႏိုင္မလဲဆိုတာေလးနဲ႔ ပါတ္သတ္ၿပီး ေလ့လာၾကည့္ပါ့မရ္။ နည္းလမ္းေပါင္းစံု ရွိတဲ့အထဲကေနၿပီ အလြရ္ကူဆံုးနည္းလမ္းျဖစ္တဲ့ Graphic ဆြဲၿပီး ဖန္တီးယူတဲ့ နည္းလမ္းကိုပဲ အသံုးျပဳၿပီး ေလ့လာၾကည့္ပါ့မရ္။ က်ေနာ့္ ေလ့က်င့္ခန္းေတြကေတာ့ စတင္ ေလ့လာသူမ်ားအတြက္သာ ရည္ရြယ္ပါတရ္။ ဒါေၾကာင့္ သိေနၿပီးသား သူမ်ားအေနနဲ႔ နားလည္ေပးၾကဖို႔နဲ႔ က်ေနာ္ရဲ႕ တင္ျပပံု မွားယြင္းတာမ်ားရွိခဲ့ရင္ ျပန္လည္ေထာက္ျပေပးႏိုင္ဖို႔ ေမွ်ာ္လင့္ပါတရ္ဗ်။ ဒါကေတာ့ က်ေနာ္တို႔ Project မွာ အသံုးျပဳမရ္ Library File ေတြပါ။ using System; using System; using System.Drawing; using System.Windows.Forms; ဒီေန႔ ေလ့က်င့္ခန္းအတြက္ GUI တည္ေဆာက္ျခင္းအပိုင္းမွာေတာ့ က်ေနာ္ Button(1)ခု၊ PictureBox(1)ခု၊ Panel(1)ခု၊ TrackBar(1)ခုနဲ႔ Label(1)ခုကို အသံုးျပဳထားပါတရ္။ Tools ေတြရဲ႕ Properties ေတြကိုေတာ့ ေအာက္က Table အတိုင္း ျပင္ယူလိုက္ၾကပါဗ်ာ။ က်ေနာ္ကေတာ့ ေအာက္ကပံုအတိုင္း ပံုစံခ်ထားပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ GUI ကို ႀကိဳက္သလို ပံုစံေဖာ္ႏိုင္ပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းမွာေတာ့ Zoom Processing အတြက္ သီးသန္႔ Button မထည့္ေတာ့ပဲ TrackBar ရဲ႕ Scroll_Event ထဲက တိုက္ရိုက္ Processing လွမ္းလုပ္တဲ့ ပံုစံေလးနဲ႔ ေလ့လာၾကည့္သြားပါ့မရ္။ ဒီေတာ့ TrackBar Value ေျပာင္းလဲမႈရွိတိုင္း Zoom Processing ေျပာင္းလဲမႈျဖစ္မွာ ျဖစ္ပါတရ္။ Coding ကို တစ္ဆင့္ခ်င္းစီ ေလ့လာၾကည့္မရ္။ Image cloneImg; private void btnLoadImg_Click(object sender, EventArgs e) { LoadImage(picOriginalImg); //For ZoomImage tbZoomValue.Value = 50; cloneImg = picOriginalImg.Image; picOriginalImg.Size = new Size(cloneImg.Width, cloneImg.Height); } ဒါကေတာ့ က်ေနာ္တို႔ Load Image Button ကို အသံုးျပဳၿပီး PictureBox ေပၚသို႔ Image ဆြဲတင္တဲ့ေနရာမွာ Zoom Processing အတြက္ လိုအပ္ခ်က္မ်ားကို Initial သတ္မွတ္ေပးထားတာပါ။ Global Variable အျဖစ္ colneImg ဆိုၿပီး Processing လုပ္ေနစဥ္အတြင္းမွာ Image ကို သိုေလွာင္ရန္ Image Type တစ္ခုကို ဖန္တီးပါတရ္။ ၿပီးရင္ေတာ့ PictureBox ေပၚသို႔ Image ဆြဲတင္ၿပီးတဲ့အခ်ိန္မွာ ၄င္း Variable ထဲသို႔ Clone ပြားယူ Assign လုပ္လိုက္ပါတရ္။ ဆိုလိုတဲ့ သေဘာကေတာ့ ေနာက္ပိုင္း Processing လုပ္ငန္းစဥ္အတြင္း မူရင္း Image ကိုမထိပဲ ယခု Clone ပြားယူထားေသာ Image နဲ႔သာ Processing လုပ္ပါလို႔ ေျပာလိုက္တာပါ။ PictureBox ရဲ႕ Size ကို CloneImg ရဲ႕ Size အတိုင္း ေျပာင္းလဲလိုက္တာ ကေတာ့ ဆြဲတင္လိုက္ေသာ Image ရဲ႕ Width and Height အတိုင္း PictureBox က လိုက္ၿပီး Fixed ျဖစ္သြားေအာင္ပါ။ TrackBar ကို Initial Value = 50 ေပးထားတာကေတာ့ Zoom In/Out အတြက္ TrackBar ကို စမွတ္ 50 မွာ Zero Line ခ်လိုက္တာပါ။ ဒါမွ ကနဦး ဆြဲတင္လိုက္ေသာ Image ဟာ 50(0%)မွာ ေဖာ္ျပၿပီး 50 ေအာက္ငယ္သြားရင္ ဘရ္ေလာက္ % ထိ ZoomOut ျဖစ္သြားလဲဆိုတဲ့ ZoomOut Process လုပ္္ကာ 50 ထက္မ်ားသြားရင္ေတာ့ ဘရ္ေလာက္ % ထိ ZoomIn ျဖစ္သြားလဲဆိုတဲ့ ZoomIn Process ကိုလုပ္ပါလို႔ ခိုင္းလို႔ရမွာပါ။ နားလည္ၾကလိမ့္မရ္လို႔ ေမွ်ာ္လင့္ပါတရ္။

Zoom In/Out Method ကို ဆက္ေလ့လာၾကည့္ပါ့မရ္။ tbZoomValue ကို D_Click ေပးၿပီး TrackBar ရဲ႕ Scroll_Event ထဲမွာ ေအာက္ပါ Coding ကိုေရးယူလိုက္ပါဗ်ာ။ private void tbZoomValue_Scroll(object sender, EventArgs e) { if (cloneImg != null){ lblZoomValue.Text = tbZoomValue.Value - 50 + "%"; int reWidth, reHeight; if (tbZoomValue.Value <= 50) { reWidth = cloneImg.Width - ((cloneImg.Width * (50 - tbZoomValue.Value)) / 100); reHeight = cloneImg.Height - ((cloneImg.Height * (50 - tbZoomValue.Value)) / 100); Bitmap zoomImg = new Bitmap(cloneImg, reWidth, reHeight); Graphics gfx = Graphics.FromImage(zoomImg); picOriginalImg.Size = new Size(reWidth, reHeight); picOriginalImg.Image = zoomImg; } else { reWidth = cloneImg.Width + ((cloneImg.Width * (tbZoomValue.Value - 50)) / 100); reHeight = cloneImg.Height + ((cloneImg.Height * (tbZoomValue.Value - 50)) / 100); Bitmap zoomImg = new Bitmap(cloneImg, reWidth, reHeight); Graphics gfx = Graphics.FromImage(zoomImg); picOriginalImg.Size = new Size(reWidth, reHeight); picOriginalImg.Image = zoomImg; } } } အနည္းငရ္ရွင္းျပပါ့မရ္။ စစခ်င္းမွာ if()Statement နဲ႔ Zoom Processing လုပ္ခ်င္တဲ့ Image ကို PictureBox ေပၚသို႔ ဆြဲတင္ၿပီးသား ရွိ/မရွိ တနည္းအားျဖင့္ Processing လုပ္ဖို႔ Clone Image ရွိ/မရွိ စစ္ေဆးပါတရ္။ Image မဆြဲတင္ရေသးဘူး ဆိုရင္ေတာ့ Zoom Function အလုပ္လုပ္မွာ မဟုတ္ပါဘူးဗ်ာ။ ဒုတိယ cmd line ကေတာ့ ဘရ္ေလာက္ Zoom In/Out ျဖစ္ေနလဲဆိုတဲ့ Information ကို အသံုးျပဳသူကို ျပေစခ်င္လို႔ ထည့္ထားတာပါ။ TrackBar Value က 50 ေအာက္ငရ္ရင္ အႏုတ္တန္ဖိုးျပမွာျဖစ္ၿပီး 50 ထက္ႀကီးရင္ေတာ့ အေပါင္းတန္ဖိုး ျပေပးမွာျဖစ္ပါတရ္။ ေနာက္တစ္ေၾကာင္းမွာေတာ့ if()statement နဲ႔ zoom တန္ဖိုး (သို႔မဟုတ္) TrackBar Value ဟာ 50 နဲ႔ ညီလား၊ ငယ္လားလို႔ ထပ္စစ္ပါတရ္။ Connection မွန္ရင္ေတာ့ Zoom Out Processing အတြက္ ေအာက္က အလုပ္ကို ဆက္လုပ္ပါလိမ့္မရ္။ ဒီမွာေတာ့ Image ရဲ႕ Width and Height ကို ZoomOut ေၾကာင့္ ေျပာင္းလဲသြားေသာ Width and Height အတိုင္း Rebuild ျပန္လုပ္ေပးဖို႔အတြက္ reWidth နဲ႔ reHeight ဆိုၿပီး တြက္ထုတ္ယူထားပါတရ္။ တြက္ခ်က္မႈကိုေတာ့ အေရာင္းဆိုင္ေတြမွာ Discount တြက္တဲ့ ပံုေသနည္းအတိုင္း စဥ္းစားၿပီး တြက္ယူထားတာပါ။ ဥပမာ - က်သင့္ေငြ 1000 က်ေသာ ပစၥည္းတစ္ခုကို 5% Discount ေပးမရ္ဆိုပါစို႔။ ဒါဆို...
Net Amount = က်သင့္ေငြ - ((က်သင့္ေငြ x Discount) / 100);
ဒီ Formula အတိုင္း တြက္ယူႏိုင္ပါတရ္။ ဒီေတာ့...
Net Amount = 1000 – ((1000 x 5) /100); = 950 က်ပ္ က်သင့္မွာျဖစ္ပါတရ္။
ဒီနည္းလမ္း အတိုင္းပါပဲ။ Zoom Out ေၾကာင့္ ေျပာင္းလဲေပးရမရ္႕ Imag ရဲ႕ Size ကို တြက္ယူလိုက္တာပါ။ 50 ထဲက tbZoomValue.Value ကို ျပန္ႏုတ္ထားတာကေတာ့ ကနဦးတည္းက မူရင္း Image Size ကို 50 မွာ Zero Line ခ်ခဲ့လို႔ပါ။ ဒီပံုစံအတိုင္း က်ေနာ္ 5% ေလွ်ာ့ခ်တဲ့ ZoomOut တစ္ခုကို တြက္ျပပါ့မရ္။ ဥပမာ - က်ေနာ္တို႔ Image Size က 1024x768 ရွိတရ္ဆိုပါစို႔။ သူ႔ကိုမွ 5% ZoomOut လုပ္မရ္ေပါ့။ ဒီေတာ့ ပံုေသနည္းထဲကို ျဖတ္ၾကည့္ပါမရ္။

 
reWidth = cloneImg.Width - ((cloneImg.Width * (50 - tbZoomValue.Value)) / 100);
reWidth = 1024 – ((1024 * (50 - 45))/100);
reWidth = 1024 – ((1024 * 5)/100);
reWidth = 1024 – (5120/100);
reWidth = 1024 – 51;
reWidth = 973;

ဒါဆို Width = 1024 ကို 5% ZoomOut လုပ္တဲ့အခါမွာ ေျပာင္းလဲသြားတဲ့ reWidth = 973 ကို ရရွိပါၿပီ။ က်ေနာ္တို႔ Height ကို ဆက္တြက္ၾကည့္မရ္။

reHeight = cloneImg.Height - ((cloneImg.Height * (50 - tbZoomValue.Value)) / 100);
reHeight = 768 – ((768 * (50 - 45))/100);
reHeight = 768 – ((768 * 5)/100);
reHeight = 768 – (3840/100);
reHeight = 768 – 38;
reHeight = 730;

ဒါဆို Height = 768 ကို 5% ZoomOut လုပ္တဲ့အခါမွာ ေျပာင္းလဲသြားတဲ့ reHeight = 730 ကို ရရွိပါၿပီ။ ဒီေတာ့ 1024x768 ရွိေသာ Image တစ္ခုကို 5% ZoomOut လုပ္ရင္ 973x730 ရရွိမွာပါ။ ဒီနည္းအတိုင္း ရာခိုင္ႏႈန္း(%) သို႔မဟုတ္ TrackBar Value အႏုတ္ဘက္သို႔ ေျပာင္းလဲမူအေပၚ မူတည္ၿပီး ZoomOut Processing အတြက္ Width and Height ေျပာင္းလဲသြားမွာပဲ ျဖစ္ပါတရ္။ ေနာက္တစ္ဆင့္မွာေတာ့ ZoomOut ျဖစ္သြားေသာ Width and Height အတိုင္း Image ကုိ သိုေလွာင္ဖို႔ Bitmap Container တစ္ခု ဖန္တီးလိုက္ပါတရ္။ ၿပီးရင္ေတာ့ ၄င္း Bitmap အတိုင္း Grahic ဆြဲယူပါ့မရ္လို႔ ခိုင္းပါတရ္။ Graphic ဆြဲၿပီးသြားရင္ေတာ့ က်ေနာ္တို႔ ZoomOut Image တစ္ခုရပါၿပီး ဒီေကာင့္ကို မူရင္း Image Viewer ျဖစ္တဲ့ PictureBox ေပၚသို႔ ျပန္ဆြဲတင္ေပးလိုက္ယံုပါပဲဗ်ာ။ PictureBox ရဲ႕ Size ကို Rebuilt လုပ္ထားတာကေတာ့ ေျပာင္းလဲသြားေသာ ZoomOut Image အတိုင္း PictureBox Size ကုိ fixed ျဖစ္ေနေအာင္ပဲျဖစ္ပါတရ္။

ZoomIn အတြက္ တြက္ခ်က္မႈကလည္း ZoomOut ရဲ႕ သေဘာတရားအတိုင္းပါပဲဗ်ာ။ က်ေနာ္အေသးစိတ္ မရွင္းေတာ့ပါဘူး။ ((cloneImg.Width * (tbZoomValue.Value - 50)) / 100) ဒါက Percentage တြက္ယူတဲ့အပိုင္းပါ။ TrackBar Value က 50(Zero Line Value) ထက္ႀကီးသြားမွာျဖစ္လို႔ ျပန္ႏုတ္ေပးျခင္းျဖင့္ ZoomIn လုပ္ေပးမရ္႕ Percentage တန္ဖိုးကို တြက္ယူထားတာပါ။ မူရင္း Width and Height နဲ႔ ျပန္ေပါင္းေပးထားတာကေတာ့ မူလ Image ထက္ တြက္ထုတ္ထားေသာ Percentage အတိုင္း ႀကီးသြားေစခ်င္လို႔ပါ။ ဒီေလာက္ဆိုရင္ေတာ့ Zoom In/Out ကို Percentage နဲ႔ လုပ္ႏိုင္တဲ့ နည္းလမ္းေလးကို နားလည္ႏိုင္ၾကၿပိလို႔ ထင္ပါတရ္။

ပိုၿပီးနားလည္သြားေအာင္ Coding အျပည့္အစံုကို ေအာက္မွာ ေလ့လာၾကည့္လိုက္ၾကပါအံုးဗ်ာ။ using System; using System.Drawing; using System.Windows.Forms; namespace ImageProcessing { public partial class frmZoomImage : Form { public frmZoomImage() { InitializeComponent(); } Image cloneImg; private void btnLoadImg_Click(object sender, EventArgs e) { LoadImage(picOriginalImg); //For ZoomImage tbZoomValue.Value = 50; cloneImg = picOriginalImg.Image; picOriginalImg.Size = new Size(cloneImg.Width, cloneImg.Height); } public void LoadImage(PictureBox pic) { OpenFileDialog openFD = new OpenFileDialog(); openFD.Title = "Load an Image"; openFD.Filter = "JPEG Images|*.Jpg|PNG Images|*.Png|BITMAP Images|*.Bmp|GIF Images|*.Gif"; if (openFD.ShowDialog() == DialogResult.OK) { pic.Image = Image.FromFile(openFD.FileName); } } private void tbZoomValue_Scroll(object sender, EventArgs e) { if (cloneImg != null){ lblZoomValue.Text = tbZoomValue.Value - 50 + "%"; int reWidth, reHeight; if (tbZoomValue.Value <= 50) { reWidth = cloneImg.Width - ((cloneImg.Width * (50 - tbZoomValue.Value)) / 100); reHeight = cloneImg.Height - ((cloneImg.Height * (50 - tbZoomValue.Value)) / 100); Bitmap zoomImg = new Bitmap(cloneImg, reWidth, reHeight); Graphics gfx = Graphics.FromImage(zoomImg); picOriginalImg.Size = new Size(reWidth, reHeight); picOriginalImg.Image = zoomImg; } else { reWidth = cloneImg.Width + ((cloneImg.Width * (tbZoomValue.Value - 50)) / 100); reHeight = cloneImg.Height + ((cloneImg.Height * (tbZoomValue.Value - 50)) / 100); Bitmap zoomImg = new Bitmap(cloneImg, reWidth, reHeight); Graphics gfx = Graphics.FromImage(zoomImg); picOriginalImg.Size = new Size(reWidth, reHeight); picOriginalImg.Image = zoomImg; } } } } } Result ကိုေတာ့ ပံုမွာ ၾကည့္ရင္ အရွင္းႀကီး သိႏိုင္ပါလိမ့္မရ္။ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစ။