使用渐变获取颜色条中特定位置的颜色值 [英] Get color value of specific position in colorbar with gradient

问题描述

我使用CSS3样式生成渐变colobar（小提示），现在需要特定位置的颜色值（由x和y坐标）。据我所知，没有直接的方法这样做。

I generated a gradient colobar with CSS3 styles (fiddle) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that.

我看到两个选项：

1. 在JavaScript中实现渐变算法，并从头开始计算值。是否有一个确切的定义如何该算法为多种颜色工作？

1. Implement the gradient algorithm in JavaScript and calculate the value from scratch. Is there an exact definition how that algorithm works for multiple colors? Does the gradient look the same in every browser?

使用画布和 createLinearGradient 方法来绘制渐变并直接访问画布以获取颜色值。

Use a canvas and createLinearGradient method to draw the gradient and access the canvas directly to get the color value.

任何其他选项？

推荐答案

我选择实现你的第一个解决方案这意味着您不需要依赖对 canvas 元素的支持，这可能是重要的，这取决于您的浏览器支持。

I chose to implement your first solution (figure out the gradient with JavaScript). It means you don't need to rely on support for the canvas element, which may be important depending on your browser support.

使用画布方法也会很酷，并且更容易。您可以从CSS渲染颜色停止点，然后使用 getImageData（）来确定指针的颜色。

Using the canvas methods would also be cool, and easier. You could render the color stops from the CSS, and then use getImageData() to figure out which color the pointer was over.

您可以使用正则表达式提取CSS颜色，并将任何人类图标映射为RGB ...

You can extract the CSS colours with a regex, and map any human ones to RGB with...

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值。

You can use this small JavaScript function to interpolate two colours if they are separated into their RGB values.

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

您可以结合使用以获取一些可以让您执行此操作的代码...

You can combine that to get some code that will let you do this...

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 。

这只是一个快速黑客的方法来提出这一点，可能是一个更好的傻瓜提取颜色的方法，指针与哪个渐变线段相关。

This is just a quick hack-ish way to come up with this, there is probably a better foolproof method of extracting the colors, and for figuring out where the pointer is in relation to which gradient segment.

这篇关于使用渐变获取颜色条中特定位置的颜色值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！