SFML 学习 · Day 1

今日目标

1. 在 Ubuntu 下编译运行第一个 SFML 程序
2. 理解窗口、主循环、事件处理
3. 画出坐标系（为后续函数图像打基础）

Day1预览

1. 第一个程序：创建窗口 + 处理关闭事件

新建文件：day1_window.cpp

#include <SFML/Graphics.hpp>

int main()
{
    // 创建窗口：宽度 800，高度 600，标题 SFML Day1
    sf::RenderWindow window(sf::VideoMode(800, 600), "SFML Day1 - 窗口与坐标系");

    // 主循环
    while (window.isOpen())
    {
        // 事件处理
        sf::Event event;
        while (window.pollEvent(event))
        {
            // 点右上角关闭 → 退出
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // 清空屏幕（深灰色）
        window.clear(sf::Color(30, 30, 40));

        // 在这里画图 ↓

        // 在这里画图 ↑

        // 把画面显示出来
        window.display();
    }

    return 0;
}

编译运行

g++ day1_window.cpp -o day1 -lsfml-graphics -lsfml-window -lsfml-system
./day1

2. 今日核心知识点

• SFML 坐标：原点 (0,0) 在左上角
• window.clear()：擦除上一帧
• window.display()：把画好的内容显示到屏幕
• 所有绘图必须在 clear() 和 display() 之间

3. 升级：画出 X、Y 坐标轴（最实用）

把中间代码替换成这样，就能画出数学坐标系：

// 坐标轴颜色：浅蓝色
sf::Color axisColor(100, 200, 255);

// X 轴：水平居中
sf::Vertex xAxis[] = {
    sf::Vertex(sf::Vector2f(0, 300), axisColor),
    sf::Vertex(sf::Vector2f(800, 300), axisColor)
};

// Y 轴：垂直居中
sf::Vertex yAxis[] = {
    sf::Vertex(sf::Vector2f(400, 0), axisColor),
    sf::Vertex(sf::Vector2f(400, 600), axisColor)
};

window.draw(xAxis, 2, sf::Lines);
window.draw(yAxis, 2, sf::Lines);

完整代码我可以直接给你一份可复制版，你要吗？

今日任务

1. 编译运行成功，看到窗口 + 坐标轴
2. 尝试修改：

• 窗口大小
• 背景颜色
• 坐标轴颜色

完成后回复：Day1 完成
我就带你进入 Day2：画函数图像（sin、抛物线、直线）