pSBC 関数はシェーディング、ブレンディング、カラー変換にどのように機能しますか?

この関数 pSBC は、HEX または RGB Web カラーを受け取り、シェーディング、ブレンディング、フォーマット間の変換などの操作を実行します。その仕組みは次のとおりです:

シェーディング: pSBC は、指定されたパーセンテージで色を明るくしたり暗くしたりできます。これは、大規模で低速な HSL ベースの関数とは異なり、HSL に変換することなく実現されます。したがって、pSBC の結果は、HSL 関数の結果とは異なる場合があります。

ブレンド: pSBC は、線形または対数ブレンドを使用して 2 つの色をブレンドできます。ブレンドのパーセンテージを指定することで、2 つの色の間の滑らかな移行を作成できます。アルファ チャネルがサポートされており、透明なブレンドが可能です。

変換: pSBC は、カラーをブレンドしたりシェーディングを実行したりするときに、HEX から RGB、または RGB から HEX に自動的に変換します。また、3 桁の 16 進コード (「#C41」など) も処理し、標準の 6 桁の 16 進コードに拡張します。

機能:

• 標準の HEX および RGB カラー形式の自動検出と受け入れ。
• パーセンテージで色を白または黒にシェーディング。
• パーセンテージでカラーをブレンド。
• HEX と RGB 間の変換単独またはブレンド中のいずれか。
• 3 桁の 16 進コードを標準の 6 桁コードに拡張。
• 透明色の線形ブレンドのためのアルファ チャネルの処理。

使用法:

pSBC を使用するには、次の 3 つのパラメータを渡すことができます:

• p: シェーディングまたはブレンドのパーセンテージ (-1 から1).
• c0: HEX または RGB 文字列としての最初の色。
• c1: ブレンドまたはシェーディング用の 2 番目の色。省略した場合、c はシェーディングに使用され、"c" は変換に使用されます。

例: pSBC(0.5, "rgb(20,60,200)", "rgba(200,60,20,0.67423) )") は 2 つの色を 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 || 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  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 ? 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 >= 0, a = f ? a <p><strong>マイクロ関数:</strong></p>
<p>速度とサイズが最優先の場合は、以下の 2 ライナー RGB 関数を使用できます。これらの関数は、エラー チェック、HEX 変換、アルファ チャネルのサポートなどの一部の機能を犠牲にします。これらは信じられないほど高速で小さいです:</p>
<pre class="brush:php;toolbar:false"><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  {
  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 中国語 Web サイトの他の関連記事を参照してください。