パーセンテージ値に基づいて2つの色の間を補間します

スコットテンプルトン

私は現在JSでアニメーションライブラリを開発しており、0から1までの進行値に基づいて2つの値の間の色を計算する必要があります。

たとえば、関数は次のようになります。これにより、HEX形式で2色が入力されます。

  • colourA =初期色
  • colourB =最終色
  • 進捗状況= 0.5(50%)

const interpolateColour = (colourA, colourB, progress) => { return polColour } 

目標は、2つの色の間で0.5の進行または50%の色を返すことです。この効果を実現するには、HSV用にHEXカラーをRGBAに変換する必要がある可能性が高いことはわかっていますが、どちらが最善のアプローチかはわかりません。

編集:私はそれを理解しました...


const is = {
    hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a),
    rgb: a => /^rgb/.test(a),
    hsl: a => /^hsl/.test(a),
    col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)),
}

const convertToRgba = (colour) => {
    return is.hex(colour) ? hexToRgba(colour)
        : is.rgb(colour) ? rbgToRgba(colour)
            : is.hsl(colour) ? hslToRgba(colour)
                : colour
}

const hexToRgba = (colour, alpha = 1) => {
    const [r, g, b] = colour.match(/\w\w/g).map(x => parseInt(x, 16))
    return `rgba(${r},${g},${b},${alpha})`
};

const rbgToRgba = (colour, alpha = 1) => {
    const [r, g, b] = colour.replace(/[^\d,]/g, '').split(',')
    return `rgba(${r},${g},${b},${alpha})`
}

const deconstructRgba = (rgba) => {
    return rgba.replace(/[^\d,]/g, '').split(',').map(x => parseInt(x))
}

const formatRbga = (colour) => {
    return `rgba(${colour.r},${colour.g},${colour.b},${colour.a})`
}

const interpolateColour = (colourA, colourB, progress) => {
    const [r1, g1, b1, a1] = deconstructRgba(convertToRgba(colourA))
    const [r2, g2, b2, a2] = deconstructRgba(convertToRgba(colourB))
    return formatRbga({
        r: Math.round((r1 + r2) * progress),
        g: Math.round((g1 + g2) * progress),
        b: Math.round((b1 + b2) * progress),
        a: Math.round((a1 + a2) * progress)
    })
}

export {
    interpolateColour,
    convertToRgba,
    hexToRgba,
    rbgToRgba,
    deconstructRgba
}
テリーモース

R、G、およびB値の単純な補間で十分です。

// extract numeric r, g, b values from `rgb(nn, nn, nn)` string
function getRgb(color) {
  let [r, g, b] = color.replace('rgb(', '')
    .replace(')', '')
    .split(',')
    .map(str => Number(str));;
  return {
    r,
    g,
    b
  }
}

function colorInterpolate(colorA, colorB, intval) {
  const rgbA = getRgb(colorA),
    rgbB = getRgb(colorB);
  const colorVal = (prop) =>
    Math.round(rgbA[prop] * (1 - intval) + rgbB[prop] * intval);
  return {
    r: colorVal('r'),
    g: colorVal('g'),
    b: colorVal('b'),
  }
}


function doit(progression) {
  const div1 = document.getElementById('color1');
  const color1 = div1.style.backgroundColor;
  const div2 = document.getElementById('color2');
  const color2 = div2.style.backgroundColor;

  const rgbNew = colorInterpolate(
    color1,
    color2, progression
  );

  const divResult = document.getElementById('result');
  divResult.style.backgroundColor =
    `rgb( ${rgbNew.r}, ${rgbNew.g}, ${rgbNew.b})`;
}

document.querySelector('button').onclick = () => {
  const intval = Number(document.querySelector('input').value);
  doit(intval);
};
#color1,
#color2,
#result {
  width: 200px;
  height: 40px;
  margin: 12px;
  padding: 0.2rem 0.5rem;
}
<h4>Interpolate Between Two Colors</h4>
<label for="number">Interpolate by:</label>
<input id="number" type="number" value="0.5" min="0" max="1" step="0.05" />
<button>Interpolate</button>

<div style="display: flex">
  <div id="color1" style="background-color: #922B21">color1</div>
  <div id="result" style="background-color: #e0e0e0">interpolated</div>
  <div id="color2" style="background-color: #85C1E9">color2</div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

パーセンテージに基づいて2つの座標間の点を計算します(球形)

分類Dev

パーセンテージに基づいて2つの座標間の点を計算します(球形)

分類Dev

パーセンテージに基づいて、ある速度から別の速度に線形補間します

分類Dev

パーセンテージに基づく2色間のandroid色?

分類Dev

歩行速度に基づいて2つのGPS位置間を補間します

分類Dev

歩行速度に基づいて2つのGPS位置間を補間します

分類Dev

PHPの数とパーセンテージに基づいて候補者を選択します

分類Dev

1日の合計のさまざまな値に基づいて、生産パーセンテージ(時間単位)を平均しますか?

