ترکیب کردن دو رنگ با جاوا اسکریپت

ترکیب کردن دو رنگ با جاوا اسکریپت

کار با رنگ ها یه مسئله به شدت کاربردیه و به ما اجازه میده رابط کاربری بهتری رو ارائه بدیم.شاید تا الان از تابع mix() در sass استفاده کرده باشید، تابعی که به ما اجازه میده که دوتا رنگ رو با هم دیگه ترکیب کنیم، خوب این تابع واقعا یه تابع کاربردی حساب میشه اما یه بدی که داره اینه که استاتیکِ، یعنی ما نمیتونیم هر موقع که خواستیم از این تابع استفاده کنیم.راه حل چیه؟ استفاده از جاوا اسکریپت، حالا من توی این ویرگول می خوام این تابع کاربردی sass رو با جاوا اسکریپت پیاده کنم.بریم برای شروع:راستی بگم که تابع ما باید چندین قابلیت داشته باشه، یعنی اگه کاربر اسم رنگ، کد RGB، کد HEX و حتی کد HEX سه رقمی هم به تابع داد بتونه کارشو انجام بده و با خطا مواجه نشه.توی HTML ما 140 نام رنگ داریم، پس اولین کدی که می نویسیم کد تبدیل نام رنگ به کد HEX، برای این کار هم از کد زیر کمک میگیریمبرای اینکه حجم کدها توی این ویرگول زیاد نشه من همه رو ننوشتم ولی خوب تمام این کدها رو توی یه gist گذاشتم به این آدرس و می تونید از اونجا بردارید و استفاده کنید.توی تابع بالا ما یه مقدار ورودی میگیریم و چک میکنیم اگه ورودی ما نام یکی از رنگ های HTML بود پس کد HEX رو برمیگردونیم در غیر این صورت همون مقدار ورودی رو بر میگردونیم.کد بعدی کدیه که مقدار HEX رو بررسی میکنه، یعنی اگه کاربر کد رنگی #fc16d9 یا fc16d9 یا #f1d رو به تابع پاس داد کد ما دچار خطا نشهاین تابع هم که مشخصه کارش چیه، اگه ورودی تابع صحیح باشه که همون کد رنگ مورد نظر رو بر میگردونه در غیر این صورت کد رنگ مشکی رو بر میگردونهو کد آخر هم کدی که رنگ های مورد نظر رو باهم ترکیب میکنهخوب اینم که مشخصه دوتا رنگ به همراه میزان ترکیب شدن رو از ما میگیره دقیقا مانند تابع mix() در sassاگه کاربر مقدار weight رو برابر صفر در نظر بگیره دقیقا کد رنگ دوم رو به ما بر میگردونه و اگه 100 در نظر بگیره دقیقا کد رنگ اول رو به ما بر میگردونهخوب تا اینجا کد ما تقریبا تکمیله فقط مشکلی که هست کد رنگی RGB رو پشتیبانی نمیکنه که برای این کار هم می تونیم از تابع زیر استفاده کنیم این تابع هم بررسی میکنه اگه ورودی یه کد رنگی RGB بود اونو تبدیل میکنه به کد HEX در غیر این صورت همون ورودی رو به ما بر میگردونه.شما می تونید با این تابع پالت Tint & Shade یک رنگ رو تولید کنید، به تصویر زیر دقت کنیدبرای اینکه یک رنگ رو تیره تر کنیم مقدار رنگ اول رو مشکی در نظر میگیریم و برای روشن تر کردن رنگ اول رو سفید در نظر میگیریم، مانند کد زیرامیدوارم که لذت برده باشید و همینطور کاربردی بوده باشه برای شما، همچنین تمام این کد ها توی gist ام موجوده و میتونید از این آدرس اونو داشته باشید.منتظر نظرات شما عزیزان هستم، همچنین اگه قطعه کد دیگه ای نیاز دارید در رابطه با جاوا اسکریپت توی نظرات بگین حتما براش یه ویرگول میذارم

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *