Wie funktioniert die pSBC-Funktion für Schattierung, Mischung und Farbkonvertierung?

Diese Funktion, pSBC, nimmt eine HEX- oder RGB-Webfarbe und führt darauf Operationen aus, wie z. B. Schattierung, Mischung oder Konvertierung zwischen Formaten. So funktioniert es:

Schattierung: pSBC kann eine Farbe um einen bestimmten Prozentsatz aufhellen oder abdunkeln. Im Gegensatz zu größeren und langsameren HSL-basierten Funktionen wird dies ohne Konvertierung in HSL erreicht. Die Ergebnisse von pSBC können daher von denen von HSL-Funktionen abweichen.

Mischung: pSBC kann zwei Farben durch lineare oder logarithmische Mischung miteinander vermischen. Durch die Angabe des Mischprozentsatzes kann ein sanfter Übergang zwischen den beiden Farben erzeugt werden. Alphakanäle werden unterstützt und ermöglichen eine transparente Mischung.

Konvertierung: pSBC konvertiert HEX automatisch in RGB oder RGB in HEX, wenn Farben gemischt oder Schattierungen durchgeführt werden. Es verarbeitet auch 3-stellige HEX-Codes (z. B. „#C41“) und erweitert sie zu standardmäßigen 6-stelligen HEX-Codes.

Eigenschaften:

• Automatische Erkennung und Akzeptanz von Standard-HEX- und RGB-Farbformaten.
• Farben prozentual in Weiß oder Schwarz schattieren.
• Farben prozentual zusammenmischen.
• Konvertierung zwischen HEX und RGB , entweder einzeln oder während des Mischens.
• Erweiterung von 3-stelligen HEX-Codes auf standardmäßige 6-stellige Codes.
• Verwaltung von Alphakanälen für lineares Mischen transparenter Farben.

Verwendung:

Um pSBC zu verwenden, können Sie ihm drei Parameter übergeben:

• p: Der Prozentsatz der Schattierung oder Überblendung (von -1 bis 1).
• c0: Die erste Farbe als HEX- oder RGB-String.
• c1: Die zweite Farbe zum Mischen oder Schattieren. Wenn es weggelassen wird, wird c für die Schattierung und „c“ für die Konvertierung verwendet.

Zum Beispiel pSBC(0.5, „rgb(20,60,200)“, „rgba(200,60,20,0.67423 )") würde die beiden Farben um 50 % vermischen.

Code:

Der Code für pSBC ist unten angegeben:

<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)
};

Mikrofunktionen:

Wenn Geschwindigkeit und Größe für Sie oberste Priorität haben, können Sie die folgenden zweizeiligen RGB-Funktionen verwenden. Diese Funktionen opfern einige Funktionen wie Fehlerprüfung, HEX-Konvertierung und Alpha-Kanal-Unterstützung. Sie sind unglaublich schnell und klein:

<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>

Das obige ist der detaillierte Inhalt vonWie funktioniert die pSBC-Funktion für Schattierung, Mischung und Farbkonvertierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!