分類Dev

時間の粒度に基づいて2つのデータフレーム間で値を転送します

分類Dev

データフレーム内の2つの連続する日付の統計間の差異のパーセンテージを計算し、条件に基づいて結果を出力します

分類Dev

2つのパンダDataFrame間の条件に基づいて、新しい列に値を割り当てます

分類Dev

パンダは、ローリング期間に基づいて値の再現をテストします

分類Dev

パンダは、ローリング期間に基づいて値の再現をテストします

分類Dev

パンダの3番目の列に基づいて2つの列の間の値を保持します

分類Dev

TSQL - 2 番目のテーブルの 2 つの int 間の値に基づいて更新します。

分類Dev

パンダは、あるテーブルの1つの列が別のテーブルの2つの列の間にあることに基づいて、2つのデータフレームをマージします

分類Dev

パンダの2つの列間の一致に基づいて値を検索します

分類Dev

2番目の列に基づいてパーセンテージシーケンスを作成します

分類Dev

パンダ-2つのセルの類似した内容に基づいて行をマージします

分類Dev

MySQL:特定の値に基づいてパーセンテージ構成を計算します

分類Dev

PowerBI-上位Nの選択に基づいてパーセンテージ測定値を計算します

分類Dev

一意の異なる時間間隔に基づいて2つのデータセットをマージし、一致しないすべての値(R)を含むデータセットを作成します

分類Dev

CASEに基づいて、3つのテーブル間のLEFTJOINから条件付きで値を返します

分類Dev

多数のxyポイントのセットに基づいて2D配列から補間値を抽出します

分類Dev

列値のペア間の最も近い一致に基づいて2つのデータフレームをマージします

分類Dev

入力からのパーセンテージ値に基づいてバブルに色を割り当てます

分類Dev

2つの値の間のパーセンテージを計算します(合計の場合)

分類Dev

パワークエリは、2つの日付間のトランザクション日付に基づいて2つのテーブルをマージします

分類Dev

同じテーブルの2つの列間で複数の値を比較することに基づいてデータを選択します

Related 関連記事

  1. 1

    パーセンテージに基づいて2つの座標間の点を計算します(球形)

  2. 2

    パーセンテージに基づいて2つの座標間の点を計算します(球形)

  3. 3

    パーセンテージに基づいて、ある速度から別の速度に線形補間します

  4. 4

    パーセンテージに基づく2色間のandroid色?

  5. 5

    歩行速度に基づいて2つのGPS位置間を補間します

  6. 6

    歩行速度に基づいて2つのGPS位置間を補間します

  7. 7

    PHPの数とパーセンテージに基づいて候補者を選択します

  8. 8

    1日の合計のさまざまな値に基づいて、生産パーセンテージ(時間単位)を平均しますか?

  9. 9

    時間の粒度に基づいて2つのデータフレーム間で値を転送します

  10. 10

    データフレーム内の2つの連続する日付の統計間の差異のパーセンテージを計算し、条件に基づいて結果を出力します

  11. 11

    2つのパンダDataFrame間の条件に基づいて、新しい列に値を割り当てます

  12. 12

    パンダは、ローリング期間に基づいて値の再現をテストします

  13. 13

    パンダは、ローリング期間に基づいて値の再現をテストします

  14. 14

    パンダの3番目の列に基づいて2つの列の間の値を保持します

  15. 15

    TSQL - 2 番目のテーブルの 2 つの int 間の値に基づいて更新します。

  16. 16

    パンダは、あるテーブルの1つの列が別のテーブルの2つの列の間にあることに基づいて、2つのデータフレームをマージします

  17. 17

    パンダの2つの列間の一致に基づいて値を検索します

  18. 18

    2番目の列に基づいてパーセンテージシーケンスを作成します

  19. 19

    パンダ-2つのセルの類似した内容に基づいて行をマージします

  20. 20

    MySQL:特定の値に基づいてパーセンテージ構成を計算します

  21. 21

    PowerBI-上位Nの選択に基づいてパーセンテージ測定値を計算します

  22. 22

    一意の異なる時間間隔に基づいて2つのデータセットをマージし、一致しないすべての値(R)を含むデータセットを作成します

  23. 23

    CASEに基づいて、3つのテーブル間のLEFTJOINから条件付きで値を返します

  24. 24

    多数のxyポイントのセットに基づいて2D配列から補間値を抽出します

  25. 25

    列値のペア間の最も近い一致に基づいて2つのデータフレームをマージします

  26. 26

    入力からのパーセンテージ値に基づいてバブルに色を割り当てます

  27. 27

    2つの値の間のパーセンテージを計算します(合計の場合)

  28. 28

    パワークエリは、2つの日付間のトランザクション日付に基づいて2つのテーブルをマージします

  29. 29

    同じテーブルの2つの列間で複数の値を比較することに基づいてデータを選択します

ホットタグ

アーカイブ