Comment fonctionne la fonction pSBC pour l'ombrage, la fusion et la conversion des couleurs ?

Cette fonction, pSBC, prend une couleur Web HEX ou RVB et y effectue des opérations, telles que l'ombrage, le mélange ou la conversion entre formats. Voici comment cela fonctionne :

Ombrage : pSBC peut éclaircir ou assombrir une couleur selon un pourcentage spécifié. Il accomplit cela sans conversion en HSL, contrairement aux fonctions basées sur HSL plus grandes et plus lentes. Les résultats de pSBC peuvent donc différer de ceux des fonctions HSL.

Mélange : pSBC peut mélanger deux couleurs ensemble en utilisant un mélange linéaire ou logarithmique. En spécifiant le pourcentage de mélange, vous pouvez créer une transition douce entre les deux couleurs. Les canaux alpha sont pris en charge, permettant un mélange transparent.

Conversion : pSBC convertit automatiquement HEX en RVB ou RVB en HEX lors du mélange de couleurs ou de l'ombrage. Il gère également les codes HEX à 3 chiffres (par exemple, "#C41") et les étend aux codes HEX standard à 6 chiffres.

Caractéristiques :

• Détection et acceptation automatiques des formats de couleurs standard HEX et RVB.
• Ombrage des couleurs en blanc ou noir par pourcentage.
• Mélange des couleurs ensemble par pourcentage.
• Conversion entre HEX et RVB , en solo ou pendant le mélange.
• Extension des codes HEX à 3 chiffres aux codes standard à 6 chiffres.
• Gestion des canaux alpha pour le mélange linéaire de couleurs transparentes.

Utilisation :

Pour utiliser pSBC, vous pouvez lui passer trois paramètres :

• p : Le pourcentage d'ombrage ou de mélange (de -1 à 1).
• c0 : La première couleur sous forme de chaîne HEX ou RVB.
• c1 : La deuxième couleur pour le mélange ou l'ombrage. S'il est omis, c est utilisé pour l'ombrage et "c" pour la conversion.

Par exemple, pSBC(0.5, "rgb(20,60,200)", "rgba(200,60,20,0.67423 )") mélangerait les deux couleurs de 50%.

Code :

Le code pour pSBC est fourni ci-dessous :

<code class="js">const pSBC = (p, c0, c1, l = false) => {
  let r, g, b, P, f, t, h, i = parseInt;
  if (typeof p != "number" || p < -1 || p > 1 || typeof c0 != "string" || (c0[0] != "r" && c0[0] != "#") || (c1 && !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length, x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(",");
      n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5) : r.slice(4)), x.g = i(g), x.b = i(b), x.a = a ? parseFloat(a) : -1
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 & 255, x.g = d >> 16 & 255, x.b = d >> 8 & 255, x.a = m((d & 255) / 0.255) / 1000;
      else x.r = d >> 16, x.g = d >> 8 & 255, x.b = d & 255, x.a = -1
    }
    return x
  };
  h = c0.length > 9, h = a ? c1.length > 9 ? true : c1 == "c" ? !h : false : h, f = this.pSBCr(c0), P = p < 0, t = c1 && c1 != "c" ? this.pSBCr(c1) : P ? { r: 0, g: 0, b: 0, a: -1 } : { r: 255, g: 255, b: 255, a: -1 }, p = P ? p * -1 : p, P = 1 - p;
  if (!f || !t) return null;
  if (l) r = m(P * f.r + p * t.r), g = m(P * f.g + p * t.g), b = m(P * f.b + p * t.b);
  else r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5), g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5), b = m((P * f.b ** 2 + p * t.b ** 2) ** 0.5);
  a = f.a, t = t.a, f = a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a * P + t * p : 0;
  if (h) return "rgb" + (f ? "a(" : "(") + r + "," + g + "," + b + (f ? "," + m(a * 1000) / 1000 : "") + ")";
  else return "#" + (4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0)).toString(16).slice(1, f ? undefined : -2)
};

Micro fonctions :

Si la vitesse et la taille sont vos principales priorités, vous pouvez utiliser les fonctions RVB à deux lignes ci-dessous. Ces fonctions sacrifient certaines fonctionnalités, telles que la vérification des erreurs, la conversion HEX et la prise en charge du canal alpha. Ils sont incroyablement rapides et petits :

<code class="js">const RGB_Linear_Blend = (p, c0, c1) => {
  var i = parseInt, r = Math.round, P = 1 - p, [a, b, c, d] = c0.split(","), [e, f, g, h] = c1.split(","), x = d || h, j = x ? "," + (!d ? h : !h ? d : r((parseFloat(d) * P + parseFloat(h) * p) * 1000) / 1000 + ")") : ")";
  return "rgb" + (x ? "a(" : "(") + r(i(a[3] == "a" ? a.slice(5) : a.slice(4)) * P + i(e[3] == "a" ? e.slice(5) : e.slice(4)) * p) + "," + r(i(b) * P + i(f) * p) + "," + r(i(c) * P + i(g) * p) + j;
};

const RGB_Linear_Shade = (p, c) => {
  var i = parseInt, r = Math.round, [a, b, c, d] = c.split(","), P = p < 0, t = P ? 0 : 255 * p, P = P ? 1 + p : 1 - p;
  return "rgb" + (d ? "a(" : "(") + r(i(a[3] == "a" ? a.slice(5) : a.slice(4)) * P + t) + "," + r(i(b) * P + t) + "," + r(i(c) * P + t) + (d ? "," + d : ")");
};

const RGB_Log_Blend = (p, c0, c1) => {
  var i = parseInt, r = Math.round, P = 1 - p, [a, b, c, d] = c0.split(","), [e, f, g, h] = c1.split(","), x = d || h, j = x ? "," + (!d ? h : !h ? d : r((parseFloat(d) * P + parseFloat(h) * p) * 1000) / 1000 + ")") : ")";</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!