使用 SFML 绘制东西 [关闭]

Question

我正在尝试为一个 uni 项目创建一个涂鸦克隆。

我的线条基本上是很多点。如果我画得太快，换行就会出现单点。 此外，我不知道如何仅在按下鼠标按钮时画线。 我试图将mouseMoved 放入一个while 循环中，直到mouseButton 被释放，但这似乎不起作用。我最终陷入了无限循环。

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

    while (window.isOpen())
    {

        while (window.pollEvent(event))
        {

            int mouseButtonX = event.mouseButton.x;
            int mouseButtonY = event.mouseButton.y;

            int mouseMoveX = event.mouseMove.x;
            int mouseMoveY = event.mouseMove.y;

            setBrushSize(5);

            brush.setRadius(brushSize);
            brush.setPosition(mouseMoveX - brushSize, mouseMoveY - brushSize);
            brush.setFillColor(sf::Color::Transparent);
            brush.setOutlineColor(sf::Color::Green);
            brush.setOutlineThickness(2);

            switch (event.type) {
            case (sf::Event::Closed):
                window.close();
                break;

            case (sf::Event::KeyPressed):
                if (event.key.control && event.key.code == sf::Keyboard::X) {
                    cout << "closing";

                    window.close();
                }

                if (event.key.code == sf::Keyboard::R) {
                    cout << "printed";
                    brushColor = setBrushColor(255, 0, 0);
                }
                if (event.key.code == sf::Keyboard::G) {
                    brushColor = setBrushColor(0, 255, 0);
                }
                if (event.key.code == sf::Keyboard::B) {
                    brushColor = setBrushColor(0, 0, 255);
                }
                if (event.key.code == sf::Keyboard::C) {
                    for (int i = 0; i < points.size(); i++) {
                        points.clear();
                    }
                    it = 0;
                }
                break;

            case(sf::Event::MouseButtonPressed):
                points.push_back(point);
                points[it].setRadius(brushSize);
                points[it].setFillColor(brushColor);
                points[it].setPosition(mouseButtonX - brushSize, mouseButtonY - brushSize);
                it++;
                cout << "drawPoint: Pressed X = " << mouseButtonX << " Y = " << mouseButtonY << endl;

                break;

            case(sf::Event::MouseMoved):
                points.push_back(point);
                points[it].setRadius(brushSize);
                points[it].setFillColor(brushColor);
                points[it].setPosition(mouseMoveX - brushSize, mouseMoveY - brushSize);
                it++;
                cout << "drawPoint: Moved X = " << mouseMoveX << " Y = " << mouseMoveY << endl;
                break;
            }
        }


        window.clear(sf::Color(255, 247, 204));
        window.draw(SkechyT);
        window.draw(close);
        window.draw(brush);
        window.draw(color);
        window.draw(clear);


        for (int i = 0; i < points.size(); i++) {
            window.draw(points[i]);
        }

        //window.draw(point);

        window.display();
    }
}


int getBrushSize() {
    return brushSize;
}

void setBrushSize(int num) {
    brushSize = num;

}

sf::Color setBrushColor(int r, int g, int b) {
    return sf::Color(r, g, b);
}

~Visualizer();

};

Answer 1

虽然您可以即时修改sf::VertexArray（基本上是构建矢量绘图应用程序），但您也可以将sf::RenderTexture 用作实际的绘图画布。

考虑到您尝试绘制很多小点，我假设您的目标是后者。这里重要的是，您不必在绘图调用之间清除渲染纹理，因此可以保留之前绘制的任何内容。

结合最初的目标——绘画——这变得非常容易。

您所要做的就是绘制更改（例如移动光标时），完成渲染纹理（通过调用display()），然后使用任何可绘制对象呈现它（例如sf::Sprite。

我很快就草草写下了下面的例子，它应该很好地展示了这个概念（除了实际的主循环之外，你不会遇到无限循环）：

#include <SFML/Graphics.hpp>
#include <vector>

