@jk-core/components/src/utils/ts/gradientRatio.ts

components for jk

/**
 * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
 *
 * @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
 * @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
 * @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
 * @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
 * @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
 * @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
 * @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
 */
const gradientRatio = ({
  currPercent,
  startPercent,
  startColor,
  endPercent,
  endColor,
}: {
  currPercent: number;
  startPercent: number;
  startColor: string;
  endPercent: number;
  endColor: string;
}) => {
  if (currPercent < startPercent) return startColor;
  if (currPercent > endPercent) return endColor;

  const start = {
    R: parseInt(startColor.substr(0, 2), 16),
    G: parseInt(startColor.substr(2, 2), 16),
    B: parseInt(startColor.substr(4, 2), 16),
  };
  const end = {
    R: parseInt(endColor.substr(0, 2), 16),
    G: parseInt(endColor.substr(2, 2), 16),
    B: parseInt(endColor.substr(4, 2), 16),
  };
  const R = {
    coefficient: (end.R - start.R) / (endPercent - startPercent),
    intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
    value: '',
  };
  const G = {
    coefficient: (end.G - start.G) / (endPercent - startPercent),
    intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
    value: '',
  };
  const B = {
    coefficient: (end.B - start.B) / (endPercent - startPercent),
    intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
    value: '',
  };

  R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
  G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
  B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');

  return (R.value + G.value + B.value);
};

export default gradientRatio;