ক্যানভাস টিউটোরিয়াল 01 | কীভাবে ক্যানভাসটি তেঁতুলিতে ব্যবহার করবেন

০. আমরা কী করব?

আজ আমি আপনাকে বলতে যাচ্ছি কীভাবে আমাদের নিজস্ব আকৃতি আঁকতে ক্যানভাসটি ব্যবহার করতে হয়। এটি একটি ধাপে ধাপে টিউটোরিয়াল। এখানে আমরা যাই! প্রথমত, আসুন আমরা আপনাকে কী করতে পারি তা দেখান!

ওঠানামা লোগো

হ্যাঁ, আপনি ঠিক বলেছেন, আমরা এই ফ্লার্ট ওপেন লোগোটি তৈরি করতে যাচ্ছি।

1. চিত্রের সমন্বয় বা আকার

কাজ শুরু করার আগে, আমাদের লোগোটির নকশা পিক্সেলগুলি যেমন বৃত্তের আকার বা আয়তক্ষেত্রের অবস্থান ইত্যাদি জেনে রাখা উচিত। সুতরাং, আমাদের জানা উচিত যে নীচের চিত্রটি কোনও আকার বা আকারের স্থানাঙ্ক বা আকার নির্দেশ করে, আপনার খুঁজে পাওয়া উচিত যে শূন্য পয়েন্টটি স্ক্রিনের বাম দিকে রয়েছে এবং চিত্রটি 584 * 648 পিক্সেল।

কেন্দ্রের স্থানাঙ্ক এবং ব্যাসার্ধ সহ বৃত্তগুলির নোট।পয়েন্ট সমন্বয় সহ wardর্ধ্বমুখী ঘূর্ণনকারী ফ্লটার লোগো

আপনি যদি কোনও আকার নিজেই আঁকতে চান তবে আপনার PS বা অন্যান্য চিত্র পরিবর্তন সরঞ্জাম ব্যবহার করে নিজেই এটি করা উচিত।

রঙগুলি সম্পর্কে ভুলবেন না Don't

কনট BLUE_NORMAL = রঙ (0xff54c5f8); কনট GREEN_NORMAL = রঙ (0xff6bde54); কনস্ট BLUE_Dark2 = রঙ (0xff01579 বি); কনস্ট BLUE_DARK1 = রঙ (0xff29b6f6);

2. ডিজাইনের আকার ভিএস ডিভাইস লজিক্যাল আকার

যখন আমরা আকৃতিটি ডিজাইন করি তখন আমরা কেবল আমাদের পছন্দ মতো পিক্সেল ব্যবহার করি তবে বিভিন্ন স্ক্রিনের আকার সহ অনেকগুলি ডিভাইস রয়েছে এবং লজিক্যাল আকারটিও আলাদা। কখনও কখনও আমরা কেবল আমাদের কাস্টম আকারটি ধারকটিতে রাখি যাতে আমরা প্যারেন্ট উইজেটের মতো আকারটি আঁকতে পারি। উদাহরণস্বরূপ, এই লোগোর আকারটি একটি খসড়া হিসাবে 548 * 648, তবে এই লোগোটি প্রদর্শনের জন্য যৌক্তিক আকার 200 * 400 হয় তবে এটি দেখতে এটির মতো হবে:

আমরা এটি দিয়ে কী করতে পারি, আসুন নীচের কোডটি দেখুন

প্রথমত, আমাদের একটি ব্যবহার শ্রেণীর সংজ্ঞা দেওয়া উচিত

