Question

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

Goal

这是我到目前为止的代码：

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);
    }
}

这就是它的回报：

Color Picker

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

Answer 1

正如评论中所提到的，你的问题最有可能是由于无意的舍入（因为你在计算中使用整数，这对于像这样的东西不起作用，除非你在进行数学计算之前进行扩展或仔细舍入

总的来说，我建议您使用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

由于我无法评论Mario的帖子，因此对以下主题的回复：

拉伸窗口时，渐变会充满沿垂直方向延伸的多余线条。这可能是无意的，但值得一提。

SFML颜色选择器问题

2 个答案: