Hex 또는 RGB 색상의 밝기/어두움을 프로그래밍 방식으로 조정하는 방법은 무엇입니까?

Hex 또는 RGB 색상의 밝기/어둡기를 프로그래밍 방식으로 조정하는 방법

이 기능인 pSBC는 색상을 조정하는 다양한 방법을 제공합니다. 밝기/어두움을 조절하거나 두 가지 색상을 쉽게 혼합할 수 있습니다. 작동 방식은 다음과 같습니다.

기능:

• 입력 유형: Hex 및 RGB 웹 색상 형식을 모두 허용합니다.
• 혼합: 두 가지 색상을 지정된 백분율로 혼합할 수 있습니다.
• 음영: 백분율 값으로 색상을 밝게 하거나 어둡게 합니다.
• Hex/RGB 변환: 필요에 따라 Hex와 RGB 형식 간에 자동으로 변환합니다.
• 알파 채널 처리: 투명한 색상을 위한 알파 채널을 지원합니다.
• 속도: 특히 애니메이션에서 빠른 성능에 최적화되었습니다.

사용:

pSBC를 사용하려면 다음 매개변수:

• p: 밝기/어두움 조정 또는 혼합 비율(범위: -1~1).
• c0: 문자열 형식의 입력 색상(예: "#3F6D2A) " 또는 "rgb(20,60,200)").
• c1(선택 사항): 혼합할 색상(c0과 동일한 형식).
• l(선택 사항): 선형 혼합을 지정하는 부울 (true) 또는 로그 블렌딩 (false)입니다. 기본값은 로그 혼합입니다.

코드:

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

예:

라이트닝/ 어둡게 하기:

• #3F6D2A를 40% 어둡게: pSBC(0.4, "#3F6D2A") → #679D47
• #F3A를 40% 어둡게: pSBC(-0.4 , "#F3A") → #c62884

혼합:

• #2060200 및 #2060200을 50% 중첩하여 혼합: pSBC(-0.5 , "#2060200", "#2060200") → #143014
• #2060200과 #2006020을 70% 중첩하여 혼합: pSBC(0.7, "#2060200", "#2006020") → #164C0F

Hex/RGB 변환:

• #3F6D2A를 RGB로 변환: pSBC(0, "#3F6D2A", "c") → rgba(63 , 109, 42, 1)

참고: 오류 검사 및 기타 기능이 필요하지 않은 경우 최상의 성능을 위해 제공된 마이크로 함수를 사용하세요. 특정 작업에 맞게 맞춤화되었으며 최대 속도와 크기 효율성을 제공합니다.

위 내용은 Hex 또는 RGB 색상의 밝기/어두움을 프로그래밍 방식으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!