Maison > interface Web > js tutoriel > 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 ?

Linda Hamilton
Libérer: 2024-11-06 03:02:02
original
832 Les gens l'ont consulté

How to Programmatically Adjust the Lightness/Darkness of a Hex or RGB Color?

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal