Bagaimana untuk Melaraskan Kecerahan/Kegelapan Warna Hex atau RGB secara Program?

Cara Melaraskan Kecerahan/Kegelapan Warna Hex atau RGB Secara Program

Fungsi ini, pSBC, menyediakan cara yang serba boleh untuk melaraskan cahaya/kegelapan atau campurkan dua warna dengan mudah. Berikut ialah pecahan cara ia berfungsi:

Ciri:

• Jenis Input: Menerima kedua-dua format warna web Hex dan RGB.
• Penukaran Hex/RGB: Menukar antara format Hex dan RGB secara automatik mengikut keperluan.
• Pengendalian Saluran Alpha: Menyokong saluran alfa untuk warna lutsinar.
• Kelajuan: Dioptimumkan untuk prestasi pantas, terutamanya dalam animasi.
• Penggunaan:
• Untuk menggunakan pSBC, masukkan parameter berikut:
p: Peratusan kecerahan/kegelapan pelarasan atau pengadunan (julat: -1 hingga 1).

c0: Warna input dalam format rentetan (cth., "#3F6D2A " atau "rgb(20,60,200)").c1 (pilihan): Warna untuk dicampur dengan (format yang sama seperti c0).

l (pilihan): Boolean untuk menentukan Pengadun Linear (benar) atau Log Blending (salah). Lalai ialah Pengadunan Log.

• Kod:
• Contoh:

Pencerahan/ Gelap:

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

Mencerahkan #3F6D2A sebanyak 40%: pSBC(0.4, "#3F6D2A") → #679D47Gelapkan #F3A sebanyak 40%: pSBC(-0.4. , "#F3A") → #c62884

Penggabungjalinan:

• Campurkan #2060200 dan #2060200 dengan pertindihan 50%: pSBC(-0. , "#2060200", "#2060200") → #143014
• Campurkan #2060200 dan #2006020 dengan pertindihan 70%: pSBC(0.7, "#2060200", "#20060200"), "#20060200"), "#20060200") >

Penukaran Hex/RGB:

• Tukar #3F6D2A kepada RGB: pSBC(0, "#3F6D2A", "c") → rgba(63 , 109, 42, 1)

Nota:

Untuk prestasi terbaik, gunakan fungsi mikro yang disediakan jika semakan ralat dan ciri lain tidak diperlukan. Ia disesuaikan untuk operasi tertentu dan memberikan kelajuan maksimum dan kecekapan saiz.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Kecerahan/Kegelapan Warna Hex atau RGB secara Program?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!