Kā izmantot CSS relatīvās krāsas, lai iegūtu galīgo sešstūra krāsu JavaScript

Izpratne par to, kā strādāt ar CSS relatīvajām krāsām JavaScript

CSS relatīvās krāsas sniedz izstrādātājiem lielāku stila elastību, ļaujot viņiem dinamiski modificēt krāsas, pamatojoties uz jau esošām krāsu vērtībām. Piemēram, iespējams, vēlēsities mainīt krāsas alfa caurspīdīgumu, kā arī tās sarkanos un zilos kanālus. Šķidruma projektēšanas sistēmām ir vairāk iespēju, pateicoties šai tehnikai.

Tomēr darbs ar šiem dinamiski ģenerētajiem datiem JavaScript var būt sarežģīts. Ja mēģināt izmantot getComputedStyle lai izgūtu aprēķināto krāsu, tā var atgriezt neapstrādāto virkni, nevis labot jūsu veiktās CSS izmaiņas. Tas ierobežo programmatiskās manipulācijas un galīgās izvades krāsas analīzi.

Šajā rakstā mēs pārbaudām procesu, kā iegūt pilnīgu aprēķināto hex krāsu no CSS neatkarīgi no tā, vai tā ir noteikta, izmantojot sarežģītu CSS relatīvās krāsas sintakse. Mēs risinām jautājumu par to, kā iegūt precīzu krāsu vērtību, kad CSS dzinējs ir aprēķinājis RGB un alfa kanālu relatīvās modifikācijas.

Mēs izskatīsim arī citas iespējamās iespējas, piemēram, jebkuras trešās puses bibliotēkas vai iebūvētās pārlūkprogrammas API, kas var palīdzēt iegūt šo krāsu informāciju tādā formātā, ko var izmantot jūsu JavaScript kodā, lai to tālāk pārveidotu.

JavaScript: CSS relatīvo krāsu izmantošana, lai iegūtu galīgo sešstūra krāsu

Pirmajā skriptā mēs izmantojām JavaScript, lai iegūtu un strādātu ar dinamiski aprēķinātām krāsām CSS, izmantojot pārlūkprogrammas iebūvētās funkcijas. Galvenā problēma ir faktā, ka CSS relatīvās krāsas ļauj regulēt mainīgu krāsu kanālu, kas nav attēlots izvadē, ja tiek izmantotas tradicionālākas metodes, piemēram, getComputedStyle. Mēs izstrādājam risinājumu, izmantojot a audekls elements. Mēs varam iegūt precīzas RGB vērtības, atveidojot aprēķināto krāsu uz audekla, kura izmēri ir 1 x 1 pikseļi. Audekla API spēja manipulēt ar attēla datiem pikseļu līmenī, tostarp ar krāsām, padara šo procesu iespējamu.

Katra pikseļa RGBA vērtības tiek iegūtas ar getImageData metodi, kad krāsa ir uzlikta uz audekla. Pēc tam, izmantojot JavaScript konvertēšanu no skaitļa uz virkni un bitu darbības, šīs vērtības tiek pārveidotas heksadecimālā formātā. Šeit ir svarīgi norādījumi, piemēram fillRect un getContext('2d'), ir atbildīgi par krāsas ģenerēšanu un zīmējamas virsmas izveidi. Ja mums ir nepieciešama precīza krāsa, ko pārlūkprogramma atveido saskaņā ar CSS noteikumi, tostarp jebkādi caurspīdīguma vai krāsu kanālu pielāgojumi, šis paņēmiens darbojas labi. Tā ir lieliska metode problēmas risināšanai, neizmantojot citas bibliotēkas.

Otrajā metodē mēs racionalizējām krāsu manipulācijas, izmantojot trešās puses rīku Chroma.js. Krāsas var viegli konvertēt starp dažādiem formātiem, izmantojot Chroma.js, kas nodrošina abstrahētāku metodi mijiedarbībai ar krāsām. Chroma.js automātiski apstrādā konvertēšanu uz hex vai citiem formātiem, piemēram, RGB vai HSL, kad aprēķinātā krāsa ir iegūta no DOM. Strādājot pie projektiem, kuriem nepieciešama sarežģītāka krāsu korekcija vai formātu pārveidošana, šī pieeja ir ideāla. Rezultātā kods ir padarīts vienkāršāks, tīrāks un vieglāk uzturējams.

