16 進数または RGB カラーの明るさ/暗さをプログラムで調整するにはどうすればよいですか?

16 進数または RGB カラーの明るさ/暗さをプログラムで調整する方法

この関数 pSBC は、色を調整する多目的な方法を提供します。明るさ/暗さを調整したり、2 つの色を簡単にブレンドしたりできます。仕組みの詳細は次のとおりです:

機能:

• 入力タイプ: 16 進数と RGB の両方の Web カラー形式を受け入れます。
• ブレンド: 指定したパーセンテージで 2 つの色をブレンドできます。
• シェーディング: パーセンテージ値で色を明るくまたは暗くします。
• 16 進/RGB 変換: 必要に応じて 16 進形式と RGB 形式の間で自動的に変換します。
• アルファ チャネル処理: 透明色のアルファ チャネルをサポートします。
• 速度: 特にアニメーションでの高速パフォーマンス向けに最適化されています。

使用法:

pSBC を使用するには、次のパラメータ:

• p: 明暗の調整またはブレンドの割合 (範囲: -1 ～ 1)。
• c0: 文字列形式の入力カラー (例: "#3F6D2A) " または "rgb(20,60,200)")。
• c1 (オプション): ブレンドする色 (c0 と同じ形式)。
• l (オプション): 線形ブレンドを指定するブール値(true) またはログブレンディング (false)。デフォルトは Log Blending です。

コード:

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

例:

Lightening/暗くする:

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

16 進数/RGB 変換:

• #3F6D2A を RGB に変換: pSBC(0, "#3F6D2A", "c") → rgba(63) 、109、42、1)

注: 最高のパフォーマンスを得るには、エラー チェックやその他の機能が必要ない場合は、提供されているマイクロ関数を使用してください。これらは特定の操作に合わせて調整されており、最大の速度とサイズ効率を実現します。

以上が16 進数または RGB カラーの明るさ/暗さをプログラムで調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。