আমদানি 'প্যাকেজ: বিড়ম্বনা / উপাদান.ডার্ট'; আমদানি 'ডার্ট: গণিত'; শ্রেণীর আকার ইউটিলি {স্ট্যাটিক কনস্ট্যান্ড _DESIGN_WIDTH = 580; স্ট্যাটিক কনস্ট _ডেসিগন_হাইট = 8৪৮; ডিভাইসের স্থিত আকার _ লজিকসাইজে // লজিক আকার; // ডিভাইস পিক্সেল রেডিও। স্থির পেতে প্রস্থ - ফিরে _ লজিকসাইজ.উইথ; stat স্থিতিশীল উচ্চতা পান log _logicSize.height ফিরে আসুন; } স্থির সেট আকার (আকার) {_ লজিকসাইজ = আকার; } // @ পরম ডব্লু হ'ল ডিজাইন ডাব্লু; স্ট্যাটিক ডাবল getAxisX (ডাবল ডাব্লু) {রিটার্ন (ডাব্লু * প্রস্থ) / _DESIGN_WIDTH; } // y দিক স্থিতিশীল ডাবল getAxisY (ডাবল এইচ) {রিটার্ন (এইচ * উচ্চতা) / _DESIGN_HEIGHT; design // ডিজাইনের আকারের জন্য তির্যক দিক নির্দেশক মান। স্ট্যাটিক ডাবল getAxisBoth (ডাবল গুলি) {* স্কয়ার্ট ((প্রস্থ * প্রস্থ + উচ্চতা * উচ্চতা) / / _ডিজিএন_উইচথ * _ ডিজাইন_উইথ + _ ডিজাইন_হাইট * _ ডিজাইন_হাইট)); }}

এটি আপনাকে আপনার যুক্তির আকারের জন্য ডিজাইনের আকার পরিবর্তন করতে দেয়। এটি দ্বিতীয় হিসাবে ব্যবহার করুন। আপনি ডিভাইস আকারের সাহায্যে আকারটি শুরু করতে পারেন, যার অর্থ আপনি কোনও ভিন্ন আকার বরাদ্দ না করলে আপনি পর্দা পর্যন্ত যতটা আকৃতি আঁকেন।

সাইজUtil.size = MediaQuery.of (প্রসঙ্গ)। সাইজ;

3. কাস্টমপেইন্টার সংজ্ঞায়িত করুন

এটি আমাদের নিজস্ব আকৃতিটি নির্ধারণ করার জন্য সবচেয়ে গুরুত্বপূর্ণ শ্রেণি। যৌক্তিকভাবে আঁকতে হবে পুরো আকারটি এখানে লেখা আছে।

প্রথমে একটি শ্রেণি তৈরি করুন যা কাস্টমপেইন্টারকে প্রসারিত করে একটি রঙ তৈরি করবে। যদি আকারটি 1.0 এর কম না হয় তবে এটি একটি লজিকাল আকার হিসাবে নির্ধারণ করুন।

ওপেনপেইন্টার শ্রেণি কাস্টমপেইন্টার প্রসারিত করে {
@ ওভাররাইড খালি রঙ (ক্যানভাস ক্যানভাস, আকারের আকার) {যদি (আকার। প্রস্থ> 1.0 && মাপের উচ্চতা> 1.0) {মুদ্রণ ("> 1.9"); আকারUtil.size = আকার; paint var পেইন্ট = পেইন্ট () .. স্টাইল = পেইন্টিং স্টাইল.ফিল .. রঙ = BLUE_NORMAL ..isAntiAlias ​​= সত্য;
over @ ওভাররেড বুল shouldRepaint (কাস্টমপেইন্টার OldDelegate) => মিথ্যা; }

তারপরে ফ্লার্ট লোগোটি আঁকুন। তবে প্রথমে স্কোয়ার আঁকতে আমাদের 'ক্যানভাস.ড্রেডপথ' ব্যবহার করা উচিত।

অকার্যকর _ ডিআরফফোরশ্যাপ (ক্যানভাস ক্যানভাস, left অফসেট বাম_টপ, অফসেট ডান_টপ, অফসেট ডান নীচে, অফসেট বাম_বটম, আকারের আকার, রঙ}) {বাম_টপ = _ কনভার্টলজিকসাইজ (বাম_টপ, আকার); ডান_টপ = _ কনভার্টলজিক্স সাইজ (ডান_পরে, আকার); ডান_বটম = _ কনভার্টলজিক্স সাইজ (ডান_বোটম, আকার); বাম_বটম = _ কনভার্টলজিক্স সাইজ (বাম_ নীচে, আকার); var পাথ1 = পাথ () ..মোভটো (বাম_টপ.ডেক্স, বাম_টোপ.ডি) ..লাইনটো (ডান_টপ.ডেক্স, রাইট_টপ.ডি) ..লাইনটো (ডান_বটম.ডেক্স, ডান_বটম.ডি) ..লাইনটো (বাম_তন্ত্র.ডেক্স, বাম_বটম.ডি); ক্যানভাস.ড্রাওপথ (পথ 1, পেইন্ট); }
অফসেট _ কনভার্টলজিকসাইজ (অফসেট, সাইজ সাইজ) {রিটার্ন অফসেট (সাইজ ইউটি.জেটএক্সিসএক্স (অফ.ডেক্স), সাইজ ইউটি.জেটঅ্যাক্সিসি (অফ.ডি)); }

পরিশেষে আমরা "রঙ (ক্যানভাস, আকার)" ফাংশনে চেনাশোনাগুলি আঁকছি।

var वृत्तকেন্দ্র = অফসেট (সাইজUtil.getAxisX (294), সাইজUtil.getAxisY (175)); color.color = BLUE_NORMAL; ক্যানভাস.ড্রেডকোর্স (সার্কেল সেন্টার, সাইজUtil.getAxisBoth (174), পেইন্ট); পেইন্ট.কমলার = GREEN_NORMAL; ক্যানভাস.ড্রেডকোর্স (সার্কেল সেন্টার, সাইজUtil.getAxisBoth (124), পেইন্ট); color.color = Colors. white; ক্যানভাস.ড্রেডকোর্স (সার্কেল সেন্টার, সাইজUtil.getAxisBoth (80), পেইন্ট);

সর্বোপরি, আমাদের ক্যানভাসটি সংরক্ষণ করা উচিত।

ক্যানভাস.সেভ (); ক্যানভাস.রেস্টোর ();

4. মুক্তপেন্টার ব্যবহার করুন

আমরা এখন ওপেনপেইন্টারটি সংজ্ঞায়িত করছি, যাতে আমরা কীভাবে ওপেনপেইন্টার ব্যবহার করতে পারি। সর্বাধিক গুরুত্বপূর্ণ আমদানি শ্রেণি হ'ল কাস্টমপেইন্ট। আপনার এটি প্যারেন্ট উইজেট হিসাবে ব্যবহার করা উচিত।

কাস্টমপেইন্ট (চিত্রশিল্পী: ওপেনপেইন্টার (),)

তারপরে আমরা আমাদের আকৃতিটি দেখানোর জন্য কাস্টমপেইন্টটিকে একটি সাধারণ উইজেট হিসাবে ব্যবহার করতে পারি। আমরা এটি আমাদের হোমপেজে ব্যবহার করতে পারি।

স্ক্যাফোোল্ডিং (অ্যাপবার: অ্যাপবার (শিরোনাম: পাঠ্য ("প্রথম ক্যানভাস")),), দেহ: ধারক (শিশু: কেন্দ্র (শিশু: ধারক (প্রস্থ: 280, উচ্চতা: 320.0, শিশু): কাস্টমপেন্ট (চিত্রশিল্পী: ওপেনপেইন্টার (), ),),)),)

