Wie kann man die Helligkeit/Dunkelheit einer Hex- oder RGB-Farbe programmgesteuert anpassen?

So passen Sie die Helligkeit/Dunkelheit einer Hex- oder RGB-Farbe programmgesteuert an

Diese Funktion, pSBC, bietet eine vielseitige Möglichkeit, die anzupassen Helligkeit/Dunkelheit anpassen oder zwei Farben mühelos mischen. Hier ist eine Aufschlüsselung der Funktionsweise:

Funktionen:

• Eingabetypen:Akzeptiert sowohl Hex- als auch RGB-Webfarbformate.
• Mischung:Kann zwei Farben mit einem bestimmten Prozentsatz miteinander mischen.
• Schattierung:Hellert oder verdunkelt eine Farbe mit einem Prozentwert.
• Hex/RGB-Konvertierung:Konvertiert bei Bedarf automatisch zwischen Hex- und RGB-Formaten.
• Alpha-Kanal-Verarbeitung:Unterstützt Alpha-Kanäle für transparente Farben.
• Geschwindigkeit:Optimiert für schnelle Leistung, insbesondere bei Animationen.

Verwendung:

Um pSBC zu verwenden, übergeben Sie die Folgende Parameter:

• p: Prozentsatz der Helligkeits-/Dunkelheitsanpassung oder -mischung (Bereich: -1 bis 1).
• c0: Eingabefarbe im Zeichenfolgenformat (z. B. „#3F6D2A " oder „rgb(20,60,200)“).
• c1 (optional): Farbe zum Mischen (gleiches Format wie c0).
• l (optional): Boolescher Wert zur Angabe der linearen Mischung (wahr) oder Log Blending (falsch). Standard ist 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>

Beispiele:

Aufhellung/ Verdunkelung:

• #3F6D2A um 40 % aufhellen: pSBC(0,4, "#3F6D2A") → #679D47
• #F3A um 40 % abdunkeln: pSBC(-0,4 , „#F3A“) → #c62884

Mischung:

• Mischung #2060200 und #2060200 mit 50 % Überlappung: pSBC(-0,5 , „#2060200“, „#2060200“) → #143014
• Mischung #2060200 und #2006020 mit 70 % Überlappung: pSBC(0.7, „#2060200“, „#2006020“) → #164C0F

Hex/RGB-Konvertierung:

• #3F6D2A in RGB konvertieren: pSBC(0, "#3F6D2A", "c") → rgba(63 , 109, 42, 1)

Hinweis: Für eine optimale Leistung verwenden Sie die bereitgestellten Mikrofunktionen, wenn Fehlerprüfung und andere Funktionen nicht erforderlich sind. Sie sind auf bestimmte Vorgänge zugeschnitten und bieten maximale Geschwindigkeit und Größeneffizienz.

Das obige ist der detaillierte Inhalt vonWie kann man die Helligkeit/Dunkelheit einer Hex- oder RGB-Farbe programmgesteuert anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!