CSS பெயிண்ட் வொர்க்லெட்: தனிப்பயன் CSS வரைதல் செயல்பாடுகளை கட்டவிழ்த்து விடுதல்

இணையம் என்பது தொடர்ந்து மாறிவரும் ஒரு நிலப்பரப்பு, CSSம் இதற்கு விதிவிலக்கல்ல. மிகச் சமீபத்திய அற்புதமான முன்னேற்றங்களில் ஒன்று CSS ஹுடினி, இது CSS ரெண்டரிங் இயந்திரத்தின் பகுதிகளை வெளிப்படுத்தும் APIகளின் தொகுப்பாகும், இது டெவலப்பர்களுக்கு ஸ்டைலிங் மற்றும் லேஅவுட் மீது முன்னெப்போதும் இல்லாத கட்டுப்பாட்டைக் கொடுக்கிறது. இந்த சக்திவாய்ந்த APIகளில், CSS பெயிண்ட் வொர்க்லெட் ஒரு கேம்-சேஞ்சராக தனித்து நிற்கிறது, இது ஒரு CSS படம் ஏற்றுக்கொள்ளப்படும் எங்கும் பயன்படுத்தக்கூடிய தனிப்பயன் வரைதல் செயல்பாடுகளை வரையறுக்க உங்களை அனுமதிக்கிறது. இதன் பொருள், ஜாவாஸ்கிரிப்ட் அல்லது வெளிப்புறப் படங்களை நம்பியிருக்காமல், உங்கள் CSS-க்குள் நேரடியாக டைனமிக், செயல்திறன் மிக்க மற்றும் பார்வைக்கு பிரமிக்க வைக்கும் விளைவுகளை நீங்கள் உருவாக்கலாம்.

CSS பெயிண்ட் வொர்க்லெட் என்றால் என்ன?

ஒரு CSS பெயிண்ட் வொர்க்லெட் என்பது அடிப்படையில் ஒரு ஜாவாஸ்கிரிப்ட் மாட்யூல் ஆகும், இது ஒரு `paint()` செயல்பாட்டை வரையறுக்கிறது. இந்த செயல்பாடு ஒரு வரைதல் சூழல் (கேன்வாஸ் API சூழலைப் போன்றது), பெயிண்ட் செய்யப்படும் தனிமத்தின் அளவு மற்றும் உங்கள் CSS-ல் நீங்கள் வரையறுத்த எந்த தனிப்பயன் பண்புகளையும் பெறுகிறது. எளிய வடிவங்கள் மற்றும் கிரேடியன்ட்கள் முதல் சிக்கலான வடிவங்கள் மற்றும் அனிமேஷன்கள் வரை நீங்கள் கற்பனை செய்யக்கூடிய எதையும் வரைய இந்தத் தகவலைப் பயன்படுத்தலாம்.

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

CSS பெயிண்ட் வொர்க்லெட்களை ஏன் பயன்படுத்த வேண்டும்?

CSS பெயிண்ட் வொர்க்லெட்களை ஏற்றுக்கொள்வதற்கு பல வலுவான காரணங்கள் உள்ளன:

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

CSS பெயிண்ட் வொர்க்லெட்களுடன் தொடங்குவது எப்படி

CSS பெயிண்ட் வொர்க்லெட்களுடன் தொடங்குவதற்கான ஒரு படிப்படியான வழிகாட்டி இங்கே:

1. உங்கள் பெயிண்ட் வொர்க்லெட்டிற்கான ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்கவும்

இந்த கோப்பில் உங்கள் தனிப்பயன் வரைதல் தர்க்கத்தை வரையறுக்கும் `paint()` செயல்பாடு இருக்கும். உதாரணமாக, ஒரு செக்கர்போர்டு வடிவத்தை வரையும் ஒரு எளிய பெயிண்ட் வொர்க்லெட்டை உருவாக்குவோம்:

            
// checkerboard.js
registerPaint('checkerboard', class {
  static get inputProperties() {
    return ['--checkerboard-size', '--checkerboard-color-1', '--checkerboard-color-2'];
  }

  paint(ctx, geom, properties) {
    const size = Number(properties.get('--checkerboard-size'));
    const color1 = String(properties.get('--checkerboard-color-1'));
    const color2 = String(properties.get('--checkerboard-color-2'));

    for (let i = 0; i < geom.width / size; i++) {
      for (let j = 0; j < geom.height / size; j++) {
        ctx.fillStyle = (i + j) % 2 ? color1 : color2;
        ctx.fillRect(i * size, j * size, size, size);
      }
    }
  }
});

            

              
                Copy
              
            
          

விளக்கம்:

• `registerPaint('checkerboard', class { ... })`: இது பெயிண்ட் வொர்க்லெட்டை 'checkerboard' என்ற பெயரில் பதிவு செய்கிறது. இதுவே உங்கள் CSS-ல் வொர்க்லெட்டைக் குறிப்பிடப் பயன்படுத்தும் பெயர்.
• `static get inputProperties() { ... }`: இது பெயிண்ட் வொர்க்லெட் பயன்படுத்தும் CSS தனிப்பயன் பண்புகளை வரையறுக்கிறது. இந்த விஷயத்தில், நாங்கள் `--checkerboard-size`, `--checkerboard-color-1`, மற்றும் `--checkerboard-color-2` ஐப் பயன்படுத்துகிறோம்.
• `paint(ctx, geom, properties) { ... }`: இதுவே வரைதல் செய்யும் முக்கிய செயல்பாடு ஆகும். இது வரைதல் சூழல் (`ctx`), பெயிண்ட் செய்யப்படும் தனிமத்தின் வடிவியல் (`geom`), மற்றும் தனிப்பயன் பண்புகளை (`properties`) பெறுகிறது.
• `ctx.fillStyle = ...`: இது வரைதல் சூழலின் நிரப்பு நிறத்தை அமைக்கிறது.
• `ctx.fillRect(i * size, j * size, size, size)`: இது குறிப்பிட்ட ஆயத்தொலைவுகளில் மற்றும் குறிப்பிட்ட பரிமாணங்களுடன் நிரப்பப்பட்ட ஒரு செவ்வகத்தை வரைகிறது.

2. உங்கள் CSS-ல் பெயிண்ட் வொர்க்லெட்டைப் பதிவு செய்யவும்

உங்கள் CSS கோப்பில், `CSS.paintWorklet.addModule()` முறையைப் பயன்படுத்தி பெயிண்ட் வொர்க்லெட்டைப் பதிவு செய்ய வேண்டும்:

            
// main.js (or similar file that loads before your CSS)
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('checkerboard.js');
}

            

              
                Copy
              
            
          

முக்கியமானது: உங்கள் CSS-ல் பெயிண்ட் வொர்க்லெட்டைப் பயன்படுத்த முயற்சிக்கும் முன் இந்த குறியீடு இயங்க வேண்டும். இதை உங்கள் HTML-ல் ஒரு `