web-dev-qa-db-ja.com

JavaScriptでパーセンテージでグラデーションからカラー値を取得するにはどうすればよいですか？

CSSを使用してグラデーションを適用した固定幅のdivがあります。このグラデーションに基づいて、スライダーベースのカラーピッカーを作成します。

スライダーをドラッグすると、位置のパーセンテージが計算され、この値に基づいて16進数またはRGBカラーコードを取得します。

私のアイデアは、開始/停止位置と色が定義された配列を作成し、スライダーの位置に基づいてこの配列から2つの値を見つけて、どういうわけか色を見つけることでした。これが、先に進むことができない場所です。

デモ： http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});
javascriptjquerycsscolorslinear-gradients
16
passatgt

Less.js関数に基づくこの関数を使用して、この問題を解決できました： http://lesscss.org/functions/#color-operations-mix

function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

グラディエント配列から2つの最も近いカラーコードと、スライダーハンドルが配置されている比率（スライダーの幅を使用して簡単に計算できます）を渡すだけです。これがライブの例です：

http://jsfiddle.net/vksn3yLL/

40
passatgt

トピックから外れているかもしれませんが、jqueryで色とパーセンテージの関係を求めているため、ここに来る人には役立つかもしれません.css()

この例では、パーセンテージの数値を赤から緑に表示します0または100に最も近い：

$('#Elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

以下のデモをご覧ください：

$('button').click( e => {
  const percent = Math.floor(Math.random()*100);
  const newElm = $(`<b>${percent}</b><br>`)
  .css({color: `rgb(${(100 - percent) *2.56},${percent *2.56},0)`})
  $('body').append(newElm);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click to make new percentage</button><br>
1
538ROMEO