Bagaimanakah Fungsi pSBC Berfungsi untuk Melorek, Mengadun dan Penukaran Warna?

Fungsi ini, pSBC, mengambil warna web HEX atau RGB dan menjalankan operasi padanya, seperti lorekan, pengadunan atau penukaran antara format. Begini cara ia berfungsi:

Pelorek: pSBC boleh mencerahkan atau menggelapkan warna mengikut peratusan yang ditentukan. Ia mencapai ini tanpa menukar kepada HSL, tidak seperti fungsi berasaskan HSL yang lebih besar dan lebih perlahan. Oleh itu, keputusan pSBC mungkin berbeza daripada fungsi HSL.

Penggabungjalinan: pSBC boleh menggabungkan dua warna bersama-sama menggunakan pengadunan linear atau logaritma. Dengan menentukan peratusan adunan, ia boleh mencipta peralihan yang lancar antara dua warna. Saluran alfa disokong, membolehkan pengadunan telus.

Penukaran: pSBC secara automatik menukar HEX kepada RGB atau RGB kepada HEX apabila menggabungkan warna atau melakukan lorekan. Ia juga mengendalikan kod HEX 3 digit (cth., "#C41") dan mengembangkannya kepada kod HEX 6 digit standard.

Ciri:

• Pengesanan automatik dan penerimaan format warna HEX dan RGB standard.
• Melorek warna kepada putih atau hitam mengikut peratusan.
• Menggabungkan warna mengikut peratusan.
• Penukaran antara HEX dan RGB , sama ada secara solo atau semasa pengadunan.
• Peluasan kod HEX 3 digit kepada kod 6 digit standard.
• Pengendalian saluran alfa untuk pengadunan linear warna lutsinar.

Penggunaan:

Untuk menggunakan pSBC, anda boleh lulus tiga parameter:

• p: Peratusan lorekan atau adunan (dari -1 hingga 1).
• c0: Warna pertama sebagai rentetan HEX atau RGB.
• c1: Warna kedua untuk pengadunan atau lorekan. Jika ditinggalkan, c digunakan untuk teduhan dan "c" untuk penukaran.

Contohnya, pSBC(0.5, "rgb(20,60,200)", "rgba(200,60,20,0.67423 )") akan menggabungkan dua warna sebanyak 50%.

Kod:

Kod untuk pSBC disediakan di bawah:

<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 || 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)
};

Fungsi Mikro:

Jika kelajuan dan saiz adalah keutamaan anda, anda boleh menggunakan fungsi RGB dua lapis di bawah. Fungsi ini mengorbankan beberapa ciri, seperti semakan ralat, penukaran HEX dan sokongan saluran alfa. Mereka sangat pantas dan kecil:

<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 < 0, t = P ? 0 : 255 * p, P = P ? 1 + p : 1 - p;
  return "rgb" + (d ? "a(" : "(") + r(i(a[3] == "a" ? a.slice(5) : a.slice(4)) * P + t) + "," + r(i(b) * P + t) + "," + r(i(c) * P + t) + (d ? "," + d : ")");
};

const RGB_Log_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 + ")") : ")";</code>

Atas ialah kandungan terperinci Bagaimanakah Fungsi pSBC Berfungsi untuk Melorek, Mengadun dan Penukaran Warna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!