Question

我使用CSS3样式（fiddle）生成了一个渐变colobar，现在想要该颜色条中特定位置（通过x和y coords）的颜色值。据我所知，没有直接的方法可以做到这一点。

我看到两个选项：

在JavaScript中实现渐变算法并从头开始计算值。是否有一个确切的定义该算法如何适用于多种颜色？每个浏览器中的渐变看起来是否相同？
使用canvas和createLinearGradient方法绘制渐变并直接访问画布以获取颜色值。

还有其他选择吗？

Answer 1

我选择实现您的第一个解决方案（使用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]
    });
}

如果它们被分成RGB值，您可以使用这个小的JavaScript函数来插值两种颜色。

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

这只是一种快速破解的方法，可能有一种更好的简单方法来提取颜色，并找出指针与哪个渐变段相关的位置。

使用渐变获取colorbar中特定位置的颜色值

1 个答案: