ប្រសិនបើអ្នករំភើបនឹងថ្មី។ សមត្ថភាពរបស់ Microsoft Edge ប៉ុន្តែអ្នកមិនចង់ប្តូរទៅវាពីកម្មវិធីរុករកតាមអ៊ីនធឺណិតធម្មតារបស់អ្នកទេ ខ្ញុំយល់។ ខណៈពេលដែល Edge គឺពិតជាលឿន សិចស៊ី និងរលោងជាង Internet Explorerវាមិនមានកម្មវិធីបន្ថែម និងផ្នែកបន្ថែមច្រើនដូច Chrome ទេ។
ដំណឹងល្អគឺថា អ្នកមិនចាំបាច់ប្តូរពីកម្មវិធីរុករកតាមអ៊ីនធឺណិតបច្ចុប្បន្នរបស់អ្នក ដើម្បីទាញយកអត្ថប្រយោជន៍ពីមុខងារថ្មីៗមួយចំនួនរបស់ Edge នោះទេ។ អ្នកអាចគូរនៅលើទំព័របណ្ដាញ មើលអត្ថបទក្នុងរបៀបអានពេញអេក្រង់ និងសូម្បីតែស្វែងរក Google ដោយប្រើសំឡេងរបស់អ្នកដោយមិនចាំបាច់ចាកចេញពី Chrome ដែលអ្នកចូលចិត្ត។ លើសពីនេះទៀត ក្រុមការងារ Google កំពុងធ្វើការឥតឈប់ឈរ ដើម្បីបង្កើនល្បឿន និងកែលម្អកម្មវិធីរុករករបស់ពួកគេ (ឧទាហរណ៍ ពួកគេបានធ្វើឱ្យប្រសើរឡើងនូវការប្រើប្រាស់ថ្ម នេះបើយោងតាមការបង្ហោះនៅលើ Google+ ដោយវិស្វករផ្នែកទន់ជាន់ខ្ពស់ Peter Kasting)។
មិនអីទេ Google
Edge គិតថាវាល្អបំផុតព្រោះវារួមបញ្ចូលជាមួយការស្វែងរក។ ជំនួយការសំឡេង Cortana ។ ប៉ុន្តែអ្នកអាចទទួលបានមុខងារដូចគ្នានៅក្នុង Chrome Google មានមុខងារស្វែងរកសំឡេង "Hey Google" ផ្ទាល់ខ្លួន។ដើម្បីបើក "Ok Google" ចុចប៊ូតុងម៉ឺនុយនៅក្នុង Chrome (ប៊ូតុង "បន្ទាត់បី" នៅជ្រុងខាងស្តាំខាងលើ) ហើយចូលទៅកាន់ម៉ឺនុយ "ការកំណត់" ។ នៅក្រោមផ្នែក "ស្វែងរក" ធីកប្រអប់នៅជាប់ "បើកការស្វែងរកសំឡេងដោយប្រើពាក្យបញ្ជា "Ok Google" ។
ឥឡូវនេះ អ្នកអាចបើកដំណើរការការស្វែងរកដោយសំឡេង Google ដោយនិយាយថា "Ok Google" នៅពេលអ្នកនៅក្នុងផ្ទាំងថ្មី ឬនៅពេលអ្នកនៅលើ Google.com ។ បន្ទាប់ពីបើកដំណើរការការស្វែងរកដោយសំឡេង អ្នកគ្រាន់តែបញ្ចេញសំណួររបស់អ្នក ហើយ Google នឹងស្តាប់ បកប្រែពាក្យរបស់អ្នកទៅជាអត្ថបទ និងត្រឡប់លទ្ធផលស្វែងរកវិញ។
Doodles នៅលើគេហទំព័រ។
សាងសង់ក្នុង មុខងារគែមការគូរគឺសប្បាយ ប៉ុន្តែ Edge មិនមែនជាកម្មវិធីរុករកតែមួយគត់ដែលមានសមត្ថភាពបែបនេះទេ។ អ្នកអាចរកឃើញលក្ខណៈពិសេសស្រដៀងគ្នានៅក្នុង Chrome ជាមួយ មួយចំនួនធំសមត្ថភាពដោយការដំឡើងផ្នែកបន្ថែម Web Paint ។វាងាយស្រួលធ្វើ ធ្វើតាមតំណខាងលើ ហើយចុច "បន្ថែមទៅ Chrome" ។ នៅពេលដែលផ្នែកបន្ថែមត្រូវបានបន្ថែម អ្នកនឹងឃើញរូបតំណាងក្ដារលាយពណ៌នៅខាងស្តាំ ជ្រុងកំពូលបង្អួច។ ប្រសិនបើអ្នកចង់គូរអ្វីមួយនៅលើទំព័របណ្តាញ ចុចលើរូបតំណាងនេះ ហើយឧបករណ៍គំនូរនឹងបង្ហាញឡើង។
ដោយប្រើឧបករណ៍ទាំងនេះ អ្នកអាចគូរបន្ទាត់ បន្ថែមអត្ថបទ បញ្ចូលរូបរាងដែលបានបង្កើតជាមុន និងបំពេញតំបន់ដោយពណ៌នៅលើទំព័របណ្តាញ។ ប្រសិនបើអ្នកចង់រក្សាទុកការងាររបស់អ្នក ចុចលើរូបតំណាងកាមេរ៉ា ដើម្បីថតអេក្រង់។
របៀបអាន។
Chrome មិនមានភ្ជាប់មកជាមួយទេ។ របៀបពេញអេក្រង់ការអាន ប៉ុន្តែផ្នែកបន្ថែម Readability អាចលុបការផ្សាយពាណិជ្ជកម្ម និងធាតុផ្សេងទៀតចេញពីទំព័រដែលរំខានដល់ការអានប្រកបដោយផាសុកភាព ស្រដៀងទៅនឹងមុខងារ Reading នៅក្នុង Edge។
ចូលទៅកាន់ទំព័រផ្នែកបន្ថែមដែលអាចអានបាន ហើយចុច បន្ថែមទៅ Chrome ។ អ្នកនឹងឃើញរូបតំណាងដែលមើលទៅដូចជាកៅអីពណ៌ក្រហមនៅជ្រុងខាងលើខាងស្តាំនៃបង្អួចកម្មវិធីរុករករបស់អ្នក។ ចុចរូបតំណាងនេះ នៅពេលអ្នកចង់មើលទំព័រក្នុងទម្រង់ងាយស្រួលអាន ហើយជ្រើសរើស "អានឥឡូវនេះ" កម្មវិធីបន្ថែមនឹងព្យាយាមគូរទំព័រឡើងវិញ (វាដំណើរការល្អបំផុតនៅលើគេហទំព័រដែលមានអត្ថបទច្រើន)។
វាជារឿយៗកើតឡើងដែលយើងត្រូវការជាបន្ទាន់ដើម្បីធ្វើកំណត់ចំណាំមួយចំនួនដោយផ្ទាល់នៅលើអេក្រង់កម្មវិធីរុករក ឧទាហរណ៍ ការថតវីដេអូហ្វឹកហាត់ ឬបង្កើតរូបថតអេក្រង់ (រូបថតអេក្រង់) នៃអេក្រង់។
លើសពីនេះទៅទៀត អស្ចារ្យណាស់ និង ឧបករណ៍មានប្រយោជន៍របៀបដែល "ខ្មៅដៃអេក្រង់ / ជក់អេក្រង់" (យោងទៅតាមអ្នកនិពន្ធនៃគេហទំព័រ) អាចមានប្រយោជន៍ក្នុងការអនុវត្តប្រចាំថ្ងៃឧទាហរណ៍៖
1. ដើម្បីបោះចោលទេពកោសល្យសិល្បៈដែលប្រមូលបានរបស់អ្នកភ្លាមៗ ហើយចាប់យកវានៅក្នុងឯកសាររូបភាព PNG ឬ JPG ថ្មី។
2. ដើម្បីគូររូបតុក្កតាដែលគួរឱ្យអស់សំណើច ឬគួរឱ្យអស់សំណើចយ៉ាងឆាប់រហ័សដោយមិនចាំបាច់ទាញយករូបភាព និងបើកកម្មវិធី Photoshop ។
3. ដើម្បីបំពេញបន្ថែមរូបភាពនៅលើអេក្រង់ម៉ូនីទ័រតាមអ៊ីនធឺណិតជាមួយនឹងឃ្លា ឬសិលាចារឹកមួយចំនួន ក៏ដូចជា “ដូច្នេះ…” ជាច្រើនទៀត។
សិល្បៈដើមបែបនេះអាចត្រូវបានចែករំលែកជាមួយមិត្តភក្តិ, បោះពុម្ពនៅក្នុង បណ្តាញសង្គមល។ ហើយដោយមានជំនួយពីឧបករណ៍គូរអេក្រង់ (ការគូរលើអេក្រង់) វាងាយស្រួលក្នុងការបង្កើតភ្នំទាំងមូលនៃគំនូរ និងគំនូរកំប្លែងបំផុតនៅលើអ៊ីនធឺណិត ហើយបន្ទាប់មករក្សាទុកការងារនេះដើម្បីសើចជាមួយមិត្តភក្តិ ឬមិត្តរួមការងារ។
ជាទូទៅ អ្នកមិនដឹងថាអ្នកណាត្រូវការ ឬចង់គូរនៅលើអេក្រង់កម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ពួកគេ ហើយហេតុអ្វី។ ក្នុងករណីណាក៏ដោយ យើងនឹងមិនជ្រៀតជ្រែកឡើយ ប៉ុន្តែនឹងជួយអនុវត្តវានៅទីនេះ និងឥឡូវនេះប៉ុណ្ណោះ។
ការគូរលើអេក្រង់៖ តម្រូវការមូលដ្ឋាន
1. អ្នកបានដំឡើងកម្មវិធីរុករក Mozilla Firefox ហើយបើក។
2. អ្នកមានក្តារចុច និងកណ្តុរ។
3. អ្នកមានបំណងចង់គូរដោយផ្ទាល់នៅក្នុងបង្អួចកម្មវិធីរុករក។
ប្រសិនបើចំណុចទាំងអស់នេះជាការពិត នោះយើងអាចបន្តទៅការណែនាំជាជំហានៗ!
គូរលើអេក្រង់ក្នុងកម្មវិធីរុករក Firefox៖ ការណែនាំជាជំហានៗ
2. បន្ទាប់ពីការទាញយកកម្មវិធីបន្ថែម (ក្នុងរយៈពេលពីរបីវិនាទី) អ្នកនឹងត្រូវដំឡើងវា។ នៅក្នុងប្រអប់ដែលបើកសូមចុច "ដំឡើងឥឡូវនេះ" ។
3. បន្ទាប់ពីការដំឡើងលឿនរហ័សមួយភ្លែត យើងនឹងត្រូវបានសួរឱ្យចាប់ផ្តើមកម្មវិធីរុករកឡើងវិញ ដែលយើងគួរតែយល់ព្រម។ យើងចាប់ផ្តើមកម្មវិធីរុករកឡើងវិញដោយចុចលើប៊ូតុងលេចឡើងពិសេសឬធ្វើវាដោយដៃ (បិទ Mozilla ហើយបើកវាម្តងទៀត) ប៉ុន្តែ FireFox ត្រូវតែចាប់ផ្តើមឡើងវិញ។ ហើយបន្ទាប់ពីនោះការផ្លាស់ប្តូររបស់យើងនឹងមានប្រសិទ្ធភាព។
4. ដើម្បីបើកដំណើរការ Screen Brush, ខ្មៅដៃអេក្រង់, អេក្រង់ កម្មវិធីនិពន្ធអត្ថបទ... (ហៅវាតាមដែលអ្នកចូលចិត្ត)" អ្នកត្រូវបើកផ្ទាំងកម្មវិធីបន្ថែម ដែលមានទីតាំងនៅ៖
"មើល" - "របារឧបករណ៍" - "ផ្ទាំងបន្ថែម"
សម្រាប់ ការបើកដំណើរការរហ័សអ្នកអាចប្រើបន្សំគ្រាប់ចុច "Ctrl+\"
5. នៅក្នុងបន្ទះកម្មវិធីបន្ថែមដែលបើក យើងឃើញខ្មៅដៃអេក្រង់របស់យើង - និមិត្តសញ្ញា កម្មវិធីអេក្រង់គូរ - គូរនៅលើអេក្រង់ក្នុងកម្មវិធីរុករក។ ចុចលើវាហើយយល់ពីមុខងារ។
6. ដូចដែលអ្នកអាចឃើញនៅទីនេះអ្នកអាច៖
- ផ្លាស់ប្តូរទំហំជក់ ( បន្ទះឌីជីថល);
- ផ្លាស់ប្តូរពណ៌ជក់ (ចុចលើវាលពណ៌) ();
- បញ្ចូលអត្ថបទ (ជាភាសារុស្សី ឬភាសាអង់គ្លេស ពណ៌ និងទំហំផ្សេងៗគ្នា — ប៊ូតុងពិសេស);
- រក្សាទុកលទ្ធផលក្នុងរូបភាព (ថាសទន់);
- កំណត់បង្អួចឡើងវិញ (សន្លឹកទទេ);
- លុបគំនូររបស់អ្នក (ជ័រលុប) ។
តើអ្នកបានគូរលើអ៊ីនធឺណិតយូរហើយ ដោយមិនរាប់បញ្ចូល "VKontakte" graffiti ទេ? នេះមិនមែនជាមធ្យោបាយសម្រាប់ "PREVED" នៅលើជញ្ជាំងអ្នកជិតខាងទេ)
សេចក្តីផ្តើម
ខ្ញុំធ្លាប់មានគំនិតមួយ ហើយបានប្រមូលបញ្ជីដ៏ធំនៃអ្នកកែសម្រួលអនឡាញ ដែលយ៉ាងហោចណាស់ខ្ញុំអាចគូរអ្វីមួយបាន។ បន្ទាប់មក វាជារឿងថ្មី ហើយវាគួរឱ្យចាប់អារម្មណ៍ក្នុងការមើលពីអ្វីដែលមនុស្សកើតឡើង... ប្រសិនបើការចងចាំរបស់ខ្ញុំបម្រើខ្ញុំយ៉ាងត្រឹមត្រូវ វាមានប្រហែល 40 ក្នុងចំណោមពួកគេ រួមទាំងឧបករណ៍គូររូប "កុមារ" ផ្សេងៗ។ ខ្ញុំបានប្រមូលវាហើយនៅទីនេះ ការអនុវត្តជាក់ស្តែងសំរាមទាំងអស់នេះពីបញ្ជីរកមិនឃើញ។
បន្ទាប់មក ក្នុងអំឡុងពេលនៃប្លុករបស់ខ្ញុំ (ដែលលែងមាន ហើយនឹងមិនមាន) ខ្ញុំបានធ្វើការជ្រើសរើសអ្នកកែសម្រួលជាច្រើន ដែលវាអាចធ្វើទៅបានដើម្បីគូរការងារដែលបានបញ្ចប់ច្រើន ឬតិច។ រួចហើយនៅក្នុងបញ្ជីនេះមានប្រហែល 5-7 ក្នុងចំណោមពួកគេ (ខ្ញុំមិនចាំទៀតទេ) ។
ចម្លែកគ្រប់គ្រាន់ហើយ បន្ទាប់ពីជិតពីរឆ្នាំចាប់តាំងពីពេលនោះមក ខ្ញុំនៅតែមានមួយនៅក្នុងចំណាំរបស់ខ្ញុំ សេវាកម្មគួរឱ្យចាប់អារម្មណ៍ចាប់តាំងពីបញ្ជីចុងក្រោយរបស់ខ្ញុំ។ ដោយបានឆ្លងកាត់ប្រភេទនៃ "ការជ្រើសរើសធម្មជាតិ" បែបនេះគាត់បានរស់រានមានជីវិតដោយជោគជ័យរហូតដល់ថ្ងៃនេះហើយត្រូវបានមកលេងដោយរីករាយដោយខ្ញុំ ... បាទយ៉ាងហោចណាស់ម្តងក្នុងមួយខែដែលប្រាកដ :D ។
អ្វី? កន្លែងណា?
ដូច្នេះតើសេវាកម្មនេះជាអ្វី? - អ្នកសួរ 2draw.net - ខ្ញុំនឹងឆ្លើយ : ឃ។
ទោះបីជារូបរាងមិនទាក់ទាញ (តាមគំនិតរបស់ខ្ញុំ) មុខងារនៃគេហទំព័រគឺល្អណាស់។ មានប្លក់ វិចិត្រសាលនៃការងារអ្នកប្រើប្រាស់ វេទិកា វីគី... ហើយតាមពិត បន្ទប់គូរ។
ឥឡូវនេះរឿងដំបូងដែលយើងត្រូវការគឺត្រូវដំឡើងកម្មវិធីបញ្ជាកុំព្យូទ័របន្ទះ (ប៊ិច) សម្រាប់កម្មវិធីរុករកដូច្នេះប៊ិចអាចផ្ទេរសម្ពាធយ៉ាងប៉ិនប្រសប់ទៅកម្មវិធីនៅក្នុងកម្មវិធីរុករក។ ទាញយកកម្មវិធីបញ្ជាសម្រាប់
សរសេរ កូដដ៏ស្រស់ស្អាត- វាជាសេចក្តីរីករាយ ប៉ុន្តែវាពិបាកក្នុងការចែករំលែកសេចក្តីរីករាយនេះជាមួយអ្នកសរសេរកម្មវិធីផ្សេងទៀត មិនមែននិយាយអំពីអ្នកដែលមិនមែនជាអ្នកសរសេរកម្មវិធីនោះទេ។ ពេលទំនេររបស់ខ្ញុំពីការងារ និងចំណាយពេលជាមួយគ្រួសារ ខ្ញុំមានគំនិតអំពីរបៀបសរសេរកំណាព្យដោយប្រើធាតុផ្ទាំងក្រណាត់ដើម្បីគូរនៅក្នុងកម្មវិធីរុករក។
មានពាក្យមួយចំនួនធំដែលពិពណ៌នាអំពីការពិសោធន៍ដែលមើលឃើញនៅលើកុំព្យូទ័រ ដ្យាក្រាមកូដ ការបង្ហាញ សិល្បៈអន្តរកម្ម ជាដើម។ ដើម្បីពិពណ៌នាអំពីដំណើរការនេះ ខ្ញុំបានដោះស្រាយលើពាក្យសរសេរកម្មវិធីកំណាព្យ។ កំណាព្យគឺជាផ្នែកមួយនៃពាក្យសំដីដែលមានភាពភ្លឺចែងចាំង ពន្លឺ សង្ខេប និងសោភ័ណភាព។ នេះមិនមែនជាគំនូរព្រាងពាក់កណ្តាលដែលបានបញ្ចប់នៃគំនិតនៅក្នុងសៀវភៅគំនូសព្រាងនោះទេ ប៉ុន្តែជាអ្វីដែលស៊ីគ្នានឹងបង្ហាញដល់អ្នកមើលដើម្បីភាពរីករាយរបស់ពួកគេ។ កំណាព្យមិនមែនជាឧបករណ៍ទេ ប៉ុន្តែវារស់នៅដើម្បីរំលេចអារម្មណ៍។
ខ្ញុំបានអានសៀវភៅជាច្រើនអំពីគណិតវិទ្យា បច្ចេកវិទ្យាកុំព្យូទ័ររូបវិទ្យា និងជីវវិទ្យា ដើម្បីភាពរីករាយរបស់អ្នកផ្ទាល់។ ហើយអ្វីដែលខ្ញុំដឹងយ៉ាងឆាប់រហ័សគឺថាប្រសិនបើខ្ញុំនិយាយអំពីគំនិតមួយ មនុស្សនឹងឆាប់ធុញនឹងវា។ តាមពិតទៅ ខ្ញុំអាចយកគំនិតមួយដែលខ្ញុំចាប់អារម្មណ៍មិនគួរឱ្យជឿ ហើយធ្វើឱ្យនរណាម្នាក់ចាប់អារម្មណ៍យ៉ាងឆាប់រហ័ស ទោះបីជាមនុស្សនោះមិនមានគំនិតអំពីការសរសេរកូដ ឬរបៀបដែលវាដំណើរការក៏ដោយ។ អ្នកមិនចាំបាច់ស្វែងយល់ពីគំនិតទស្សនវិជ្ជាស្មុគស្មាញ ឬការគណនាតាមការគណនា ដើម្បីរៀបចំកំណាព្យនោះទេ។ អ្វីដែលអ្នកត្រូវការគឺជាការចង់ឃើញអ្វីមួយដែលមានជីវិតនិងដង្ហើមនៅលើអេក្រង់របស់អ្នក។ លេខកូដ និងឧទាហរណ៍ដែលខ្ញុំទុកខាងក្រោមនឹងជួយអ្នកឱ្យយល់ពីរបៀបអនុវត្តដំណើរការដ៏រហ័ស និងមិនមានភាពស្មុគស្មាញនេះ។
ចំណុចសំខាន់គឺថាការបង្កើតកំណាព្យគួរតែនៅតែសាមញ្ញនិងងាយស្រួល។ មិនចាំបាច់ចំណាយពេល 3 ខែដើម្បីសាងសង់ទេ បើទោះបីជាការបង្ហាញដ៏ឡូយណាស់។ ផ្ទុយទៅវិញ ចូរបង្កើតកំណាព្យចំនួន 10 ដែលនឹងជួយនាំយកគំនិតរបស់អ្នកទៅកាន់ជីវិត។ សរសេរកូដដែលគួរឱ្យរំភើប ហើយកុំខ្លាចបរាជ័យ។
ការណែនាំអំពីផ្ទាំងក្រណាត់
និយាយឱ្យខ្លី ផ្ទាំងក្រណាត់គឺជា 2 វិមាត្រ ធាតុ rasterរូបភាព ដែលស្ថិតនៅក្នុង DOM ( គំរូវត្ថុឯកសារ) ហើយអាចត្រូវបានគូរនៅទីនោះ។ អ្នកអាចគូរទាំងក្នុងបរិបទ 2d និងក្នុងបរិបទ WebGL។ បរិបទគឺជា JavaScript ដែលយើងប្រើដើម្បីចូលប្រើឧបករណ៍គំនូរ។ ដំណើរការ JavaScript ដែលអាចប្រើបានសម្រាប់ផ្ទាំងក្រណាត់គឺច្បាស់ណាស់ មិនដូចដំណើរការដែលមានសម្រាប់ SVG ទេ។ ដំណើរការណាមួយដែលហៅថាធាតុទាំងមូល ជាជាងអ្វីដែលគូរចូលទៅក្នុងផ្ទាំងក្រណាត់ គឺពិតជាដូចគ្នាទៅនឹង ធាតុធម្មតា។រូបភាព។ នៅទីនេះ ឧទាហរណ៍ជាមូលដ្ឋានផ្ទាំងក្រណាត់៖
Var canvas = document.getElementById("example-canvas"); var context = canvas.getContext("2d"); //គូរចតុកោណកែងពណ៌ខៀវ context.fillStyle = "#91C0FF"; context.fillRect(100, // x 100, // y 400, // ទទឹង 200 // កម្ពស់); //Draw some text context.fillStyle = "#333"; context.font = "18px Helvetica, Arial"; context.textAlign = "កណ្តាល"; context.fillText("ពិភពដ៏អស្ចារ្យនៃផ្ទាំងក្រណាត់", // អត្ថបទ 300, // x 200 // y);
មិនមានអ្វីស្មុគស្មាញនៅទីនេះទេ អ្នកអាចចាប់ផ្តើមបានយ៉ាងងាយស្រួល។ រឿងតែមួយគត់ដែលអាចមានការភាន់ច្រលំបន្តិចគឺបរិបទដែលត្រូវតែកំណត់រចនាសម្ព័ន្ធជាមួយការកំណត់ដូចជា fillStyle, lineWidth, font និង strokeStyle មុនពេលគំនូរពិតប្រាកដត្រូវបានប្រើ។ វាអាចមានភាពងាយស្រួលក្នុងការភ្លេចធ្វើបច្ចុប្បន្នភាព ឬផ្ទុកការកំណត់ឡើងវិញ ហើយបញ្ចប់ដោយលទ្ធផលដែលមិនរំពឹងទុក។
ការបង្កើតចលនា
ឧទាហរណ៍ដំបូងគ្រាន់តែរត់និងបត់ គំនូរឋិតិវន្តចូលទៅក្នុងផ្ទាំងក្រណាត់។ នេះគឺល្អ និងល្អ ប៉ុន្តែភាពសប្បាយរីករាយពិតប្រាកដចាប់ផ្តើមនៅពេលអ្នកកំណត់ល្បឿនដល់ 60 ហ្វ្រេមក្នុងមួយវិនាទី។ យូ កម្មវិធីរុករកទំនើបមានកម្មវិធីបន្ថែមនៅក្នុងមុខងារ requestAnimationFrame ដែលធ្វើសមកាលកម្មកូដគំនូរប្រភពជាមួយគំនូរដែលផ្លាស់ទីក្នុងកម្មវិធីរុករក។ នេះធ្វើអោយប្រសើរឡើងនូវប្រសិទ្ធភាពនិងផ្តល់នូវចលនារលូន។ គោលដៅបង្ហាញគួរតែជាកូដដែលផ្លាស់ទីក្នុងល្បឿន 60 ហ្វ្រេមក្នុងមួយវិនាទី។
var canvas = document.getElementById("example-canvas");
Var context = canvas.getContext("2d"); var counter = 0; var rectWidth = 40; var rectHeight = 40; var xMovement; // ដាក់ចតុកោណកែង កណ្តាលនៃអេក្រង់ var y = (canvas.height / 2) - (rectHeight / 2); context.fillStyle = "#91C0FF"; function draw() ( // មានវិធីដ៏ឆ្លាតវៃក្នុងការបង្កើនពេលវេលា ប៉ុន្តែនេះគឺសម្រាប់គោលបំណងបង្ហាញ counter++; // Cool math ខាងក្រោម។ ការពន្យល់បន្ថែមនៅក្នុងអត្ថបទខាងក្រោមកូដ។ xMovement = Math.sin(counter / 25) * canvas .width * 0.4 + canvas.width / 2 - rectWidth / 2 // សម្អាតលទ្ធផលគំនូរពីមុន context.clearRect(0, 0, canvas.width, canvas.height); xMovement, y, rectWidth, rectHeight); // ស្នើសុំនៅពេលដែលមានស៊ុមចលនាថ្មី ដើម្បីហៅមុខងារនេះម្តងទៀត ស្នើសុំAnimationFrame(draw) draw();
គំនូរគណិតវិទ្យា
ឥឡូវនេះ សូមប្រយ័ត្ន មុននឹងយើងនិយាយអំពីការសរសេរកម្មវិធី និងការគូរនៅលើម៉ូនីទ័រ ប៉ុន្តែនៅទីនេះខ្ញុំបានរៀបចំអ្វីមួយជាគណិតវិទ្យា។ ខ្ញុំសារភាពថាខ្ញុំតែងតែស្រឡាញ់គណិតវិទ្យា (មិនដូចសិល្បករដទៃទៀត)។ ទោះបីជាស្រលាញ់យ៉ាងនេះក៏ដោយ ក៏ខ្ញុំខកចិត្តចំពោះរបៀបដែលគេបង្រៀននៅសាលា។ វាត្រូវបានបង្រៀនជាផ្លូវការពេក ដែលប្រហែលជាល្អសម្រាប់គ្រូគណិតវិទ្យា ប៉ុន្តែវាបាត់បង់ការរំភើប ការស្វែងយល់ និងការអនុវត្តជាក់ស្តែងដែលអាចប្រើដើម្បីសម្រេចរឿងគួរឱ្យចាប់អារម្មណ៍ជាច្រើន។ ប៉ុន្តែក៏មានដែរ។ ដំណឹងល្អអ្នកសរសេរកម្មវិធីមិនយកចិត្តទុកដាក់លើរឿងនេះទេ ហើយផ្តោតលើអ្វីដែលគួរឱ្យចាប់អារម្មណ៍បន្ថែមទៀត។
ឥឡូវនេះខ្ញុំនឹងព្យាយាមពន្យល់យ៉ាងរហ័សពីរបៀបដែលប្រព័ន្ធកូអរដោណេដំណើរការ។ នេះនឹងមានប្រយោជន៍ក្នុងការយល់ដឹងពីរបៀប មុខងារគណិតវិទ្យាអាចបង្កើតចលនា។ រូបភាពខាងក្រោមបង្ហាញពីប្រព័ន្ធកូអរដោនេអន្តរកម្ម។ សូមចំណាំថាមិនត្រឹមតែមានកូអរដោនេ x ប៉ុណ្ណោះទេ។ មុខងារដែលខ្ញុំបានគូរត្រូវបានតំណាងជា (a*x+b)*c+d។ លេងជាមួយគ្រាប់រំកិលនៅលើក្រាហ្វ ហើយអ្នកនឹងឃើញពីរបៀបដែលតម្លៃនីមួយៗអាចកែតម្រូវទីតាំង និងមាត្រដ្ឋានរបស់ក្រាហ្វ។
ឥឡូវនេះខ្ញុំនឹងសរសេររូបមន្តរបស់ខ្ញុំឡើងវិញដោយប្រើកូដគំរូដែលយើងមានពីមុន ហើយដែលនឹងងាយស្រួលអាន។
វ៉ារ a = 1 / 25 // ធ្វើឱ្យលំយោលកើតឡើងយឺតជាង x = បញ្ជរ // ផ្លាស់ទីតាមក្រាហ្វបន្តិចរាល់ពេលដែលគូរ () ត្រូវបានគេហៅថា b = 0 // មិនចាំបាច់កែតម្រូវក្រាហ្វឡើងលើឬ ចុះ c = ទទឹង * 0.4, // ធ្វើឱ្យលំយោលមានទទឹងតិចជាងពាក់កណ្តាលផ្ទាំងក្រណាត់ d = canvas.width / 2 - rectWidth / 2; // កែប្រែទីតាំងនៃចតុកោណកែងឱ្យនៅចំកណ្តាល xMovement = Math.sin(a * x + b) * c + d;
ការបញ្ចូលទិន្នន័យ
ដោយទុកចោលនូវអ្វីដែលយើងបានធ្វើនៅពេលនេះ សូមចំណាយពេលពីរបីនាទីដើម្បីគិតអំពីអ្វីដែលអ្នកអាចធ្វើបាន ឧបករណ៍ផ្សេងៗការបញ្ចូលរបស់អ្នកប្រើដើម្បីផ្លាស់ទីការ៉េក្នុងទំព័រ។ មានជម្រើសជាច្រើនដែលមាននៅក្នុងកម្មវិធីរុករក រួមទាំងមីក្រូហ្វូន កាមេរ៉ាបណ្ដាញ កណ្តុរ ក្តារចុច និងបន្ទះហ្គេម។ ជម្រើសដែលគ្រប់គ្រងដោយកម្មវិធីជំនួយបន្ថែមអាចមានដូចជា Leap Motion ឬ Kinect។ ដោយប្រើ WebSockets និងម៉ាស៊ីនមេ អ្នកអាចភ្ជាប់ការមើលឃើញទៅនឹងរូបភាពដែលផលិតនៅផ្ទះ មធ្យោបាយបច្ចេកទេស(មានន័យថាអ្នកជំនួយ?) ភ្ជាប់មីក្រូហ្វូនរបស់អ្នកទៅ Web Audio API ហើយបញ្ចូលភីកសែលសំឡេងរបស់អ្នក។ អ្នកថែមទាំងអាចបង្កើតឧបករណ៍ចាប់សញ្ញាចលនាចេញពី webcam និងបន្លាចសាលានៃត្រីនិម្មិត (ខ្ញុំបានធ្វើវានៅក្នុង លើកចុងក្រោយនៅក្នុង Flash ប្រហែលប្រាំឆ្នាំមុន) ។
ឥឡូវនេះអ្នកមានគំនិតរបស់អ្នក សូមក្រឡេកមើលឧទាហរណ៍មួយចំនួនទៀត។ មួយការ៉េធុញណាស់ សូមបញ្ចូលការ៉េបន្ថែមទៀត។ ប៉ុន្តែជាដំបូង ចូរយើងបង្កើតមុខងារមួយ (ប្រព័ន្ធសំរបសំរួល) ដែលនឹងមានប្រយោជន៍សម្រាប់យើងតាមវិធីជាច្រើន។ តោះហៅវាថា ចំណុច។ ភាពខុសប្លែកគ្នាដែលនឹងជួយយើងក្នុងការធ្វើការជាមួយវត្ថុដែលមានចលនាគឺថាយើងត្រូវប្រើវ៉ិចទ័រក្រៅពី x និង y ។ ខ្ញុំបានចងក្រងកូដគំរូទៅក្នុងថ្នាក់ three.js Vector2។ វាកាន់តែងាយស្រួលក្នុងការធ្វើការជាមួយវ៉ិចទ័រ x និងវ៉ិចទ័រ y ប៉ុន្តែមានជម្រើសងាយស្រួលជាច្រើនទៀត។ ដើម្បីយល់កាន់តែច្បាស់អំពីអ្វីដែលយើងកំពុងនិយាយអំពី សូមទស្សនានៅទីនេះ។ (គួរតែមានតំណភ្ជាប់នៅទីនេះ) ។
ចំណុចដ៏អស្ចារ្យ
ឧទាហរណ៍ទាំងនេះនឹងមានភាពស្មុគស្មាញបន្តិច ព្រោះវាពាក់ព័ន្ធនឹងវត្ថុ ប៉ុន្តែវាមានតម្លៃ។ សូមក្រឡេកមើលគំរូកូដដើម្បីយល់ពីរបៀបដែល Scene ថ្មីដំណើរការ ដែលនឹងជួយអ្នកអំពីមូលដ្ឋានគ្រឹះនៃគំនូរផ្ទាំងក្រណាត់។ របស់យើង។ ចំណុចថ្មី។វានឹងមានសញ្ញាសម្គាល់ដើម្បីចូលប្រើអថេរណាមួយ ដូចនៅក្នុងបរិបទផ្ទាំងក្រណាត់ដែរ។
មុខងារ Dot(x, y, scene) ( var speed = 0.5; this.color = "#000000"; this.size = 10; this.position = new THREE.Vector2(x,y); this.direction = ថ្មីបី .Vector2(ល្បឿន * Math.random() - speed / 2, speed * Math.random() - speed / 2);
ដើម្បីចាប់ផ្តើមធ្វើការជាមួយអ្នកសាងសង់ ការកំណត់រចនាសម្ព័ន្ធប្រតិបត្តិការរបស់វាត្រូវបានកំណត់រចនាសម្ព័ន្ធសម្រាប់ចំណុច ហើយអថេរមួយចំនួនដែលចាំបាច់សម្រាប់ប្រតិបត្តិការត្រូវបានកំណត់។ ហើយម្តងទៀតយើងងាកទៅវ៉ិចទ័រ three.js ។ នៅពេលលេងក្នុងល្បឿន 60fps វាជារឿងសំខាន់ក្នុងការចាប់ផ្តើមធាតុរបស់អ្នកឱ្យបានឆាប់ និងមិនបង្កើតរបស់ថ្មីកំឡុងពេលចាក់សារថ្មី។ វាអាចបំផ្លាញការចងចាំដែលមាន និងធ្វើឱ្យការមើលឃើញរបស់អ្នកមានភាពច្របូកច្របល់។ សូមកត់សម្គាល់ផងដែរពីរបៀបដែលចំណុចឆ្លងកាត់ច្បាប់ចម្លងនៃស៊ុមដោយឯកសារយោង។ នេះជួយឱ្យដំណើរការកាន់តែច្បាស់។
Dot.prototype = (អាប់ដេត៖ មុខងារ() (... ), គូរ៖ មុខងារ() (... ))
កូដដែលនៅសល់ទាំងអស់នឹងត្រូវបានដំឡើងនៅលើវត្ថុគំរូចំណុច ដូច្នេះចំណុចថ្មីនីមួយៗនឹងមានសិទ្ធិចូលប្រើវិធីសាស្ត្រទាំងនេះ។ ខ្ញុំនឹងពន្យល់មុខងារតាមមុខងារ។
អាប់ដេត៖ function(dt) ( this.updatePosition(dt); this.draw(dt); ),
ខ្ញុំបំបែកកូដគំនូរចេញពីកូដអាប់ដេត។ នេះធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការគាំទ្រ និងផ្លាស់ទីវត្ថុ។ ដូចជាការរចនា MVC វាបំបែកការគ្រប់គ្រងផ្ទាល់ខ្លួនរបស់អ្នកពីទិដ្ឋភាពឡូជីខលរបស់អ្នក។ វ៉ិចទ័រ dt គឺជាការផ្លាស់ប្តូរពេលវេលាគិតជាមិល្លីវិនាទី ចាប់តាំងពីលទ្ធផល បច្ចុប្បន្នភាពចុងក្រោយ. ឈ្មោះនេះគឺងាយស្រួល និងខ្លី ហើយមកពី (កុំបារម្ភ) ដេរីវេនៃការគណនា (ដេរីវេនៃការគណនា)។ វាដកល្បឿនចលនារបស់អ្នកចេញពីអត្រាស៊ុមរបស់អ្នក។ វិធីនេះអ្នកនឹងមិនជួបប្រទះការយឺតយ៉ាវរចនាប័ទ្ម NES ប្រសិនបើអ្វីៗពិបាក។ ប្រសិនបើល្បឿនរបស់អ្នកខ្ពស់ពេក វានឹងកើតឡើងដែលស៊ុមនឹងត្រូវបានរំលង ប៉ុន្តែល្បឿននឹងនៅដដែល។
UpdatePosition: function() ( // នេះជាល្បិចតិចតួចក្នុងការបង្កើត variable នៅខាងក្រៅ render loop // វាមានតម្លៃថ្លៃក្នុងការបែងចែក memory នៅខាងក្នុង loop ។ // variable គឺអាចចូលប្រើបានតែ function ខាងក្រោមប៉ុណ្ណោះ។ var moveDistance = ថ្មី THREE.Vector2(); // នេះគឺជាមុខងារត្រឡប់មុខងារពិត (dt) ( moveDistance.copy(this.direction); moveDistance.multiplyScalar(dt); this.position.add(moveDistance); // រក្សា ចំនុចនៅលើអេក្រង់ this.position.x = (this.position.x + this.scene.canvas.width) % this.scene.canvas.width; this.position.y = (this.position.y + this.scene ) .canvas.height) % this.scene.canvas.height; ) )(), // ចំណាំថាមុខងារនេះត្រូវបានប្រតិបត្តិភ្លាមៗ ហើយត្រឡប់មុខងារផ្សេង
មុខងារនេះគឺចម្លែកបន្តិចនៅក្នុងរចនាសម្ព័ន្ធរបស់វា ប៉ុន្តែងាយស្រួលប្រើ។ វាពិតជាមានតម្លៃថ្លៃក្នុងការបែងចែកអង្គចងចាំក្នុងប្រព័ន្ធកូអរដោណេ (មុខងារ)។ MoveDistance អាចត្រូវបានកំណត់ម្តង និងត្រូវបានប្រើនៅពេលដែលចាប់ផ្ដើមមុខងារប្រព័ន្ធឡើងវិញនៅពេលចាំបាច់។
វ៉ិចទ័រនេះត្រូវបានប្រើសម្រាប់តែគណនាទីតាំងថ្មីប៉ុណ្ណោះ ហើយមិនមានបំណងធ្វើការក្រៅមុខងារទេ។ នេះគឺជាវ៉ិចទ័រគណិតវិទ្យាដំបូងគេដែលត្រូវបានប្រើ។ ឥឡូវនេះទិសដៅនៃវ៉ិចទ័រត្រូវបានគុណដែលផ្ទុយទៅនឹងការផ្លាស់ប្តូរពេលវេលាហើយបន្ទាប់មកបន្ថែមទៅទីតាំង។ នៅចុងបញ្ចប់សកម្មភាពនៃម៉ូឌុលកើតឡើងដែលកាន់ចំណុចនៅលើអេក្រង់។
Draw: function(dt) ( // ទទួលបានឈ្មោះអថេរខ្លីសម្រាប់ភាពងាយស្រួល var ctx = this.scene.context; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect(this.position.x, this .position.y, this.size, this.size);
ហើយនៅទីបញ្ចប់ផ្នែកដែលងាយស្រួលបំផុត។ ធ្វើច្បាប់ចម្លងនៃបរិបទរបស់វត្ថុសំខាន់ ហើយគូរចតុកោណកែង (ឬអ្វីផ្សេងទៀតវាមិនមានបញ្ហាទេ)។ វាគ្រាន់តែថាចតុកោណកែងគឺងាយស្រួលបំផុតក្នុងការគូរលើអេក្រង់។
ត្រង់ចំណុចនេះ ខ្ញុំបន្ថែម Dot ថ្មី ហើយហៅវាថា this.dot = new Dot(x, y, this) នៅក្នុង main constructor។ ហើយបន្ទាប់មកនៅក្នុងវិធីធ្វើបច្ចុប្បន្នភាពចម្បង ខ្ញុំបន្ថែម this.dot.update(dt) ហើយចំនុចមួយនឹងលេចចេញជាចលនានៅលើអេក្រង់។
វាល្អណាស់ដែលមានលេខកូដតិចតួច រចនាសម្ព័ន្ធបន្ថែមទៀតប៉ុន្តែវាមិនធ្វើឱ្យវាកាន់តែទាក់ទាញនោះទេ។ នេះគឺជាកន្លែងដែលវដ្តចាប់ផ្តើម។ នៅក្នុងវត្ថុសំខាន់យើងនឹងបង្កើត វត្ថុថ្មី។ DotManager ។ វាមានភាពងាយស្រួលក្នុងការប្រមូលមុខងារនេះនៅក្នុងវត្ថុដាច់ដោយឡែកព្រោះវាកាន់តែងាយស្រួល និងស្អាតជាងមុន នៅពេលដែលគំរូកាន់តែស្មុគស្មាញ។
Var DotManager = function(numberOfDots, scene) ( this.dots = ; this.numberOfDots = numberOfDots; this.scene = scene; for(var i=0; i< numberOfDots; i++) { this.dots.push(new Dot(Math.random() * this.canvas.width, Math.random() * this.canvas.height, this.scene)); } }; DotManager.prototype = { update: function(dt) { for(var i=0; i < this.numberOfDots; i++) { this.dots[i].update(dt); } } };
ឥឡូវនេះនៅក្នុងគំរូ ជំនួសឱ្យការធ្វើបច្ចុប្បន្នភាព Dot យើងបង្កើត និងធ្វើបច្ចុប្បន្នភាព DotManager ។ ដំបូងយើងបង្កើត 5000 ពិន្ទុ។
Function Scene()( ... this.dotManager = new DotManager(5000, this); ... ); Scene.prototype = ( ... អាប់ដេត៖ function(dt) ( this.dotManager.update(dt); ) ... );
វាពិតជាមើលទៅប្រសើរជាងចំណុចតែមួយ។ ឥឡូវនេះគឺជាពេលវេលាដើម្បីចាប់ផ្តើមបន្ថែមបន្ថែមទៀតទៅវិធីសាស្រ្តដែលបានធ្វើបច្ចុប្បន្នភាពនៅចំណុចរបស់អ្នក។ ការផ្លាស់ប្តូរណាមួយនៅក្នុងកូដវត្ថុនឹងត្រូវបានឆ្លុះបញ្ចាំងនៅគ្រប់ចំណុចនៅលើអេក្រង់។ ហើយនេះគឺជាកន្លែងដែលអព្ភូតហេតុចាប់ផ្តើមកើតឡើង។ ចងចាំប្រព័ន្ធកូអរដោនេខាងលើទេ? តើធ្វើដូចម្តេចអំពីការបង្កើតឥទ្ធិពលរលក? យើងនឹងបង្កើតអថេរ wavePosition សម្រាប់វត្ថុ Point ។ ជាចុងក្រោយ យើងនឹងបន្ថែមអថេរនេះទៅទីតាំង Y ។
UpdateWave៖ function(dt, time) ( this.wavePosition = Math.sin(this.scene.currTime / 500 + this.position.x / this.scene.canvas.width * 4) * 20;)
បាទ / ចាស វាមានការភាន់ច្រលំបន្តិចនៅពេលវាត្រូវបានសរសេរនៅលើបន្ទាត់មួយ ដូច្នេះខ្ញុំកំពុងភ្ជាប់កំណែផ្សេងទៀត ដែលត្រូវបានធ្វើឡើងដូចនៅក្នុងប្រព័ន្ធកូអរដោណេ។
វ៉ារ a = 1 / 500 // ធ្វើឱ្យលំយោលកើតឡើងយឺតជាងមុន x = this.scene.currTime, // ផ្លាស់ទីតាមក្រាហ្វបន្តិចរាល់ពេលគូរ () ត្រូវបានគេហៅថា b = this.position.x / នេះ។ scene.canvas.width * 4, // មិនចាំបាច់លៃតម្រូវក្រាហ្វឡើងលើឬចុះក្រោម c = 20, // ធ្វើឱ្យលំយោលធំទូលាយដូចជាតិចជាងពាក់កណ្តាលនៃផ្ទាំងក្រណាត់ d = 0; // កែប្រែទីតាំងនៃចតុកោណកែងឱ្យនៅចំកណ្តាល xMovement = Math.sin(a * x + b) * c + d;
ខ្ញុំបារម្ភ...
ការប៉ះតូចមួយទៀត។ Monochrome គឺគួរឱ្យធុញបន្តិច ដូច្នេះសូមបន្ថែមពណ៌បន្តិច។
Var hue = this.position.x / this.scene.canvas.width * 360; this.color = Utils.hslToFillStyle(ពណ៌លាំៗ, ៥០, ៥០, ០.៥);
សម្រាប់ចំណុចថ្មីនីមួយៗ កំណត់ទីតាំងដំបូងរបស់វា ហើយកំណត់ម្លប់តាមផ្ទាំងក្រណាត់ផ្តេក។ ខ្ញុំបានបន្ថែមមុខងារ Utils.hslToFillStyle ដែលនឹងជួយបន្តិចបន្តួចក្នុងការបំប្លែងអថេរបញ្ចូលមួយចំនួនទៅជាខ្សែសង្វាក់ fillStyle ដែលមានទម្រង់ត្រឹមត្រូវ។ អ្វីៗកំពុងមានការចាប់អារម្មណ៍ច្រើនជាងមុន។ នៅទីបំផុតចំនុចនឹងប្រមូលផ្តុំនៅកន្លែងតែមួយ ហើយវានឹងលែងមានឥន្ទធនូបន្ទាប់ពីពួកវាត្រូវបានខ្ចាត់ខ្ចាយយ៉ាងវឹកវរ។ ជាថ្មីម្តងទៀត នេះគឺជាឧទាហរណ៍នៃការមើលឃើញវត្ថុរាវជាមួយនឹងគណិតវិទ្យា ឬការបញ្ចូលមួយចំនួន។ ខ្ញុំចូលចិត្តធ្វើការជាមួយពណ៌ ម៉ូដែលពណ៌ HSL ជាង RGB ព្រោះវាងាយស្រួលប្រើ។ RGB គឺអរូបីបន្តិច។
ធ្វើការជាមួយកណ្តុរ
មិនមានបទពិសោធន៍អ្នកប្រើប្រាស់ពិតប្រាកដរហូតដល់ចំណុចនេះទេ។
Var Mouse = function(scene) ( this.scene = scene; this.position = new THREE.Vector2(-10000, -10000); $(window).mousemove(this.onMouse.bind(this)); ); Mouse.prototype = ( onMouseMove: function(e) ( if(typeof(e.pageX) == "number") ( this.position.x = e.pageX; this.position.y = e.pageY; ) else ( this.position.x = -100000; this.position.y = -100000;
វត្ថុសាមញ្ញនេះបង្កប់នូវការធ្វើបច្ចុប្បន្នភាពទៅប្រតិបត្តិការកណ្តុរ ផ្ទុយពីការងារដែលនៅសល់។ ការធ្វើបច្ចុប្បន្នភាពគឺថាទីតាំងនៃវ៉ិចទ័រត្រូវគ្នានឹងទីតាំងរបស់កណ្តុរដែលកំពុងផ្លាស់ទី។ វត្ថុដែលនៅសល់អាចខុសគ្នាពីទីតាំងវ៉ិចទ័រកណ្ដុរ ប្រសិនបើពួកវាត្រូវបានយោងនៅក្នុងវត្ថុ។ ការព្រមានមួយដែលខ្ញុំបានចាកចេញដោយមិនបានស្តាប់។ ប្រសិនបើទទឹងផ្ទាំងក្រណាត់មិនត្រូវគ្នានឹងវិមាត្រភីកសែល DOM ពោលគឺឧ។ ជាការឆ្លើយតបទៅនឹងការផ្លាស់ប្តូរទំហំផ្ទាំងក្រណាត់ ឬ ដង់ស៊ីតេខ្ពស់។ភីកសែល (រីទីណា) ឬប្រសិនបើផ្ទាំងក្រណាត់មិនមានទីតាំងនៅជ្រុងខាងឆ្វេងខាងលើ។ កូអរដោណេកណ្ដុរត្រូវតែផ្លាស់ប្តូរទៅតាមនោះ។
Var Scene = function()(... this.mouse = new Mouse( this); ... );
អ្វីដែលនៅសល់គឺបង្កើតវត្ថុកណ្តុរមួយនៅខាងក្នុងដ្យាក្រាម។ ឥឡូវនេះយើងមានកណ្ដុរហើយ យើងអាចធ្វើឲ្យចំនុចតាមវាបាន។
មុខងារ Dot(x, y, scene) ( ... this.attractSpeed = 1000 * Math.random() + 500; this.attractDistance = (150 * Math.random()) + 180; ... )
ខ្ញុំបានបន្ថែមតម្លៃមាត្រដ្ឋានជាច្រើនដល់ចំណុច ដើម្បីឲ្យពួកគេម្នាក់ៗមានឥរិយាបទខុសពីអ្នកដទៃ ដែលធ្វើឲ្យដំណើរការនេះកាន់តែមានភាពប្រាកដនិយម។ លេងជាមួយតម្លៃទាំងនេះហើយអ្នកនឹងមានអារម្មណ៍ខុសគ្នា។ ឥឡូវនេះសូមផ្តោតលើវិធីសាស្ត្រកណ្តុរ។ វាមានរយៈពេលយូរបន្តិចជាមួយនឹងមតិយោបល់។
AttractMouse: function() ( // ម្តងទៀត បង្កើតអថេរឯកជនមួយចំនួនសម្រាប់វិធីសាស្រ្តនេះ var vectorToMouse = new THREE.Vector2(), vectorToMove = new THREE.Vector2(); // នេះគឺជាមុខងារត្រឡប់វិធីសាស្ត្រសាធារណៈពិតប្រាកដ (dt) ( var distanceToMouse, distanceToMove; // ទទួលវ៉ិចទ័រដែលតំណាងឱ្យចម្ងាយ x និង y ពីចំនុចទៅកណ្តុរ // ពិនិត្យមើលឯកសារ three.js សម្រាប់ព័ត៌មានបន្ថែមអំពីរបៀបដែលវ៉ិចទ័រទាំងនេះដំណើរការ vectorToMouse .copy(this.scene.mouse. ទីតាំង) .sub(this.position); // យកចម្ងាយទៅកណ្តុរពីវ៉ិចទ័រ ចម្ងាយToMouse = vectorToMouse.length(); (នេះ .attractDistance - distanceToMouse) / this.attractSpeed // ផ្លាស់ទីចំណុចតែប៉ុណ្ណោះ ប្រសិនបើវាត្រូវបានទាក់ទាញ ប្រសិនបើ (moveLength > 0) ( // ប្ដូរទំហំវ៉ិចទ័រទៅកណ្តុរទៅប្រវែងផ្លាស់ទីដែលចង់បាន vectorToMove .copy(vectorToMouse) .divideScalar (distanceToMouse).multiplyScalar(moveLength); //ទៅមុខហើយបន្ថែមវាទៅទីតាំងបច្ចុប្បន្នឥឡូវនេះ ជាជាងក្នុងការចាប់ឆ្នោតហៅ this.position.add(vectorToMove);
ប៉ុន្តែនេះគ្រាន់តែជាការចាប់ផ្តើមប៉ុណ្ណោះ។ ច្រើនបំផុតសម្រាប់ខ្ញុំគឺជាដំណើរការនៃការបង្កើតកំណាព្យនៃការសរសេរកម្មវិធី និងសិល្បៈនៃការបង្កើតអ្វីដែលថ្មី។ ខ្ញុំសូមណែនាំអ្នកកុំឱ្យចូលជ្រៅពេកក្នុងព័ត៌មានលម្អិត និងគម្រោងធំៗ។ ផ្ទុយទៅវិញ ធ្វើម្តងទៀត ពិសោធន៍ អបអរភាពជោគជ័យ ហើយពេលខ្លះក៏បរាជ័យ។ ថ្ងៃមួយ ខ្ញុំបានបញ្ចប់ជាមួយនឹងអ្វីដែលមើលទៅដូចជាឥន្ទធនូដ៏គួរឱ្យខ្លាចមួយ។ ខ្ញុំមានសង្ឃឹមខ្ពស់ចំពោះរង្វង់ដែលកើតឡើងដដែលៗ ប៉ុន្តែខ្ញុំមិនបានទុកឱ្យលទ្ធផលមិនល្អរារាំងខ្ញុំពីផ្លូវរបស់ខ្ញុំទេ។ ទីបំផុត កូដដែលបានរៀបរាប់លម្អិតនៅទីនេះគឺជាការរុករកក្នុងរចនាប័ទ្មតម្រង់ទិសវត្ថុខ្លាំងណាស់ ដែលជាអ្វីដែលខ្ញុំចូលចិត្តបំផុត។ សម្របគំនិតទាំងនេះទៅនឹងដំណើរការ ឧបករណ៍ និងបច្ចេកទេសផ្ទាល់ខ្លួនរបស់អ្នក។ កំណាព្យមិនមែនជាប្រព័ន្ធរួមបញ្ចូលគ្នាធំទេ ដូច្នេះវាងាយស្រួលក្នុងការគូរ និងពិសោធន៍ជាមួយវាដោយមិនគិតពីលក្ខខណ្ឌនៃគម្រោងធំៗ។
គិតពីផ្ទាំងក្រណាត់ជាខ្មៅដៃដែលនឹងជួយអ្នកបញ្ចេញគំនិតដ៏អស្ចារ្យរបស់អ្នក និងអនុញ្ញាតឱ្យការបង្កើតរបស់អ្នកហោះហើរ។
.សួស្តីអ្នកទាំងអស់គ្នា! ថ្ងៃនេះខ្ញុំចង់ណែនាំអ្នកអំពីកម្មវិធីគ្រួសារ Monosnap ។ កម្មវិធីទាំងនេះត្រូវបានរចនាឡើងសម្រាប់ ការបង្កើតរហ័សរូបថតអេក្រង់ បច្ចុប្បន្ននេះ បន្ទាត់នេះរួមបញ្ចូលកម្មវិធីសម្រាប់ Mac OS X, Windows, iPad, iPhone និងថ្មីៗនេះ ផ្នែកបន្ថែមសម្រាប់ Google Chrome. ផ្នែកបន្ថែមអនុវត្តមុខងារភាគច្រើននៃកំណែផ្ទៃតុ។
ជាទូទៅ ផ្នែកបន្ថែមនេះត្រូវបានរចនាឡើងសម្រាប់អ្នកដែលប្រើប្រាស់អ៊ីនធឺណិតឥតឈប់ឈរ។ អ្នកប្រហែលជាចូលចិត្តរូបភាពផ្សេងទៀតជាមួយ 9gagឬអ្នកបានជំពប់ដួល ការរចនាគួរឱ្យចាប់អារម្មណ៍គេហទំព័រ ហើយសម្រេចចិត្តរក្សាទុកវាសម្រាប់ការប្រើប្រាស់នាពេលអនាគតនៅក្នុងគម្រោងរបស់ពួកគេ។ ក្នុងករណីណាក៏ដោយ វាសមហេតុផលក្នុងការប្រើផ្នែកបន្ថែមកម្មវិធីរុករកជំនួសឱ្យកម្មវិធីកុំព្យូទ័រ។
ផ្នែកបន្ថែមមាន 4 របៀបសម្រាប់ថតរូបអេក្រង់៖
1) ចាប់យកតំបន់ដែលបានជ្រើសរើស - ការបាញ់ស្តង់ដារតំបន់ជាក់លាក់នៃគេហទំព័រមួយ;
2) ចាប់យកផ្នែកដែលអាចមើលឃើញនៃទំព័រ - រូបថតអេក្រង់នៃផ្នែកដែលអាចមើលឃើញនៃទំព័រ។
3) ចាប់យកទំព័រពេញ - រូបថតកម្ពស់ពេញនៃទំព័របណ្តាញ;
4) Smart Capture - របៀបដែលគួរឱ្យចាប់អារម្មណ៍បំផុត វាអនុញ្ញាតឱ្យអ្នកថតរូបប្លុក HTML ដែលអ្នកដាក់ពីលើ។
ការកែសម្រួល
បន្ទាប់ពីបង្កើតរូបថតអេក្រង់ អ្នកត្រូវបានផ្ដល់ឱ្យដើម្បីកែសម្រួលវា ឬផ្ទុកឡើងភ្លាមទៅកន្លែងផ្ទុកលើពពក។ នៅក្នុងកម្មវិធីនិពន្ធ អ្នកប្រើប្រាស់អាចរំលេចតំបន់ជាក់លាក់ និងទុកសិលាចារឹក/មតិយោបល់។
ឧបករណ៍៖
1) ប៊ិច (ជក់) - អនុញ្ញាតឱ្យអ្នកគូរខ្សែកោងនិងធ្វើហត្ថលេខា។
2) បន្ទាត់ រាងពងក្រពើ ចតុកោណកែង - បុព្វបទដែលប្រើដើម្បីបន្លិចបំណែកសំខាន់ៗនៃរូបថតអេក្រង់
3) រូបភាពព្រិល (ព្រិល) - ធ្វើឱ្យរូបភាពព្រិលហើយដោយហេតុនេះធ្វើឱ្យ ព័ត៌មានសម្ងាត់មិនអាចអានបាន។
4) ព្រួញ - ដើមដំបូងក្នុងទម្រង់ជាព្រួញដែលត្រូវបានរចនាឡើងដើម្បីផ្តោតការយកចិត្តទុកដាក់លើអ្វីមួយ។
5) អត្ថបទ (អត្ថបទ) - សម្រាប់សិលាចារឹកនិងកំណត់ចំណាំ។
6) សិលាចារឹក (ពពុះ) - ការរួមបញ្ចូលគ្នានៃឧបករណ៍មុនពីរ (ព្រួញជាមួយអត្ថបទ) អនុញ្ញាតឱ្យអ្នកចង្អុលទៅបំណែកសំខាន់នៃរូបថតអេក្រង់ហើយទុកមតិយោបល់លើវា។
7) ការច្រឹបរូបភាព (ច្រឹប) - កាត់ផ្ទៃចតុកោណចេញពីរូបថតអេក្រង់។ ខ្លាំងណាស់ មុខងារមានប្រយោជន៍ប្រសិនបើអ្នកមិនត្រូវការរូបថតអេក្រង់ទាំងមូលទេ ប៉ុន្តែមានតែបំណែកមួយប៉ុណ្ណោះ។
8) ក្ដារលាយ (អ្នកជ្រើសរើសពណ៌) - បន្ថែមពីលើពណ៌ស្តង់ដារ អនុញ្ញាតឱ្យអ្នកប្រើផ្សេងទៀត (ដោយបញ្ចូលតម្លៃពណ៌ HEX, RGB ឬ HSB) ។
ក្នុងចំណោមរបស់ផ្សេងទៀត កម្មវិធីនិពន្ធគាំទ្រការតាមដានការផ្លាស់ប្តូរ និងអនុញ្ញាតឱ្យអ្នកមិនធ្វើវិញ (មិនធ្វើវិញ) និងធ្វើវិញ (ធ្វើវិញ) ការផ្លាស់ប្តូរ ក៏ដូចជាសម្អាតរូបថតអេក្រង់ដោយត្រឡប់វាទៅ ស្ថានភាពដើមមុនពេលកែសម្រួល (លុប) ។
កំពុងផ្ទុក
ការបង្ហោះរូបភាពទៅពពកគឺអាចធ្វើទៅបានដោយគ្មានការអនុញ្ញាត (មិនដូចរូបថតអេក្រង់ដ៏អស្ចារ្យទេ ពួកវានឹងត្រូវបានរក្សាទុកពេញមួយខែចាប់ពីពេលនេះតទៅ មើលចុងក្រោយ) ឬបន្ទាប់ពីចូលទៅក្នុងសេវាកម្មតាមរយៈ Facebook ឬគណនីរបស់អ្នក។ អ្វីដែលសំខាន់គឺអ្នកតែងតែអាចត្រឡប់ទៅរបៀបកែសម្រួលរូបថតអេក្រង់ ដូច្នេះអ្នកមិនចាំបាច់ថតអេក្រង់ម្ដងទៀតទេ។
កំណែបច្ចុប្បន្ននៃផ្នែកបន្ថែមគឺគ្រាន់តែជាកំណែចាប់ផ្តើមប៉ុណ្ណោះ ហើយនឹងត្រូវបានអាប់ដេត និងអភិវឌ្ឍន៍ឥតឈប់ឈរ។ យើងសង្ឃឹមថាអ្នកយល់ថាវាមានប្រយោជន៍!
