pSBC 기능은 음영 처리, 혼합 및 색상 변환에 어떻게 작동합니까?

pSBC라는 이 기능은 HEX 또는 RGB 웹 색상을 가져와서 음영 처리, 혼합 또는 형식 간 변환과 같은 작업을 수행합니다. 작동 방식은 다음과 같습니다.

음영: pSBC는 지정된 비율만큼 색상을 밝게 또는 어둡게 할 수 있습니다. 더 크고 느린 HSL 기반 함수와 달리 HSL로 변환하지 않고 이를 수행합니다. 따라서 pSBC의 결과는 HSL 함수의 결과와 다를 수 있습니다.

혼합: pSBC는 선형 또는 로그 혼합을 사용하여 두 가지 색상을 함께 혼합할 수 있습니다. 혼합 비율을 지정하면 두 색상 사이의 부드러운 전환을 만들 수 있습니다. 알파 채널이 지원되므로 투명한 블렌딩이 가능합니다.

변환: pSBC는 색상을 블렌딩하거나 셰이딩을 수행할 때 자동으로 HEX를 RGB로, RGB를 HEX로 변환합니다. 또한 3자리 HEX 코드(예: "#C41")를 처리하고 이를 표준 6자리 HEX 코드로 확장합니다.

특징:

• 표준 HEX 및 RGB 색상 형식을 자동으로 감지하고 수용합니다.
• 백분율로 색상을 흰색 또는 검정색으로 음영 처리합니다.
• 백분율로 색상을 혼합합니다.
• HEX와 RGB 간 변환 , 단독으로 또는 블렌딩 중.
• 3자리 HEX 코드를 표준 6자리 코드로 확장
• 투명 색상의 선형 블렌딩을 위한 알파 채널 처리

사용법:

pSBC를 사용하려면 세 가지 매개변수를 전달할 수 있습니다.

• p: 음영 또는 혼합 비율(-1~) 1).
• c0: HEX 또는 RGB 문자열인 첫 번째 색상.
• c1: 블렌딩 또는 음영 처리를 위한 두 번째 색상입니다. 생략하면 c는 음영 처리에 사용되고 "c"는 변환에 사용됩니다.

예: pSBC(0.5, "rgb(20,60,200)", "rgba(200,60,20,0.67423) )")는 두 색상을 50% 혼합합니다.

코드:

pSBC에 대한 코드는 다음과 같습니다.

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

마이크로 기능:

속도와 크기가 최우선이라면 아래의 2선 RGB 기능을 사용할 수 있습니다. 이러한 함수는 오류 검사, HEX 변환, 알파 채널 지원과 같은 일부 기능을 희생합니다. 믿을 수 없을 만큼 빠르고 작습니다.

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

위 내용은 pSBC 기능은 음영 처리, 혼합 및 색상 변환에 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!