எஸ்.வி.ஜி வடிப்பான்களுடன் அடிப்படைகளுக்கு அப்பால் செல்வது எப்படி

உள்ளடக்கம்

• வடிகட்டி விளைவுகள் ஏன்?
• தரப்படுத்தல் மற்றும் உலாவி ஆதரவு
• ஒரு அடிப்படை வடிகட்டி: நிழலை விடுங்கள்
• துளி நிழல்களைத் தனிப்பயனாக்குதல்
• அமைப்பு வடிப்பான்களை உருவாக்குதல்
• படங்களை கையாளுதல்
• வடிப்பான்கள், CSS மற்றும் ஜாவாஸ்கிரிப்ட்
• மேலும் விளைவுகளைக் கற்றல்

வடிகட்டி விளைவுகள் மங்கல்கள், விளக்குகள், வண்ண மாற்றங்கள் மற்றும் உள்ளடக்கத்தின் சிதைவுகள் போன்ற கிராபிக்ஸ் செயல்பாடுகளைப் பயன்படுத்துகின்றன. இன்றைய உலாவிகள் மூன்று வகையான வடிப்பான்களை செயல்படுத்துகின்றன:

• CSS வடிப்பான்கள்: போன்ற எளிய CSS பண்புகளின் தொகுப்பு செபியா () மற்றும் மாறாக () எந்த HTML உள்ளடக்கத்திற்கும் இது பயன்படுத்தப்படலாம்.
• எஸ்.வி.ஜி வடிப்பான்கள்: எஸ்.வி.ஜி உள்ளடக்கத்திற்கு (மற்றும் ஒரு சிஎஸ்எஸ் வடிகட்டி குறுக்கு குறிப்பு மூலம் HTML உள்ளடக்கம்) பயன்படுத்தக்கூடிய கிராபிக்ஸ் விளைவுகளின் சேர்க்கைகள்.
• டிஎக்ஸ் வடிப்பான்கள் மைக்ரோசாப்டின் தனியுரிம வடிகட்டி விளைவுகள். டிஎக்ஸ் வடிப்பான்கள் இன்டர்நெட் எக்ஸ்ப்ளோரர் (ஐஇ) 9 இல் நீக்கப்பட்டன, பின்னர் ஐஇ பதிப்பு 10 இல் அகற்றப்பட்டன (இருப்பினும் அவை குழு கொள்கை வழியாக மீண்டும் செயல்படுத்தப்படலாம்). மைக்ரோசாப்டின் டிஎக்ஸ் வடிப்பான்கள் இன்டர்நெட் எக்ஸ்ப்ளோரரில் மட்டுமே ஆதரிக்கப்படுகின்றன.

இந்த டுடோரியலில், நாங்கள் ஒரு எளிய துளி நிழலுடன் தொடங்குவோம், பின்னர் உரைக்கான நிழல் விளைவுகளைத் தனிப்பயனாக்குவோம், ஒரு அமைப்பை உருவாக்குவதன் மூலம் நடந்து, இறுதியாக கோதத்தை மீண்டும் உருவாக்குவோம், இது நிறுத்தப்பட்ட இன்ஸ்டாகிராம் வடிப்பானாகும். டுடோரியலின் முடிவில், வடிகட்டி அடிப்படைகள் மற்றும் சில பயனுள்ள மாதிரி குறியீடுகளை நீங்கள் உறுதியாகப் புரிந்துகொள்வீர்கள் என்று நம்புகிறேன்.

வடிகட்டி விளைவுகள் ஏன்?

படங்கள், கிராபிக்ஸ், உரை அல்லது வீடியோவில் நீங்கள் காட்சி விளைவுகளைச் சேர்க்க விரும்பினால், ஃபோட்டோஷாப் அல்லது இல்லஸ்ட்ரேட்டர் போன்ற கருவிகளைக் கொண்டு முன் தயாரிப்பில் அல்லது கேன்வாஸ், எஸ்.வி.ஜி மற்றும் / அல்லது சிஎஸ்எஸ் விளைவுகளைப் பயன்படுத்தி இயக்க நேரத்தில் இதைச் செய்யலாம்.