এটি সেভাবে দেখায়।

যৌক্তিক আকারের প্রস্থ: 280, উচ্চতা: 320.0,

আমরা যদি লজিক্যাল আকারের জন্য 200 * 400 এর বেশি বলার মতো ধারকটির আকার পরিবর্তন করি তবে বলি এটি কিছুটা আলাদা হবে।

ধারক (// প্রস্থ: 280, // উচ্চতা: 320.0, প্রস্থ: 200, উচ্চতা: 400, প্রকার: কাস্টমপেন্ট (চিত্রশিল্পী: ওপেনপেইন্টার (),),)
যৌক্তিক আকারের প্রস্থ: 200, উচ্চতা: 400.0,

যদি আমরা আকারটি সেট না করি তবে পেইন্ট (ক্যানভাস, আকার) ফাংশনে আকারটি শূন্য হবে। আমরা ডিভাইসের আকার সামঞ্জস্য করব। আসুন এটি ঠিক আছে কি না তা পরীক্ষা করে দেখা যাক। এবার আমাদের কেন্দ্রের পিতামহীন উইজেটটি বন্ধ করা উচিত যাতে আমরা এটি দেখতে পারি।

ভারা চিত্রশিল্পী: ওপেনপেইন্টার (),),),),);
ডিভাইসের আকারের লজিক্যাল আকারের সাথে

এটি দুর্দান্ত, আমরা ফ্লার্ট ওপেন লোগোটি শেষ করেছি। এটি ফ্লার্ট ওপেন সোর্স সম্প্রদায় দ্বারা তৈরি করা হয়েছে। আপনার সমর্থন জন্য ট্যাঙ্ক।

পুরো প্রকল্পটি এখানে: https://github.com/FlutterOpen/flutter-canvas। আপনি যদি বা কিছুটা সহায়তা চান, দয়া করে আমাকে গিটহাবের একটি তারকা দিন।

_______________ শেষ ____________

ফেসবুক পৃষ্ঠা: https://www.facebook.com/flutteropen

ফেসবুক গ্রুপ: https://www.facebook.com/groups/948618338674126/