7

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

我看到两个选项：

  1. 在 JavaScript 中实现梯度算法并从头计算值。是否有一个确切的定义该算法如何适用于多种颜色？每个浏览器中的渐变看起来都一样吗？

  2. 使用canvasandcreateLinearGradient方法绘制渐变，直接访问画布获取颜色值。

还有其他选择吗？

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 函数来插入两种颜色（如果它们被分离成它们的 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;

});

js小提琴。

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

于 2013-03-27T20:42:04.237 回答