CSS Paint Worklet: Kohandatud CSS-i joonistusfunktsioonide kasutuselevõtt

Veeb on pidevalt arenev maastik ja CSS pole erand. Üks põnevamaid hiljutisi arenguid on CSS Houdini, API-de kogum, mis paljastab CSS-i renderdusmootori osi, andes arendajatele enneolematu kontrolli stiilide ja paigutuse üle. Nende võimsate API-de hulgas paistab CSS Paint Worklet silma kui mängumuutja, võimaldades teil määratleda kohandatud joonistusfunktsioone, mida saab kasutada kõikjal, kus CSS-i pilti aktsepteeritakse. See tähendab, et saate luua dünaamilisi, jõudluskeskseid ja visuaalselt vapustavaid efekte otse teie CSS-is, ilma et peaksite tuginema JavaScriptile või välistele piltidele.

Mis on CSS Paint Worklet?

CSS Paint Worklet on sisuliselt JavaScripti moodul, mis määratleb funktsiooni `paint()`. See funktsioon saab joonistuskonteksti (sarnane Canvas API kontekstile), joonistatava elemendi suuruse ja kõik teie CSS-is määratletud kohandatud omadused. Seejärel saate seda teavet kasutada kõike kujuteldavat joonistamiseks, alates lihtsatest kujunditest ja gradientidest kuni keerukate mustrite ja animatsioonideni.

Mõelge sellele kui pisikesele, spetsiaalsele joonistusmootorile, mis on spetsiaalselt teie CSS-i jaoks. See on eraldi lõim (seega "worklet"), mis töötab taustal, tagades, et teie joonistuskood ei blokeeri peamist lõime ega mõjuta teie veebisaidi jõudlust.

Miks kasutada CSS Paint Worklete?

CSS Paint Workletite kasutuselevõtuks on mitu veenvat põhjust:

• Jõudlus: Joonistamisülesannete eraldi lõimale ülesande ülekandmisega saavad Paint Workletid oluliselt parandada teie veebisaidi jõudlust, eriti keerukate visuaalefektidega tegelemisel.
• Paindlikkus: Paint Workletid pakuvad võrreldamatut paindlikkust kohandatud visuaalefektide loomisel. Saate luua kõike alates lihtsatest gradientidest ja mustritest kuni keerukate animatsioonide ja andmevisualisatsioonideni, seda kõike teie CSS-is.
• Hooldatavus: Joonistamisloogika kapseldamisega spetsiaalsesse moodulisse võivad Paint Workletid muuta teie CSS-koodi organiseeritumaks ja hooldatavamaks.
• Taaskasutatavus: Paint Worklete saate hõlpsalt taaskasutada mitmete elementide ja projektide vahel, säästes teile aega ja vaeva.
• Dünaamiline stiilimine: Paint Workletid saavad reageerida CSS-i kohandatud omadustele (muutujatele), võimaldades teil luua dünaamilisi ja reageerivaid visuaalseid efekte, mis kohanduvad erinevate ekraanisuuruste ja kasutajate interaktsioonidega.

Alustamine CSS Paint Workletitega

Siin on samm-sammult juhend CSS Paint Workletitega alustamiseks:

1. Looge oma Paint Workleti jaoks JavaScripti fail

See fail sisaldab funktsiooni `paint()`, mis määratleb teie kohandatud joonistusloogika. Näiteks loome lihtsa Paint Workleti, mis joonistab ruudumustri:

            
// 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
              
            
          

Selgitus:

• `registerPaint('checkerboard', class { ... })`: See registreerib Paint Workleti nimega 'checkerboard'. See on nimi, mida kasutate oma CSS-is workleti viitamiseks.
• `static get inputProperties() { ... }`: See määratleb CSS-i kohandatud omadused, mida Paint Worklet kasutab. Sel juhul kasutame `--checkerboard-size`, `--checkerboard-color-1` ja `--checkerboard-color-2`.
• `paint(ctx, geom, properties) { ... }`: See on peamine funktsioon, mis teeb joonistamise. See saab joonistuskonteksti (`ctx`), joonistatava elemendi geomeetria (`geom`) ja kohandatud omadused (`properties`).
• `ctx.fillStyle = ...`: See määrab joonistuskonteksti täitevärvi.
• `ctx.fillRect(i * size, j * size, size, size)`: See joonistab täidetud ristküliku määratud koordinaatides ja määratud mõõtmetega.

2. Registreerige Paint Worklet oma CSS-is

Oma CSS-failis peate Paint Workleti registreerima, kasutades meetodit `CSS.paintWorklet.addModule()`:

            
// main.js (või sarnane fail, mis laaditakse enne teie CSS-i)
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('checkerboard.js');
}

            

              
                Copy
              
            
          

Tähtis: See kood peab käivituma enne, kui proovite Paint Workleti oma CSS-is kasutada. Kaaluge selle paigutamist HTML-is olevale `