Lai gan no pretējām perspektīvām abas stratēģijas risina vienu un to pašu problēmu. Lai noteiktu galīgo heksadecimālo krāsu, pirmajā tiek izmantoti bitu aprēķini un vietējās pārlūkprogrammas API, bet otrajā tiek izmantotas īpašas krāsu manipulācijas pakotnes iespējas. Varat izmantot Chroma.js, lai palielinātu elastību un lietošanas vienkāršību, vai arī varat izmantot vietējo veidu, lai izvairītos no atkarību pievienošanas atkarībā no jūsu projekta vajadzībām. JavaScript ļauj veikt papildu manipulācijas ar izgūto hex krāsu abos scenārijos, nodrošinot dinamiskas stila un krāsu animācijas iespējas.

// 1. First, grab the element whose color you want to extract
const element = document.querySelector('.my-element');

// 2. Use getComputedStyle to get the color property
let computedColor = getComputedStyle(element).color;

// 3. Create a canvas to convert the computed color to hex format
let canvas = document.createElement('canvas');
canvas.width = 1; // Small canvas, just for color conversion
canvas.height = 1;
let ctx = canvas.getContext('2d');

// 4. Set the fill style to the computed color and fill the canvas
ctx.fillStyle = computedColor;
ctx.fillRect(0, 0, 1, 1);

// 5. Extract the color in hex format using getImageData
let pixelData = ctx.getImageData(0, 0, 1, 1).data;
let hexColor = "#" +
  ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2])
    .toString(16)
    .slice(1); // Convert to hex and remove the alpha

console.log(hexColor); // This will log the final hex color value

// 1. First, include Chroma.js in your project (e.g., via CDN or NPM)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js">
const element = document.querySelector('.my-element');

// 2. Retrieve the computed color using getComputedStyle
let computedColor = getComputedStyle(element).color;

// 3. Use Chroma.js to convert the computed color to hex
let chromaColor = chroma(computedColor);
let hexColor = chromaColor.hex();

console.log(hexColor); // Log the final hex color

// Chroma.js also supports other formats such as RGB or HSL
let rgbColor = chromaColor.rgb();
let hslColor = chromaColor.hsl();

console.log(rgbColor); // Logs RGB array
console.log(hslColor); // Logs HSL array

describe('Color Extraction Tests', () => {
  it('should return the correct hex color using canvas', () => {
    let color = getHexColorFromCanvas('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });

  it('should return the correct hex color using Chroma.js', () => {
    let color = getHexColorUsingChroma('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });
});

// Functions used for the tests
function getHexColorFromCanvas(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  let canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = computedColor;
  ctx.fillRect(0, 0, 1, 1);
  let pixelData = ctx.getImageData(0, 0, 1, 1).data;
  return "#" + ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16).slice(1);
}

function getHexColorUsingChroma(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  return chroma(computedColor).hex();
}

Uzlabotas metodes CSS relatīvo krāsu apstrādei JavaScript

Mainīgo lielumu izmantošana, lai panāktu dinamiskas krāsu modifikācijas, ir spēcīga, bet dažkārt ignorēta iezīme CSS relatīvās krāsas. Piemēram, varat izmantot JavaScript, lai izveidotu CSS mainīgos, kas attēlo pamatkrāsas, un mainītu tos reāllaikā, iespējot atsaucīgas dizaina sistēmas un dinamiskas tēmas. Šī metode nodrošina mērogojamu un uzturējamu krāsu shēmu izveidi mūsdienu tiešsaistes lietojumprogrammās, ja to izmanto kopā ar CSS relatīvajām krāsu funkcijām.

CSS drukātā objekta modeļa (Typed OM) izmantošana ir papildu metode galīgās aprēķinātās krāsas iegūšanas jautājuma risināšanai. Pateicoties Typed OM, izstrādātāji var strādāt programmatiskāk un sistemātiskāk ar CSS atribūtiem. CSS vērtībām tagad var piekļūt kā JavaScript objektiem, pateicoties Typed OM, kas novērš nepieciešamību pēc virknēm balstītām metodēm. Relatīvās krāsas un citi sarežģītas CSS transformācijas gūt labumu no tā, jo tas ļauj precīzāk kontrolēt manipulācijas ar īpašumu.

Visbeidzot, ja vēlaties izsekot elementu stilu izmaiņām, īpaši, ja CSS mainīgie vai relatīvās krāsu vērtības tiek dinamiski mainītas, padomājiet par JavaScript izmantošanu. MutationObserver. MutationObserver var izsekot DOM modifikācijām, piemēram, elementa iekļauto stilu korekcijām. Varat likt JavaScript loģikai pārrēķināt krāsu un atjaunināt to atbilstoši visām piemērojamajām stila izmaiņām. Šis paņēmiens īpaši labi darbojas ļoti dinamiskās saskarnēs, kur stila izmaiņas notiek regulāri, reaģējot uz ievadi no lietotāja vai ārējiem avotiem.