7

CSS3スタイル（ fiddle）を使用してグラデーションコロバーを生成し、そのカラーバー内の特定の場所（xおよびy座標による）のカラー値が必要になりました。私の知る限り、それを直接行う方法はありません。

2つのオプションがあります。

  1. JavaScriptで勾配アルゴリズムを実装し、値を最初から計算します。そのアルゴリズムが複数の色に対してどのように機能するかについての正確な定義はありますか？グラデーションはすべてのブラウザで同じように見えますか？

  2. canvasandメソッドを使用しcreateLinearGradientてグラデーションを描画し、キャンバスに直接アクセスしてカラー値を取得します。

他のオプションはありますか？

4

1 に答える 1

8

私はあなたの最初のソリューションを実装することを選びました（JavaScriptでグラデーションを理解してください）。これは、要素のサポートに依存する必要がないことを意味します。canvasこれは、ブラウザーのサポートによっては重要になる場合があります。

メソッドを使用canvasすることもクールで簡単です。CSSからカラーストップをレンダリングしてからgetImageData()、ポインタがどの色の上にあるかを把握するために使用できます。

正規表現を使用してCSSの色を抽出し、人間の色をRGBにマッピングすることができます...

var background = window.getComputedStyle(element).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

この小さなJavaScript関数を使用して、2つの色がRGB値に分離されている場合、それらを補間することができます。

var getStepColor = function(colorA, colorB, value) {
    return colorA.map(function(color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

これを組み合わせて、これを実行できるコードを取得できます...

var getStepColor = function (colorA, colorB, value) {
    return colorA.map(function (color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

var gradient = document.querySelector("#gradient");
var preview = document.querySelector("#preview");

var background = window.getComputedStyle(gradient).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    // If colour is *human-readable*, then
    // substitute it for a RGB value.
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

gradient.addEventListener("mousemove", function (event) {

    var x = event.pageX - gradient.offsetTop;
    var y = event.pageY - gradient.offsetLeft;
    var percentage = (x / this.offsetWidth) * 100;

    var i;
    for (i = 0; i < colorStops.length; i++) {
        if (colorStops[i].percentage > percentage) {
            break;
        };
    }

    var lowerIndex = i == 1 ? 0 : i - 1;
    var upperIndex = lowerIndex + 1;
    var value = x / (gradient.offsetWidth / (colorStops.length - 1)) % 1;

    color = getStepColor(colorStops[lowerIndex].color, colorStops[upperIndex].color, value);

    preview.style.backgroundColor = "rgb(" + color.join() + ")";
    preview.textContent = preview.style.backgroundColor;

});

jsFiddle。

これは、これを思い付くための簡単なハックっぽい方法です。おそらく、色を抽出し、ポインタがどのグラデーションセグメントに対してどこにあるかを把握するためのより優れた確実な方法があります。

于 2013-03-27T20:42:04.237 に答える