Comment ajuster par programme la luminosité/l'obscurité d'une couleur hexadécimale ou RVB ?

Comment ajuster par programme la luminosité/l'obscurité d'une couleur hexadécimale ou RVB

Cette fonction, pSBC, offre un moyen polyvalent d'ajuster la clarté/obscurité ou mélangez facilement deux couleurs. Voici un aperçu de son fonctionnement :

Caractéristiques :

• Types d'entrée : Accepte les formats de couleurs Web Hex et RVB.
• Mélange : Peut mélanger deux couleurs avec un pourcentage spécifié.
• Ombrage : Éclaircit ou assombrit une couleur avec une valeur en pourcentage.
• Conversion Hex/RVB : Convertit automatiquement entre les formats Hex et RVB selon les besoins.
• Gestion des canaux Alpha : Prend en charge les canaux alpha pour les couleurs transparentes.
• Vitesse :Optimisé pour des performances rapides, notamment dans les animations.

Utilisation :

Pour utiliser pSBC, passez le paramètres suivants :

• p : Pourcentage d'ajustement ou de fusion de luminosité/obscurité (plage : -1 à 1).
• c0 : Couleur d'entrée au format chaîne (par exemple, "#3F6D2A " ou "rgb(20,60,200)").
• c1 (facultatif) : couleur avec laquelle se fondre (même format que c0).
• l (facultatif) : booléen pour spécifier une fusion linéaire (vrai) ou Log Blending (faux). La valeur par défaut est Log Blending.

Code :

<code class="javascript">const pSBC = (p, c0, c1, l) => {
  // Handle parameter defaults
  l = typeof l !== "undefined" ? l : false;

  // Error checking
  if (
    typeof p !== "number" ||
    p < 0 ||
    p > 1 ||
    typeof c0 !== "string" ||
    (c0[0] !== "r" && c0[0] !== "#") ||
    (c1 && !a)
  )
    return null;

  // Determine color format and extract channel values
  let r, g, b, P, f, t, h, i = parseInt, m = Math.round, a = typeof c1 == "string";
  if (typeof p !== "number" || p < 0 || 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)
};</code>

Exemples :

Éclaircissement/ Assombrissement :

• Éclaircir #3F6D2A de 40 % : pSBC(0,4, "#3F6D2A") → #679D47
• Assombrir #F3A de 40 % : pSBC(-0,4 , "#F3A") → #c62884

Mélange :

• Mélanger #2060200 et #2060200 avec 50 % de chevauchement : pSBC (-0,5 , "#2060200", "#2060200") → #143014
• Mélanger #2060200 et #2006020 avec un chevauchement de 70 % : pSBC(0.7, "#2060200", "#2006020") → #164C0F

Conversion Hex/RVB :

• Convertir #3F6D2A en RVB : pSBC(0, "#3F6D2A", "c") → rgba(63 , 109, 42, 1)

Remarque : Pour de meilleures performances, utilisez les micro-fonctions fournies si la vérification des erreurs et d'autres fonctionnalités ne sont pas requises. Ils sont adaptés à des opérations spécifiques et offrent une vitesse et une efficacité de taille maximales.

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!