Innhold
- Hvorfor filtrere effekter?
- Standardisering og nettleserstøtte
- Et grunnleggende filter: Drop Shadow
- Tilpasse skygger
- Opprette teksturfiltre
- Manipulere bilder
- Filtre, CSS og JavaScript
- Lære flere effekter
Filtereffekter bruker grafikkoperasjoner som uskarphet, belysning, fargetransformasjoner og forvrengning av innholdet. Dagens nettlesere implementerer tre typer filtre:
- CSS-filtre: et sett med enkle CSS-egenskaper som sepia () og kontrast() som kan brukes på hvilket som helst HTML-innhold.
- SVG-filtre: kombinasjoner av grafiske effekter som kan brukes på SVG-innhold (og HTML-innhold gjennom et CSS-filter kryssreferanse).
- DX-filtre er Microsofts proprietære filtereffekter. DX-filtre ble avviklet i Internet Explorer (IE) 9 og deretter fjernet i IE versjon 10 (selv om de fremdeles kan reaktiveres via gruppepolicy). Microsofts DX-filtre ble bare støttet i Internet Explorer.
I denne veiledningen starter vi med en enkel skygge, deretter tilpasser vi skyggeeffekter for tekst, går gjennom å bygge en tekstur og til slutt gjenskaper Gotham, som er et utgått Instagram-filter. Mot slutten av opplæringen håper jeg du har et godt innblikk i det grunnleggende om filter og nyttig eksempler på kode.
Hvorfor filtrere effekter?
Når du vil legge til visuelle effekter i bilder, grafikk, tekst eller video, kan du gjøre dette i forproduksjon med verktøy som Photoshop eller Illustrator, eller i løpetid ved bruk av lerret-, SVG- og / eller CSS-effekter.
Runtime-effekter kan animeres, og du kan forhindre ytelseseffekten av store nedlastinger av bilder (for eksempel for støytekstur). Sammenlignet med lerret og CSS-effekter er SVG-filtre spesielt nyttige for:
- Legg til teksturer i SVG-grafikk uten å laste ned store bilder.
- Bygg inn bilderedigeringsfunksjoner på klientsiden i webappen din.
- Legg til belysning, preging og forvrengningseffekter i tekst, uten å måtte konvertere teksten til et bilde, og beholder tilgjengeligheten og søkbarheten.
Standardisering og nettleserstøtte
SVG-filtre i dagens nettlesere samsvarer stort sett med SVG 1.1-spesifikasjonen, som ble en W3C-anbefaling i 2003. CSS-filtre er et pågående arbeid og blir standardisert som en del av Filter Effects 1.0, som er en spesifikasjon som kombinerer CSS, SVG og tilpasset filtre.
Disse støttes med et prefiks i de nyeste versjonene av Chrome og Safari. Egendefinerte filtre er de nyeste og definerer toppunkt- og pikselskyggingseffekter som kan brukes på vanlig nettinnhold. Tilpassede filtre er tilgjengelige i alfa bak et flagg i nyere versjoner av Chrome.
SVG-filtre støttes i alle nyere stasjonære og mobile nettlesere. Ifølge caniuse.com har 73 prosent av nettleserinstallert base støtte.
Et grunnleggende filter: Drop Shadow
Til å begynne med viser vi hele koden for et grunnleggende filter for et innebygd SVG-fragment. Et SVG-filter er definert i defs> delen av et SVG-innebygd fragment eller dokument, og brukes på SVG-innhold ved å legge til et filter eiendom til innholdet.
Filterelementet er en beholder for filter 'primitiver'. En primitiv er en grafisk operasjon som kombineres med andre primitiver for å gi den endelige effekten. Skyggefilteret nedenfor har fire trinn:
- Pakk ut SourceAlpha (en kopi av det originale innholdet - SourceGraphic - med RGB-kanaler satt til svart).
- Påfør en Gaussisk uskarphet med et standardavvik på fire enheter.
- Ta den uskarpe teksten og kompenser den med 5 enheter i x og y.
- Ta den forskyvne uskarpe teksten du tidligere opprettet, og legg den under det opprinnelige innholdet (SourceGraphic) ved å bruke den sammensatte primitive, feComposite, og over operatør.
svg bredde = ”600px” høyde = ”200px” viewBox = ”0 0 600 200”>
defs>
filter id = ”dropshadow”>
feGaussianBlur in = ”SourceAlpha” result = ”blurOut” stdDeviation = ”4” />
feOffset i = ”blurOut” resultat = ”dropBlur” dx = ”5” dy = ”5” />
feComposite operator = ”over” in = ”SourceGraphic” in2 = ”dropBlur” result = ”final” />
/ filter>
/ defs>
tekstfilter = ”url (#dropshadow)” x = ”20” y = ”100” skriftstørrelse = ”80” bredde = ”550” høyde = ”600”>
Skygg dette!
/ tekst>
/ svg>
feComposite har andre kraftige operatører utover det enkle "over"komposisjon vi har vist. Sprekk opp CodePen for dette eksemplet og endre"over"til følgende verdier:
- i klemmer uskarpheten til området med originalteksten - gir en uskarp fylleffekt.
- ute viser originalteksten, men trekker fra skyggen og gir en dramatisk inngravert effekt.
- xor kombinerer begge inngangene, men trekker deretter overlappingen. Her resulterer det i samme effekt som en ute men legger til skyggen.
Tilpasse skygger
Filtre har kraftige muligheter for å tilpasse skygger. Hvis du ikke liker en gaussisk uskarphet, kan du bruke feConvolve primitiv for å lage uskarphet, retnings uskarphet eller andre ikke-gaussiske uskarpheter (inkludert uskarpe overflater i Photoshop).
Hvis du holder fast med en Gaussisk uskarphet, kan du tilpasse intensiteten og hellingen til skyggen ved hjelp av feComponentTransfer. Nedenfor vises en kontureffekt som produseres ved å kartlegge uskarphets alfakanal.
filter id = ”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”
i = ”SourceGraphic” in2 = ”dropBlur” resultat = ”final” />
/ filter>
Magien her er fra feFuncA primitiv, som omformer alfakanalen til uskarpheten (vanligvis en jevn bleking) i fire separate områder av 50% alfa til 0% alfa. Dette genererer en kontur. Du kan også kartlegge alfakanalen ved å bruke de andre typene i feComponentTransfer. 'Discrete' remapsverdier varierer til spesifikke verdier og kan brukes til å produsere glorieeffekter. 'Gamma' bruker en gammajustering. 'Linear' bruker en skråning og avlyssningsjustering.
Både gamma og lineære justeringer kan gi subtile skyggetilpasninger som ikke trekker oppmerksomhet mot seg selv.
Opprette teksturfiltre
Filtre kan generere rike teksturer. For eksempel murstein, marmor, filt, vevd klut, håndverkspapir, sandpapir, filmkorn, jord og stuk. Det er imidlertid ikke alltid greit. Komplekse strukturer kan ta et åtte eller ti-trinns filter. Inkscape (inkscape. Org), SVG-editoren med åpen kildekode, inneholder en samling teksturfiltre med kilden tilgjengelig for inspeksjon for inspirasjon.
Her vil jeg forklare hvordan du lager en forenklet grov papirstruktur som jeg tilpasset fra en av Inkscapes innebygde teksturer.
Først genererer vi en støyoverflate ved hjelp av fe-turbulens filter. Deretter skinner vi et lys på den overflaten ved hjelp av en feDiffuseLighting effekt, som skaper subtile skygger.
filter id = ”grovpapir” x = ”0%” y = ”0%” bredde = ”100%” høyde = ”100%”>
feTurbulence type = ”fractalNoise” baseFrequency = ”0.04” numOctaves = ”5” result = ”noise” />
feDiffuseLighting in = ”noise” lighting-color = ”white” surfaceScale = ”2” result = ”diffLight”>
feDistantLight azimuth = ”45” høyde = ”35” />
/ feDiffuseLighting>
/ filter>
feTurbulens har tre attributter du trenger å bekymre deg for: type, baseFrekvens og numOctaves.
- Type kan være enten fraktal Støy eller turbulens. fraktal Støy genererer gasslignende støy som er en god base for materiale og gassbaserte teksturer (som skyer). turbulens genererer en 'væskelignende' støy, som er en god base for vannholdige effekter.
- baseFrekvens spesifiserer 'kornet' av støyen. Svært lave verdier (for eksempel 0,001) vil gi store mønstre, og veldig høye verdier (for eksempel 0,5) vil gi små mønstre. Verdier i området 0,02 til 0,2 er nyttige utgangspunkt for de fleste teksturer.
- numOctaves angir antall detaljnivåer i støyen. Hver ekstra oktav legger til et nytt detaljlag med en høyere frekvens (som en høyere oktav i musikk). Fem oktaver er vanligvis den høyeste du trenger. Effekten av en sjette oktav er vanligvis ikke merkbar. De fe-turbulens filteret genererer i seg selv støy på tvers av alle kanaler, inkludert alfa. Hvis du vil ha en ugjennomsiktig tekstur, må du justere alfakanalen til en konstant 1. Du kan gjøre dette ved hjelp av a feComponentTransfer med en feFuncA barn.
Det er to typer belysning tilgjengelig i SVG-filtre: diffust og spekulært. Her bruker vi diffus belysning og en fjern lyskilde. (Spekulær belysning gir skinnende høydepunkter: den brukes til å simulere plast, metall eller andre svært reflekterende overflater.)
Et filterlyskilde behandler alfa-verdien til en piksel i inngangen som høyden på den pikslen i z-dimensjon, og bruker den høyden til å beregne en virtuell overflate, som vil reflektere en bestemt mengde lys fra lyskilden. Fordi feTurbulens genererer en alfakanal full av støyende verdier fra 0 til 1, den gir et fint variabelt Z-terreng som skaper høydepunkter når vi skinner vårt lys på den.
De overflateSkala verdi i feDiffuseLighting er z-indeksen
multiplikator. Å øke dette vil skape brattere virtuelle bakker i teksturen din. EN overflateSkala på 20 vil skape en stuktekstur og en overflateSkala på 50 vil lage krøllete plast.
Manipulere bilder
Et siste område der SVG-filtre kan brukes er i bitmap-bildemanipulering. Selv om lerret har piksler med lavere nivå, tilbyr SVG-filtre en verktøykasse på høyere nivå.
I dette eksemplet lager vi et filter inspirert av det nå nedlagte Gotham-filteret fra Instagram. I sin tid var Gotham kjent for dramatiske svart-hvitt-bilder med mørk himmel. Selv om den eksakte Instagram-algoritmen er ukjent, ser det ut til at den generelle konsensus er at Gotham-filteret besto av fem justeringer:
- En kontrastforbedring i mellomtonen
- En svart-hvitt konvertering ved hjelp av rød kanal
- En liten sliping
- Et løft i blå kanal for de nedre mellomtonene
- En nedgang i blå kanal for de øvre mellomtonene
Alt dette er enkelt å gjøre med SVG-filterverktøykassen på bare noen få linjer med markering:
filter id = ”Gothamish” color-interpolation-filters = ”sRGB”>
feComponentTransfer in = ”SourceGraphic” result = ”midtoneContrast”>
feFuncR type = ”tabell” tableValues = ”0 0,05 0,1 0,2 0,3 0,5 0,7 0,8 0,9 0,95 0,95” />
/ feComponentTransfer>
feColorMatrix i = ”midtoneContrast” resultat = ”redBWandblue” type = ”matrise” verdier = ”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 = ”aritmetic” in = ”redBWandblue” in2 = ”blurMask” k2 = ”1.3” k3 = ”- 0.3” result = ”postsharp” />
feComponentTransfer result = ”finalImage” in = ”postsharp”>
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>
/ filter>
Vi starter filteret med feComponentTransfer for den røde kanalen (vi vil snart kaste de andre kanalene). 'Tabell' -kartleggingen er som kurvejusteringskontrollen i en bildeditor. I dette
tableValues array, omformer vi mellomtonene til et større område, og i sin tur justerer du høydepunktene oppover og skyggene nedover.
Vi tar deretter resultatet og kjører det gjennom en feColorMatrix. Dette tar den røde kanalen og kopierer den over til de blå og grønne kanalene, og skriver over deres eksisterende verdier. Dette gir oss en gråtoner generert rent fra den røde kanalen. Mens vi bruker fargematrisen, justerer vi også svartpunktet ved å legge til 0.03 til den blå kanalen, noe som gir oss en svak blå fargetone til de svarte.
Deretter gjør vi en uskarp maske for å spisse bildet ved å ta en uskarphet på 1 enhet av vårt mellombilde og trekke 30% av det fra 130% av det mellomliggende bildet. Og til slutt, en annen feComponentTransfer for å øke den blå kanalen i de nedre mellomtonene og redusere den i de øvre mellomtonene. Dette gir midt til lys grå en svak gul støpe, mens du legger til en ekstra blå fargetone til midt til mørk grå.
Og der har du det: du har laget et grunnleggende filter i Gotham-stil.
Filtre, CSS og JavaScript
Det ville være veldig nyttig å kunne opprette og endre filterinnstillinger via CSS. Dessverre er relativt få filterinnstillinger egenskaper som kan spesifiseres med CSS; de fleste er SVG-attributter. De viktigste SVG-filteregenskapene er fargeinterpolasjonsfilter, flomfarge, flom-opasitet og belysning-farge. Nesten alt annet er et attributt.
Å lage og animere filtre kan selvfølgelig utføres med JavaScript (hvis du bruker rå DOM-metoder, husk å bruke * NS-syntaksen hvis du bruker SVG XML-navneområdet). Et alternativ er å bruke deklarativ animasjon med SMIL. Selv om IE ikke støtter SMIL, er det et praktisk bibliotek som heter fakeSMIL som fyller ut de vanligste SMIL-deklarasjonene for IE.
Du kan legge til filtereffekter i figurene du tegner, ved hjelp av populære biblioteker. I d3.js ser en filterdefinisjon omtrent slik ut:
var filter = svg.append (“defs”)
.append (“filter”)
.attr ("id", "uskarphet")
.append (“feGaussianBlur”)
.attr (“stdDeviation”, 5);
Dette vil legge til en defs> element og en uskarphetsdefinisjon til din d3-visualisering. For fullstendig bruk, se Mike Bostocks fulle eksempel på bl.ocks.org/ mbostock / 1342359. Du kan også definere og bruke et filter når du lager grafikk ved hjelp av Sencha Touch eller Ext JS.
Beste fremgangsmåten med Ext.Draw er å legge til en ny svgFilter attributt til draw sprites, som definerer filteret som skal brukes på disse sprites. Deretter må du generere DOM-elementene og spleise filterapplikasjonen i Ext.draws innebygde håndtering av fyll og strek. Du kan se et fungerende eksempel på denne kjernen.
Lære flere effekter
Tilleggseffekter du kan lage med filtre inkluderer selektive gråtoner, iOS 7-stil ugjennomsiktige uskarpheter, fokus uskarpheter som tilt-shift, vignetter, soft-focus, tekstforvrengninger og posterisering. Du kan se noen av dem i CodePen-samlingene mine.
Ord: Michael Mullany
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 251.
