HTML5 canvas for number drawing

က်ြန္ေတာ္တုိ့ ဒီေန့ Hand Written Number Recognition Project ရဲ့ Part 1ျဖစ္တဲ့ HTML5 canvas for number drawing ကုိ စတင္ေလ့လာၾကည့္ရေအာင္။ပထမဦးဆုံး က်ြန္ေတာ္တုိ့ drawing form တစ္ခုကုိ html5 ရဲ့ canvas ကုိအသုံးျပဳျပီး တည္ေဆာက္ရမွာပါ။

ဒီForm ကုိတည္ေဆာက္တဲ့ေနရာမွာ က်ြန္ေတာ္ Paperjs ကုိ ယူသုံးျပီး တည္ေဆာက္သြားမွာပါ။မစခင္မွာ က်ြန္ေတာ္ Email subscribe လုပ္ဖုိ့ ေတာင္းဆုိခ်င္ပါတယ္။မိတ္ေဆြတုိ့ Subscribe လုပ္ထားရင္ ေနာက္ပုိင္းက်ြန္ေတာ္တုိ့ တင္သမ်ွကုိ inbox ထဲ ပုိ့ေပးလုိ့ရမွာပါ။

က်ြန္ေတာ္တုိ့ HTML5 form တစ္ခုကုိ စျပီး တည္ေဆာက္လုိက္ရေအာင္။

 

က်ြန္ေတာ္တုိ့ basic form တစ္ခုေတာ့ရသြားပါျပီ။က်ြန္ေတာ္တုိ့ line 8 ကေန 11ထိ လုိအပ္တဲ့ javascript ေတြကုိ ထည့္လုိက္ပါတယ္။style tag ထဲမွာေတာ့ က်ြန္ေတာ္ basic form ေလးကုိ design ဆင္ဖုိ့နဲ့ တကယ္အလုပ္လုပ္ဖုိ့ ေနာက္တစ္ဆင့္က်ရင္ css codeနဲ့ javascript codeနည္းနည္းေရးမွာပါ။

က်ြန္ေတာ္တုိ့ web appအတြက္ လုိအပ္တဲ့ css code နည္းနည္းထည့္လုိက္ပါတယ္။basic css codeေတြပဲမုိ့ က်ြန္ေတာ္အေရးၾကီးတဲ့ javascript codeေတြပဲ ရွင္းပါေတာ့မယ္။က်ြန္ေတာ္တုိ့ ဒီမွာ Paperjs ကုိ ယူသုံးထားတဲ့အတြက္ အမ်ားၾကီးေရးစရာမလုိေတာ့ပဲ လြယ္သြားပါတယ္။Paperjsနဲ့ ပတ္သတ္ျပီး ထပ္ေလ့လာလုိပါက http://paperjs.org/tutorials/ ကေန ေလ့လာနုိင္ပါတယ္။

အခု Line number 39 ကေန 66 ကုိပဲ အာရုံစုိက္က်တာေပါ့။က်ြန္ေတ္ာတုိ့ Paperjs ရဲ့ နည္းအတုိင္းပဲဒီ window ေပါ္မွာ paperjs ကုိ setup လုပ္လုိက္ပါတယ္။line 42 မွာ document.getElementById() ကုိ သုံးျပီး canvas elementကုိရယူလုိက္ပါတယ္။ျပီးေတာ့ က်ြန္ေတာ္တုိ့ background အတြက္ Rectangle တစ္ခုကုိ line 46 မွာ တည္ေဆာက္လုိက္ပါတယ္။rect objectကုိ send to back methodကုိသုံးလုိက္တဲ့ အတြက္ canvas ရဲ့ ေအာက္ခံlayerလုိျဖစ္သြားျပီး numberကုိအဲ့ေပါ္ ဆြဲလုိ့ရသြားပါတယ္။အဓိက ကေတာ့ က်ြန္ေတာ္တုိ့ png format နဲ့ Image Data ကုိပုိ့တဲ့အခါ processလုပ္ရတာအဆင္ေျပေအာင္လုိ့ပါ။

Line 54 to 64 ထိကေတာ့ က်ြန္ေတာ္တုိ့ paperjs ရဲ့ wayအတုိင္း path objectကုိတည္ေဆာက္ျပီး mouse နဲ့ ဆြဲလုိ့ ရေအာင္ လုပ္ထားတာပါ။pathရဲ့ color ကုိ black လုိ့ထားလုိက္ျပီး width ကုိ နည္းနည္းထူထားလုိက္ေတာ့ ပုိျမင္ရသြားပါတယ္။

OK ေနာက္ဆုံးအဆင့္အေနနဲ့ေတာ့ က်ြန္ေတာ္တုိ့ clear button ကုိ နွိပ္တဲ့အခ်ိန္ canvas ကုိ ျပန္ရွင္းေအာင္လုပ္ဖုိ့ပါ။

က်ြန္ေတာ့္တုိ့line 17 ကေန line27ထိ clear buttonကုိနွိပ္တဲ့ အခါ projectရဲ့ active layerျဖစ္တဲ့ number ဆြဲထားတဲ့ layerကုိ ဖ်က္ပစ္ေအာင္ project.activeLayer.remove(); နဲ့ေရးထားပါတယ္။ျပီးေတာ့ က်ြန္ေတာ့္ တုိ့ background ကုိ ျပန္တည္ေဆာက္လုိက္ပါတယ္။ေအာက္မွာေတာ့ Full Codeကုိေတြ့နုိင္ပါတယ္။က်ြန္ေတာ္တုိ့ ဒီေနရာမွာ က်ြန္ေတာ့္ example အရဆုိ paper-full.min.js ကုိ download လုပ္ျပီး Project folderထဲ ထည့္ထားဖုိ့လုိပါတယ္။အခုေရးထားတဲ့ Project တစ္ခုလုံးကုိ ေအာက္မွာ downloadလုပ္လိုက္ရင္ေတာ့ စမ္းၾကည့္ယံုပဲေပါ့။

Code File ကုိ ေအာက္ဆုံးမွာ  Download လုပ္နုိင္ပါတယ္။

Download:

1.Email ကုိ subscribe လုပ္ေပးပါ

2.Inbox,promotions tab,spam tab ေတြထဲမွာ က်ြန္ေတာ္တုိ့ ဆီက confirmation mailကုိစစ္ျပီး confirm လုပ္ေပးပါ။

3.Confirm လုပ္ျပီးတာနဲ့ code file download mailကုိ ပုိ့ေပးပါလိမ့္မယ္။Promotions tab,inbox,spam tabထဲမွာစစ္ေပးပါ။အကယ္လုိ့ Spam folder ထဲေရာက္ေနရင္ေတာ့ က်ြန္ေတ္ာ့mail address ျဖစ္တဲ့ sithuphyo@pyrobocity.orgကုိ  whitelist or contact list ထဲထည့္ေပးပါ။ေက်းဇူးတင္ပါတယ္။

Subscribe to our mailing list

* indicates required


Share:
Tags: ,

Leave a Reply