int main(int argc, char **argv) {
    sf::RenderWindow window(sf::VideoMode(800, 600), L"SFML Drawing – C to clear, PageUp/PageDown to pick colors", sf::Style::Default);
    // Set a specific frame rate, since we don't want to
    // worry about vsync or the time between drawing iterations
    window.setVerticalSyncEnabled(false);
    window.setFramerateLimit(100);

    // First we'll use a canvas to basically store our image
    sf::RenderTexture canvas;
    canvas.create(800, 600);
    canvas.clear(sf::Color::White);

    // Next we'll need a sprite as a helper to draw our canvas
    sf::Sprite sprite;
    sprite.setTexture(canvas.getTexture(), true);

    // Define some colors to use
    // These are all with very low alpha so we
    // can (over-)draw based on how fast we move the cursor
    const std::vector<sf::Color> colors = {
        sf::Color(255, 0, 0, 8),
        sf::Color(255, 255, 0, 8),
        sf::Color(0, 255, 0, 8),
        sf::Color(0, 255, 255, 8),
        sf::Color(0, 0, 255, 8),
        sf::Color(255, 0, 255, 8)
    };

    // We'll need something to actually draw
    // For simplicity, I'm just drawing a circle shape
    // but you could also draw a line, rectangle, or something more complex
    const float brush_size = 25;
    sf::CircleShape brush(brush_size, 24);
    brush.setOrigin(brush_size, brush_size); // Center on the circle's center

    sf::Vector2f lastPos;
    bool isDrawing = false;
    unsigned int color = 0;

    // Apply some default color
    brush.setFillColor(colors[color]);

    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            switch (event.type) {
            case sf::Event::Closed:
                window.close();
                break;
            case sf::Event::KeyPressed:
                switch (event.key.code) {
                    case sf::Keyboard::C:
                        // Clear our canvas
                        canvas.clear(sf::Color::White);
                        canvas.display();
                        break;
                    case sf::Keyboard::PageUp:
                        // Get next color
                        color = (color + 1) % colors.size();
                        // Apply it
                        brush.setFillColor(colors[color]);
                        break;
                    case sf::Keyboard::PageDown:
                        // Get previous color
                        color = (color - 1) % colors.size();
                        // Apply it
                        brush.setFillColor(colors[color]);
                        break;
                }
                break;
            case sf::Event::Resized:
                {
                    // Window got resized, update the view to the new size
                    sf::View view(window.getView());
                    const sf::Vector2f size(window.getSize().x, window.getSize().y);
                    view.setSize(size); // Set the size
                    view.setCenter(size / 2.f); // Set the center, moving our drawing to the top left
                    window.setView(view); // Apply the view
                    break;
                }
            case sf::Event::MouseButtonPressed:
                // Only care for the left button
                if (event.mouseButton.button == sf::Mouse::Left) {
                    isDrawing = true;
                    // Store the cursor position relative to the canvas
                    lastPos = window.mapPixelToCoords({event.mouseButton.x, event.mouseButton.y});

                    // Now let's draw our brush once, so we can
                    // draw dots without actually draging the mouse
                    brush.setPosition(lastPos);

                    // Draw our "brush"
                    canvas.draw(brush);

                    // Finalize the texture
                    canvas.display();
                }
                break;
            case sf::Event::MouseButtonReleased:
                // Only care for the left button
                if (event.mouseButton.button == sf::Mouse::Left)
                    isDrawing = false;
                break;
            case sf::Event::MouseMoved:
                if (isDrawing)
                {
                    // Calculate the cursor position relative to the canvas
                    const sf::Vector2f newPos(window.mapPixelToCoords(sf::Vector2i(event.mouseMove.x, event.mouseMove.y)));

                    // I'm only using the new position here
                    // but you could also use `lastPos` to draw a
                    // line or rectangle instead
                    brush.setPosition(newPos);

                    // Draw our "brush"
                    canvas.draw(brush);

                    // Finalize the texture
                    canvas.display();
                    break;
                }
            }
        }

        // Clear the window
        window.clear(sf::Color(64, 64, 64));

        // Draw our canvas
        window.draw(sprite);

        // Show the window
        window.display();
    }

    return 0;
}

运行后，您可以使用鼠标左键开始绘图。 C 将清除画布，Page Up 和 Page Down 允许您选择不同的颜色：

编辑： 顺便提一下，在上面的例子中，你可以只画一个sf::VertexArray 与sf::Lines 和两个顶点：lastPos 和@ 987654331@。这样，您将始终绘制一条连续的线。 （但您显然必须在完成后使用 newPos 的值保存/更新 lastPos。）