SFML 颜色选择器问题

Question

我正在为我的图像生成程序开发一个颜色选择器，我正在尝试制作一个这样的颜色选择器：

这是我目前的代码：

RenderWindow colorPicker(VideoMode(255, 255), "Color Picker");
vector<RectangleShape> pixels(255*255);

int j, red, gb = 0;
for (int i = 0; i < pixels.size(); i++) {
    pixels[i] = RectangleShape(Vector2f(1, 1));
    if (i != 0) {
        j = i / 255;
        red = 255 - j;
        gb = i - (255 * j) - j;

        if (gb > red) { gb -= j; } else if (gb < 0) { gb = 0; }

        pixels[i].setFillColor(Color(red, gb, gb));
        pixels[i].setPosition(i - (255 * j), j);
    }
    else {
        pixels[i].setFillColor(Color::Red);
        pixels[i].setPosition(0, 0);
    }
}

这就是它返回的内容：

我感到困惑的部分是为什么我要让那条线穿过中心？在大多数情况下，所有值似乎都是正确的，但是穿过中心的线对我来说毫无意义。

Answer 1

正如 cmets 中所述，您的问题很可能与无意的舍入有关（因为您在计算中使用了整数，除非您在进行数学运算或仔细舍入之前缩放所有内容，否则这不会适用于这样的事情.

总的来说，我建议您使用sf::VertexArray 或着色器来实际渲染和显示您的颜色，因为直接修改纹理非常昂贵（因为您每次都必须发送整个纹理）。

这是我想出的一个使用sf::VertexArray 进行显示的简单示例，因为整体实现与您目前所做的非常相似。同样重要的是要知道您正在尝试做的实际上是基于HSV color model 实现颜色选择器。虽然您当前的实现适用于红色，但对于其他颜色可能会很棘手。

“纹理”内的 x 和 y 坐标基本上代表颜色的饱和度和值，而在外部选择色调（在您的情况下锁定为 0°/红色）。

我的示例实现基于German Wikipedia article for HSV，它与英文版本有点不同（因为有多种方法可以到达那里）。总的来说，我发现它更易于阅读/实施。

#include <SFML/Graphics.hpp>

void modulate(sf::VertexArray &points, double hue) {
    // First, Let's "sanitize" inputs a bit.
    // Don't accept negative numbers.
    if (hue < 0)
        hue = 0;
    // Lazy overflow by subtracting the integer portion of the number.
    else if (hue > 1)
        hue -= static_cast<int>(hue);

    // Now iterate over all "pixels" and upate their colors.
    for (unsigned int y = 0; y <= 255; ++y) {
        for (unsigned int x = 0; x <= 255; ++x) {
            // "Calculate" our missing HSV components with ranges from 0 to 1.
            const double s = x / 255.; // x is our saturation
            const double v = y / 255.; // y is our value

            // Pick the correct case based on our position on the color wheel.
            const int cs = hue * 6;

            // Calculate some helper values used in our cases below.
            const double f = hue * 6 - cs;
            const double p = v * (1 - s);
            const double q = v * (1 - s * f);
            const double t = v * (1 - s * (1 - f));

            switch (cs) {
                case 0:
                case 6:
                    points[y * 256 + x].color = sf::Color(v * 255, t * 255, p * 255);
                    break;
                case 1:
                    points[y * 256 + x].color = sf::Color(q * 255, v * 255, p * 255);
                    break;
                case 2:
                    points[y * 256 + x].color = sf::Color(p * 255, v * 255, t * 255);
                    break;
                case 3:
                    points[y * 256 + x].color = sf::Color(p * 255, q * 255, v * 255);
                    break;
                case 4:
                    points[y * 256 + x].color = sf::Color(t * 255, p * 255, v * 255);
                    break;
                case 5:
                    points[y * 256 + x].color = sf::Color(v * 255, p * 255, q * 255);
                    break;
            }
        }
    }
}

int main(int argc, char **argv) {
    // Setup a render window
    sf::RenderWindow window(sf::VideoMode(256, 256), "Color Picker");

    // We're using a clock to change the hue dynamically.
    sf::Clock timer;

    // This vertex array is going to be used for drawing.
    // It includes one vertex/point/pixel per color.
    sf::VertexArray colors(sf::Points, 256 * 256);
    for (unsigned int y = 0; y <= 255; ++y) {
        for (unsigned int x = 0; x <= 255; ++x) {
            sf::Vertex &vertex(colors[y * 256 + x]);

            // Note that I "flip" the displayed texture here, by subtracting
            // x/y from 255 rather than just using x/y, but that's really just
            // to get the same orientation that you have.
            vertex.position.x = 255 - x;
            vertex.position.y = 255 - y;
        }
    }

    while (window.isOpen()) {
        sf::Event event;
        // Your typical event loop
        while (window.pollEvent(event)) {
            switch (event.type) {
                case sf::Event::Closed:
                    window.close();
                    break;
            }
        }

        // Update our colors based on the time passed.
        // I want to cycle all hues in 5 seconds, so dividing the timer.
        modulate(colors, timer.getElapsedTime().asSeconds() / 5);

        // Draw and display our colors
        window.clear();
        window.draw(colors);
        window.display();
    }

    return 0;
}

运行此示例时，您将在一个小窗口中显示颜色，每 5 秒循环一次（呈现出其所有损坏的 GIF 美感）：

Answer 2

由于我无法评论马里奥的帖子，这里是对主题的回复：

当窗口被拉伸时，渐变会被垂直方向的额外线条填充。这可能是无意的，但值得一提。