இயக்கநேர விளைவுகளை அனிமேஷன் செய்யலாம், மேலும் பெரிய பட பதிவிறக்கங்களின் செயல்திறன் தாக்கத்தை நீங்கள் தடுக்கலாம் (எடுத்துக்காட்டாக, இரைச்சல் அமைப்புகளுக்கு). கேன்வாஸ் மற்றும் CSS விளைவுகளுடன் ஒப்பிடும்போது, ​​எஸ்.வி.ஜி வடிப்பான்கள் இதற்கு மிகவும் பயனுள்ளதாக இருக்கும்:

• பெரிய படங்களை பதிவிறக்கம் செய்யாமல் எஸ்.வி.ஜி கிராபிக்ஸ் அமைப்புகளைச் சேர்க்கவும்.
• உங்கள் வலை பயன்பாட்டில் கிளையன்ட் பக்க பட எடிட்டிங் திறன்களை உட்பொதிக்கவும்.
• உரையை ஒரு படமாக மாற்றாமல், அணுகல் மற்றும் தேடலைத் தக்க வைத்துக் கொள்ளாமல், விளக்குகள், புடைப்பு மற்றும் விலகல் விளைவுகளை உரையில் சேர்க்கவும்.

தரப்படுத்தல் மற்றும் உலாவி ஆதரவு

இன்றைய உலாவிகளில் உள்ள எஸ்.வி.ஜி வடிப்பான்கள் பெரும்பாலும் எஸ்.வி.ஜி 1.1 விவரக்குறிப்புடன் ஒத்துப்போகின்றன, இது 2003 இல் W3C பரிந்துரையாக மாறியது. CSS வடிப்பான்கள் செயல்பாட்டில் உள்ளன மற்றும் வடிகட்டி விளைவுகள் 1.0 இன் ஒரு பகுதியாக தரப்படுத்தப்படுகின்றன, இது CSS, SVG மற்றும் தனிப்பயன் ஆகியவற்றை இணைக்கும் ஒரு ஸ்பெக் வடிப்பான்கள்.

Chrome மற்றும் Safari இன் சமீபத்திய பதிப்புகளில் முன்னொட்டுடன் இவை ஆதரிக்கப்படுகின்றன. தனிப்பயன் வடிப்பான்கள் புதியவை மற்றும் வழக்கமான வலை உள்ளடக்கத்திற்கு பயன்படுத்தக்கூடிய வெர்டெக்ஸ் மற்றும் பிக்சல் ஷேடர் விளைவுகளை வரையறுக்கின்றன. Chrome இன் சமீபத்திய பதிப்புகளில் கொடிக்கு பின்னால் ஆல்பாவில் தனிப்பயன் வடிப்பான்கள் கிடைக்கின்றன.

அனைத்து சமீபத்திய டெஸ்க்டாப் மற்றும் மொபைல் உலாவிகளிலும் எஸ்.வி.ஜி வடிப்பான்கள் ஆதரிக்கப்படுகின்றன. Caniuse.com இன் கூற்றுப்படி, உலாவி நிறுவப்பட்ட தளத்தின் 73 சதவீதம் ஆதரவு உள்ளது.

ஒரு அடிப்படை வடிகட்டி: நிழலை விடுங்கள்

தொடங்குவதற்கு, இன்லைன் எஸ்.வி.ஜி துண்டுக்கான அடிப்படை வடிப்பானின் முழுமையான குறியீட்டைக் காண்பிப்போம். ஒரு எஸ்.வி.ஜி வடிப்பான் வரையறுக்கப்பட்டுள்ளது defs> ஒரு எஸ்.வி.ஜி இன்லைன் துண்டு அல்லது ஆவணத்தின் பிரிவு, மற்றும் எஸ்.வி.ஜி உள்ளடக்கத்திற்கு ஒரு சேர்ப்பதன் மூலம் பயன்படுத்தப்படுகிறது வடிகட்டி உள்ளடக்கத்திற்கான சொத்து.

வடிகட்டி உறுப்பு வடிகட்டி ’ப்ரிமிட்டிவ்ஸ்’ க்கான கொள்கலன். ஒரு பழமையானது ஒரு ஒற்றை கிராஃபிக் செயல்பாடாகும், இது பிற ஆதிமனிதர்களுடன் இணைந்து இறுதி விளைவை உருவாக்குகிறது. கீழே உள்ள துளி நிழல் வடிப்பான் நான்கு படிகளைக் கொண்டுள்ளது:

• SourceAlpha ஐ பிரித்தெடுக்கவும் (அசல் உள்ளடக்கத்தின் நகல் - SourceGraphic - அதன் RGB சேனல்கள் கருப்பு நிறத்தில் அமைக்கப்பட்டிருக்கும்).
• நான்கு அலகுகளின் நிலையான விலகலுடன் காஸியன் மங்கலைப் பயன்படுத்துங்கள்.
• மங்கலான உரையை எடுத்து அதை ஈடுசெய்யவும் 5 இல் அலகுகள் எக்ஸ் மற்றும் y.
• நீங்கள் முன்பு உருவாக்கிய ஆஃப்செட் மங்கலான உரையை எடுத்து, அசல் உள்ளடக்கத்தின் கீழ் (SourceGraphic) தொகுத்தல் பழமையானதைப் பயன்படுத்தி, feComposite, மற்றும் இந்த ஓவர் ஆபரேட்டர்.

svg width = ”600px” height = ”200px” viewBox = ”0 0 600 200”>

defs>

வடிகட்டி ஐடி = ”டிராப்ஷேடோ”>

feGaussianBlur in = ”SourceAlpha” result = ”blurOut” stdDeviation = ”4” />

feOffset in = ”blurOut” result = ”dropBlur” dx = ”5” dy = ”5” />

feComposite operator = ”over” in = ”SourceGraphic” in2 = ”dropBlur” result = ”final” />

/ வடிகட்டி>

/ defs>

உரை வடிகட்டி = ”url (#dropshadow)” x = ”20” y = ”100” font- size = ”80” width = ”550” height = ”600”>

இது நிழல்!

/ உரை>

/ svg>

feComposite எளிமையானதைத் தாண்டி மற்ற சக்திவாய்ந்த ஆபரேட்டர்கள் உள்ளனர் "ஓவர்"நாங்கள் காண்பித்த தொகுத்தல். இந்த எடுத்துக்காட்டுக்கு கோடெப்பனைத் திறந்து மாற்றவும்"ஓவர்"பின்வரும் மதிப்புகளுக்கு:

• இல் அசல் உரையின் பகுதிக்கு மங்கலான கிளிப்புகள் - மங்கலான நிரப்பு விளைவை உருவாக்குகிறது.
• வெளியே அசல் உரையைக் காட்டுகிறது, ஆனால் துளி நிழலைக் கழித்து, வியத்தகு பொறிக்கப்பட்ட விளைவை உருவாக்குகிறது.
• xor இரண்டு உள்ளீடுகளையும் ஒருங்கிணைக்கிறது, ஆனால் பின்னர் ஒன்றுடன் ஒன்று கழிக்கிறது. இங்கே இது ஒரு விளைவை விளைவிக்கிறது வெளியே ஆனால் துளி நிழலை சேர்க்கிறது.

துளி நிழல்களைத் தனிப்பயனாக்குதல்

நிழல்களைத் தனிப்பயனாக்க வடிப்பான்கள் சக்திவாய்ந்த திறன்களைக் கொண்டுள்ளன. காஸியன் தெளிவின்மை உங்களுக்கு பிடிக்கவில்லை என்றால், நீங்கள் அதைப் பயன்படுத்தலாம் feConvolve பாக்ஸ்-மங்கல்கள், திசை மங்கல்கள் அல்லது பிற காஸியன் அல்லாத மங்கல்கள் (ஃபோட்டோஷாப்-பாணி மேற்பரப்பு மங்கல்கள் உட்பட) உருவாக்க பழமையானவை.

நீங்கள் காஸியன் மங்கலுடன் ஒட்டிக்கொண்டால், feComponentTransfer ஐப் பயன்படுத்தி நிழலின் தீவிரத்தையும் சாய்வையும் தனிப்பயனாக்கலாம். மங்கலான ஆல்பா சேனலை மறுவடிவமைப்பதில் இருந்து உருவாக்கப்படும் ஒரு விளிம்பு விளைவு கீழே காட்டப்பட்டுள்ளது.

வடிகட்டி ஐடி = ”reMappedAlpha”>

feGaussianBlur in = ”SourceAlpha” result = ”blurOut” stdDeviation = ”10” />

feComponentTransfer in = ”blurOut” result = ”dropBlur”>

feFuncA type = ”table” tableValues ​​= ”0 .5 0 .5 0 .5 0 .5” />

/ feComponentTransfer>

feComposite operator = ”over”

in = ”SourceGraphic” in2 = ”dropBlur” result = ”final” />

/ வடிகட்டி>

இங்கே மந்திரம் இருந்து feFuncA பழமையானது, இது மங்கலான ஆல்பா சேனலை (பொதுவாக ஒரு மென்மையான மங்கல்) நான்கு தனித்தனி வரம்புகளாக மாற்றியமைக்கிறது 50% ஆல்பா முதல் 0% ஆல்பா. இது ஒரு விளிம்பை உருவாக்குகிறது. உள்ள பிற வகைகளைப் பயன்படுத்தி ஆல்பா சேனலையும் ரீமேப் செய்யலாம் feComponentTransfer. ‘டிஸ்க்ரீட்’ ரீமேப்ஸ் மதிப்பு குறிப்பிட்ட மதிப்புகள் வரை இருக்கும், மேலும் அவை ஒளிவட்ட விளைவுகளை உருவாக்க பயன்படுத்தப்படலாம். ‘காமா’ காமா சரிசெய்தலைப் பயன்படுத்துகிறது. ‘லீனியர்’ ஒரு சாய்வு மற்றும் இடைமறிப்பு சரிசெய்தலைப் பயன்படுத்துகிறது.

காமா மற்றும் நேரியல் சரிசெய்தல் இரண்டும் தங்களை கவனத்தை ஈர்க்காத நுட்பமான நிழல் தனிப்பயனாக்கங்களை உருவாக்கலாம்.

அமைப்பு வடிப்பான்களை உருவாக்குதல்

வடிப்பான்கள் பணக்கார அமைப்புகளை உருவாக்க முடியும். உதாரணமாக, செங்கல், பளிங்கு, உணர்ந்த, நெய்த துணி, கைவினை காகிதம், மணர்த்துகள்கள் கொண்ட காகிதம், திரைப்பட தானியங்கள், பூமி மற்றும் ஸ்டக்கோ. இருப்பினும், இது எப்போதும் நேரடியானதல்ல. சிக்கலான கட்டமைப்புகள் எட்டு அல்லது 10-படி வடிப்பானை எடுக்கலாம். ஓப்பன் சோர்ஸ் எஸ்.வி.ஜி எடிட்டரான இன்க்ஸ்கேப் (இன்க்ஸ்கேப். Org), உத்வேகத்திற்காக ஆய்வு செய்ய உங்களுக்கு கிடைக்கக்கூடிய மூலத்துடன் அமைப்பு வடிப்பான்களின் தொகுப்பைக் கொண்டுள்ளது.

இன்க்ஸ்கேப்பின் உள்ளமைக்கப்பட்ட அமைப்புகளில் ஒன்றிலிருந்து நான் மாற்றியமைத்த எளிமையான கடினமான காகித அமைப்பை எவ்வாறு உருவாக்குவது என்பதை இங்கே விளக்குகிறேன்.

முதலில், ஒரு சத்தம் மேற்பரப்பை உருவாக்குகிறோம் feTurbulence வடிகட்டி. பின்னர், a ஐப் பயன்படுத்தி அந்த மேற்பரப்பில் ஒரு ஒளியைப் பிரகாசிக்கிறோம் feDiffuseLighting விளைவு, இது நுட்பமான நிழல்களை உருவாக்குகிறது.

வடிகட்டி ஐடி = ”கரடுமுரடான” x = ”0%” y = ”0%” அகலம் = ”100%” உயரம் = ”100%”>

feTurbulence type = ”fraalNoise” baseFrequency = ”0.04” numOctaves = ”5” result = ”சத்தம்” />

feDiffuseLighting in = ”சத்தம்” விளக்குகள்-வண்ணம் = ”வெள்ளை” மேற்பரப்பு அளவு = ”2” முடிவு = ”வேறுபாடு”>

feDistantLight azimuth = ”45” உயரம் = ”35” />

/ feDiffuseLighting>

/ வடிகட்டி>

feTurbulence நீங்கள் கவலைப்பட வேண்டிய மூன்று பண்புகளை கொண்டுள்ளது: வகை, அடிப்படை அதிர்வெண் மற்றும் numOctaves.

• வகை ஒன்று இருக்கலாம் பின்னிணைப்பு அல்லது கொந்தளிப்பு. பின்னிணைப்பு பொருள் மற்றும் எரிவாயு அடிப்படையிலான அமைப்புகளுக்கு (மேகங்கள் போன்றவை) ஒரு நல்ல தளமான ‘வாயு போன்ற’ சத்தத்தை உருவாக்குகிறது. கொந்தளிப்பு ஒரு ‘திரவ போன்ற’ சத்தத்தை உருவாக்குகிறது, இது நீர்நிலை விளைவுகளுக்கு ஒரு நல்ல தளமாகும்.
• baseFrequency சத்தத்தின் ‘தானியத்தை’ குறிப்பிடுகிறது. மிகக் குறைந்த மதிப்புகள் (0.001 போன்றவை) பெரிய வடிவங்களை உருவாக்கும், மற்றும் மிக உயர்ந்த மதிப்புகள் (0.5 போன்றவை) சிறிய வடிவங்களை உருவாக்கும். 0.02 முதல் 0.2 வரம்பில் உள்ள மதிப்புகள் பெரும்பாலான அமைப்புகளுக்கு பயனுள்ள தொடக்க புள்ளிகளாகும்.
• numOctaves சத்தத்தில் விவரங்களின் நிலைகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது. ஒவ்வொரு கூடுதல் ஆக்டேவும் அதிக அதிர்வெண்ணில் மற்றொரு விவரத்தை சேர்க்கிறது (இசையில் அதிக ஆக்டேவ் போன்றது). ஐந்து எண்கணிதங்கள் பொதுவாக உங்களுக்குத் தேவைப்படும் மிக உயர்ந்தவை. ஆறாவது ஆக்டேவின் விளைவு பொதுவாக கவனிக்கப்படாது. தி feTurbulence வடிகட்டி ஆல்பா உள்ளிட்ட அனைத்து சேனல்களிலும் சத்தத்தை உருவாக்குகிறது. நீங்கள் ஒரு ஒளிபுகா அமைப்பை விரும்பினால், நீங்கள் ஆல்பா சேனலை நிலையான 1 ஆக சரிசெய்ய வேண்டும். இதைப் பயன்படுத்தி நீங்கள் இதைச் செய்யலாம் feComponentTransfer உடன் ஒரு feFuncA குழந்தை.

எஸ்.வி.ஜி வடிப்பான்களில் இரண்டு வகையான விளக்குகள் உள்ளன: பரவல் மற்றும் ஊகம். இங்கே நாம் பரவலான விளக்குகள் மற்றும் தொலைதூர விளக்குகள் ஆகியவற்றைப் பயன்படுத்துகிறோம். (ஸ்பெகுலர் லைட்டிங் பளபளப்பான சிறப்பம்சங்களை உருவாக்குகிறது: இது பிளாஸ்டிக், உலோகம் அல்லது பிற மிகவும் பிரதிபலிக்கும் மேற்பரப்புகளை உருவகப்படுத்த பயன்படுகிறது.)

ஒரு வடிகட்டி லைட் சோர்ஸ் உள்ளீட்டில் உள்ள ஒரு பிக்சலின் ஆல்பா மதிப்பை z- பரிமாணத்தில் அந்த பிக்சலின் உயரமாகக் கருதுகிறது, மேலும் அந்த உயரத்தை ஒரு மெய்நிகர் மேற்பரப்பைக் கணக்கிட பயன்படுத்துகிறது, இது ஒளி மூலத்திலிருந்து ஒரு குறிப்பிட்ட அளவு ஒளியை பிரதிபலிக்கும். ஏனெனில் feTurbulence 0 முதல் 1 வரை சத்தமில்லாத மதிப்புகள் நிறைந்த ஆல்பா சேனலை உருவாக்குகிறது, இது ஒரு நல்ல மாறி Z நிலப்பரப்பை உருவாக்குகிறது, இது நம் ஒளியை நாம் பிரகாசிக்கும்போது சிறப்பம்சங்களை உருவாக்குகிறது.

தி மேற்பரப்பு அளவு இல் மதிப்பு feDiffuseLighting z குறியீடாகும்
பெருக்கி. இதை அதிகரிப்பது உங்கள் அமைப்பில் செங்குத்தான மெய்நிகர் சரிவுகளை உருவாக்கும். அ மேற்பரப்பு அளவு 20 இல் ஒரு ஸ்டக்கோ அமைப்பு மற்றும் a மேற்பரப்பு அளவு 50 இல் நொறுக்கப்பட்ட பிளாஸ்டிக் உருவாக்கும்.

படங்களை கையாளுதல்

எஸ்.வி.ஜி வடிப்பான்களைப் பயன்படுத்தக்கூடிய இறுதி பகுதி பிட்மேப் பட கையாளுதலில் உள்ளது. கேன்வாஸ் குறைந்த அளவிலான பிக்சல்-ட்விட்லிங் திறன்களைக் கொண்டிருந்தாலும், எஸ்.வி.ஜி வடிப்பான்கள் உயர் மட்ட கருவிப்பெட்டியை வழங்குகின்றன.

இந்த எடுத்துக்காட்டில், இன்ஸ்டாகிராமில் இருந்து இப்போது செயல்படாத கோதம் வடிப்பானால் ஈர்க்கப்பட்ட வடிப்பானை உருவாக்குவோம். அதன் நாளில், கோதம் இருண்ட வானங்களைக் கொண்ட வியத்தகு கருப்பு மற்றும் வெள்ளை படங்களுக்கு பெயர் பெற்றது. சரியான இன்ஸ்டாகிராம் வழிமுறை தெரியவில்லை என்றாலும், கோதம் வடிப்பான் ஐந்து மாற்றங்களைக் கொண்டிருந்தது என்பது பொதுவான ஒருமித்த கருத்தாகும்:

• மிட்-டோன் கான்ட்ராஸ்ட் பூஸ்ட்
• சிவப்பு சேனலைப் பயன்படுத்தி கருப்பு மற்றும் வெள்ளை மாற்றம்
• ஒரு சிறிய கூர்மைப்படுத்துதல்
• குறைந்த மிட் டோன்களுக்கான நீல சேனலில் ஒரு ஊக்க
• மேல் மிடோன்களுக்கான நீல சேனலின் குறைவு

இவை அனைத்தும் எஸ்.வி.ஜி வடிகட்டி கருவிப்பெட்டியுடன் மார்க்அப்பின் சில வரிகளில் செய்ய எளிதானது:

வடிகட்டி ஐடி = ”கோதமிஷ்” வண்ண-இடைக்கணிப்பு-வடிப்பான்கள் = ”எஸ்ஆர்ஜிபி”>

feComponentTransfer in = ”SourceGraphic” result = ”midtoneContrast”>

feFuncR type = ”table” tableValues ​​= ”0 0.05 0.1 0.2 0.3 0.5 0.7 0.8 0.9 0.95 1.0” />

/ feComponentTransfer>

feColorMatrix in = ”midtoneContrast” result = ”redBWandblue” type = ”matrix” values ​​= ”1 0 0 0 0

10000

1 0 0 0 0.03

0 0 0 1 0”/>

feGaussianBlur in = ”redBWandblue” stdDeviation = ”1” result = ”blurMask” />

feComposite operator = ”arithmetic” in = ”redBWandblue” in2 = ”blurMask” k2 = ”1.3” k3 = ”- 0.3” result = ”postharp” />

feComponentTransfer result = ”finalImage” in = ”postharp”>

feFuncB type = ”table” tableValues ​​= ”0 0.047 0.118 0.251 0.318 0.392 0.42 0.439 0.475 0.561 0.58 0.627 0.671 0.733 0.847 0.925 1” />

/ feComponentTransfer>

/ வடிகட்டி>

வடிப்பானை நாங்கள் தொடங்குகிறோம் feComponentTransfer சிவப்பு சேனலுக்காக (பிற சேனல்களை விரைவில் நிராகரிப்போம்). ‘டேபிள்’ மேப்பிங் ஒரு பட எடிட்டரில் வளைவுகள் சரிசெய்தல் கட்டுப்பாடு போன்றது. இதில்
tableValues வரிசை, நாங்கள் மிடோன்களை ஒரு பெரிய வரம்பில் மாற்றியமைக்கிறோம், இதையொட்டி, சிறப்பம்சங்களை மேல்நோக்கி மற்றும் நிழல்களை கீழ்நோக்கி சரிசெய்கிறோம்.

நாம் முடிவை எடுத்து ஒரு வழியாக இயக்குகிறோம் feColorMatrix. இது சிவப்பு சேனலை எடுத்து நீல மற்றும் பச்சை சேனல்களுக்கு நகலெடுக்கிறது, அவற்றின் தற்போதைய மதிப்புகளை அதிகமாக எழுதுகிறது. இது சிவப்பு சேனலில் இருந்து முற்றிலும் உருவாக்கப்பட்ட கிரேஸ்கேலை நமக்கு வழங்குகிறது. நாங்கள் வண்ண மேட்ரிக்ஸைப் பயன்படுத்தும்போது, ​​சேர்ப்பதன் மூலம் கரும்புள்ளியையும் சரிசெய்கிறோம் 0.03 நீல சேனலுக்கு, எங்கள் கறுப்பர்களுக்கு ஒரு மங்கலான நீல நிறத்தை அளிக்கிறது.

அடுத்து, எங்கள் இடைநிலை படத்தின் 1 யூனிட் மங்கலை எடுத்து, 30% இடைநிலை படத்திலிருந்து 30% கழிப்பதன் மூலம் படத்தை கூர்மைப்படுத்த ஒரு அன்ஷார்ப் மாஸ்க் செய்கிறோம். இறுதியாக, மற்றொரு feComponentTransfer கீழ் மிடோன்களில் நீல சேனலை அதிகரிக்கவும், மேல் மிடோன்களில் குறைக்கவும். இது நடுப்பகுதி முதல் ஒளி சாம்பல் வரை சிறிது மஞ்சள் நிற வார்ப்பைக் கொடுக்கும், அதே நேரத்தில் நடுப்பகுதியில் இருண்ட சாம்பல் நிறத்தில் கூடுதல் நீல நிறத்தை சேர்க்கிறது.

அங்கே உங்களிடம் உள்ளது: நீங்கள் ஒரு அடிப்படை கோதம் பாணி வடிப்பானை உருவாக்கியுள்ளீர்கள்.

வடிப்பான்கள், CSS மற்றும் ஜாவாஸ்கிரிப்ட்

CSS வழியாக வடிகட்டி அமைப்புகளை உருவாக்க மற்றும் மாற்ற முடியும் என்பது மிகவும் எளிது. துரதிர்ஷ்டவசமாக, ஒப்பீட்டளவில் சில வடிகட்டி அமைப்புகள் CSS உடன் குறிப்பிடக்கூடிய பண்புகள்; பெரும்பாலானவை எஸ்.வி.ஜி பண்புக்கூறுகள். முக்கிய எஸ்.வி.ஜி வடிகட்டி பண்புகள் வண்ண-இடைக்கணிப்பு-வடிப்பான்கள், வெள்ள-நிறம், வெள்ள-ஒளிபுகாநிலை மற்றும் விளக்கு-வண்ணம். கிட்டத்தட்ட எல்லாமே ஒரு பண்பு.

வடிப்பான்களை உருவாக்குவதும் அனிமேஷன் செய்வதும் நிச்சயமாக ஜாவாஸ்கிரிப்ட் மூலம் செய்யப்படலாம் (நீங்கள் மூல DOM முறைகளைப் பயன்படுத்துகிறீர்கள் என்றால், நீங்கள் SVG எக்ஸ்எம்எல் பெயர்வெளியைப் பயன்படுத்துகிறீர்கள் என்றால் * NS தொடரியல் பயன்படுத்த நினைவில் கொள்க). SMIL உடன் அறிவிப்பு அனிமேஷனைப் பயன்படுத்துவது ஒரு மாற்று. IE SMIL ஐ ஆதரிக்கவில்லை என்றாலும், IE க்கான பொதுவான SMIL அறிவிப்புகளை பாலிஃபில்ஸ் செய்யும் போலி எஸ்எம்ஐஎல் எனப்படும் ஒரு எளிதான நூலகம் உள்ளது.

பிரபலமான நூலகங்களைப் பயன்படுத்தி நீங்கள் வரைந்த வடிவங்களுக்கு வடிகட்டி விளைவுகளைச் சேர்க்கலாம். D3.js இல், ஒரு வடிகட்டி வரையறை இதுபோன்றது:

var வடிகட்டி = svg.append (“defs”)

.append (“வடிகட்டி”)

.attr (“ஐடி”, “மங்கலானது”)

.append (“feGaussianBlur”)

.attr (“stdDeviation”, 5);

இது ஒரு சேர்க்கப்படும் defs> உங்கள் d3 காட்சிப்படுத்தலுக்கு உறுப்பு மற்றும் மங்கலான வடிகட்டி வரையறை. முழுமையான பயன்பாட்டிற்கு, bl.ocks.org/ mbostock / 1342359 இல் மைக் போஸ்டாக்கின் முழு உதாரணத்தைப் பார்க்கவும். செஞ்சா டச் அல்லது எக்ஸ்ட் ஜே.எஸ் ஐப் பயன்படுத்தி கிராபிக்ஸ் உருவாக்கும்போது வடிப்பானை வரையறுத்து விண்ணப்பிக்கலாம்.

Ext.Draw உடன் சிறந்த பயிற்சி புதியதைச் சேர்ப்பதாகும் svgFilter உங்கள் டிரா ஸ்ப்ரைட்டுகளுக்கான பண்புக்கூறு, இது அந்த ஸ்ப்ரைட்டுகளில் பயன்படுத்த வேண்டிய வடிப்பானை வரையறுக்கிறது. பின்னர் நீங்கள் DOM கூறுகளை உருவாக்கி, வடிகட்டி பயன்பாட்டை Ext.draw இன் உள்ளமைக்கப்பட்ட கையாளுதலில் நிரப்பு மற்றும் பக்கவாதம் எனப் பிரிக்க வேண்டும். இந்த சாராம்சத்தில் நீங்கள் ஒரு வேலை உதாரணத்தைக் காணலாம்.

மேலும் விளைவுகளைக் கற்றல்

வடிப்பான்களுடன் நீங்கள் உருவாக்கக்கூடிய கூடுதல் விளைவுகளில் தேர்ந்தெடுக்கப்பட்ட கிரேஸ்கேல்கள், iOS 7-பாணி ஒளிபுகா மங்கல்கள், சாய்-மாற்றங்கள், விக்னெட்டுகள், மென்மையான-கவனம், உரை சிதைவுகள் மற்றும் போஸ்டரைசேஷன் போன்ற கவனம் மங்கல்கள் அடங்கும். அவற்றில் சிலவற்றை எனது கோட் பென் பொது சேகரிப்பில் காணலாம்.

சொற்கள்: மைக்கேல் முல்லனி

இந்த கட்டுரை முதலில் நிகர பத்திரிகை வெளியீடு 251 இல் வெளிவந்தது.