Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Melaraskan Kecerahan/Kegelapan Warna Hex atau RGB secara Program?

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

Linda Hamilton
Lepaskan: 2024-11-06 03:02:02
asal
834 orang telah melayarinya

How to Programmatically Adjust the Lightness/Darkness of a Hex or RGB Color?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan