对于SDL我也只是一个初学的菜鸟，接下来和大家分享一个

woaidaima2016 · 发表于 2017-12-22 15:24:05

想要查看内容赶紧注册登陆吧!

您需要登录才可以下载或查看，没有帐号？立即注册

x

突然发现csdn好流氓啊，这是我的一张程序运行的截图啊，里面就被它打上了自己的标签。。。
   从上面的图片我们可以看出，这个程序实现的功能是，当你将鼠标放到那个灰白色的按钮上时，按钮要变色（作为一种交互的表现），当你用鼠标按下按钮时，按钮会显现出凹下去的形态，然后在你拖动按钮往左滑动后灯泡点亮，这就是我们程序实现的简单功能。
下面我们先不谈程序，我们先来一起头脑风暴一下，简单想想我们怎么做、需要什么：
其实我们大家都知道，动画就是一帧一帧的图片叠加的效果，我们要实现这个程序，就需要把图片准备好，那么我们来看一下需要哪些图片
1、首先，从灯泡看起，灯要实现亮起来的要求，那么我们就需要至少两张图，一张是灯没亮时的图片，另一张是灯亮了的图片
2、其次，从按钮看，我们需要的图就更多了，首先将底层的off和on这个显示做成一张图，然后上面用于滑动的按钮要单独分离出做出三张效果图，一张是正常状态下的灰白色，一张是鼠标触碰到按钮后按钮变色，最后一张是鼠标按下去后按钮要显现出凹下去的形态
3、最后，准备一张白色的背景图，这个就比较简单了。
这些图我都已经准备好了，如下图：




素材是已经准备好了，那么下面我们进入到程序方面的讨论：
1、首先，我们得给整个画面做一个初始化，也就是哪些东西是程序一运行我们就要展现出来的，我们可以看出，我上面展示的那张图就是初始化的界面图，要做到这我们需要好好了解一下SDL的工作方式。在SDL中，图片是画在渲染器上的，然后在将渲染器“推到“窗口上显示（这些初始化的东西可以在我文章开头提供的链接里了解到的）。
2、其次，我们得管理好鼠标和界面间的交互。在这个程序中，我们要处理的交互还是很多的，鼠标触碰到滑动按钮时按钮需要变色（作为一种交互形式，当然也可以自己设计如何表现），当我们用鼠标点击滑动按钮时，按钮要有凹陷的感觉，当我们鼠标拖动滑动按钮时，按钮要能随鼠标一起移动，当按钮到达边界时灯要亮起来，做到这些就需要我们处理好事件的响应工作。
当然，这些工作我会在代码中用注释的形式进行解释，这样才更利于理解。
首先得声明，要看懂这些代码，一定要了解SDL的简单操作（可以自己查找资料也可以使用我提供的链接）。
对于代码，先声明一句，由于是初学SDL,所以就想到哪写到哪了，没有用类进行处理，多以main函数中比较冗长，如果有机会的话，我后边会做出改进，希望大家见谅。
下面直接上代码：

#include<iostream>
#include<SDL/SDL.h>
#include <string>
using namespace std;
const int SCREEN_WIDTH = 640;
const int SCREEN_HEIGHT = 480;
SDL_Window *window = nullptr;
SDL_Renderer *renderer = nullptr;
//此函数用于加载图像
SDL_Texture* LoadImage(std::string file);
//此函数用于将纹理画到渲染器上
void ApplySurface(int x, int y, SDL_Texture *tex, SDL_Renderer *rend);
//此函数用于显示将要展示的画面，将各个图片画在渲染器上并展示出来
void PresentImage(SDL_Renderer *rend,SDL_Texture *background,SDL_Texture *light,int light_x,int light_y,SDL_Texture *baseButton,
int baseButton_x,int baseButton_y,SDL_Texture *button,int button_x,int button_y);
int main(int argc, char** argv)
{
if (SDL_Init(SDL_INIT_EVERYTHING) == -1){
std::cout << SDL_GetError() << std::endl;
return 1;
}
window = SDL_CreateWindow("LightDemo", SDL_WINDOWPOS_CENTERED,
SDL_WINDOWPOS_CENTERED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN); //创建一个绘制图片的窗口
if (window == nullptr){
std::cout << SDL_GetError() << std::endl;
return 2;
}
renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED
| SDL_RENDERER_PRESENTVSYNC); //创建一个指定到窗口的渲染器
if (renderer == nullptr){
std::cout << SDL_GetError() << std::endl;
return 3;
}
//定义我们程序需要用到的图片并加载它们
SDL_Texture *background = nullptr, *light_off = nullptr,*baseButton=nullptr,*initButton,*onButton,
*downButton,*light_on;
background = LoadImage("bg.bmp");
light_off = LoadImage("light_off.bmp");
light_on=LoadImage("light_on.bmp");
baseButton=LoadImage("base_button.bmp");
initButton=LoadImage("init_button.bmp");
onButton=LoadImage("on_button.bmp");
downButton=LoadImage("down_button.bmp");
//判断图片是否加载成功
if (background == nullptr || light_off == nullptr||light_on==nullptr||initButton==nullptr||
onButton==nullptr||baseButton==nullptr||downButton==nullptr)
return 4;
SDL_RenderClear(renderer); //清空屏幕
//设置背景图片的放置
int bW, bH;
SDL_QueryTexture(background, NULL, NULL, &bW, &bH);
ApplySurface(0, 0, background, renderer);
//设置熄灭的灯的放置位置
int iW, iH;
SDL_QueryTexture(light_off, NULL, NULL, &iW, &iH);
int light_x = SCREEN_WIDTH / 2 - iW / 2;
int light_y = SCREEN_HEIGHT / 3 - iH / 2;
ApplySurface(light_x, light_y, light_off, renderer);
//设置基础开关的位置
int buttonW,buttonH;
SDL_QueryTexture(baseButton,NULL,NULL,&buttonW,&buttonH);
int baseButton_x=SCREEN_WIDTH/2-buttonW/2;
int baseButton_y=SCREEN_WIDTH/3*2-2*buttonH;
ApplySurface(baseButton_x,baseButton_y,baseButton,renderer);
//设置开关滑动按钮的位置
int initButtonW,initButtonH;
SDL_QueryTexture(initButton,NULL,NULL,&initButtonW,&initButtonH);
//滑动按钮右边界的坐标
int moveToRight_x=baseButton_x+0.75*buttonW-initButtonW/2;
int moveToRight_y=baseButton_y+buttonH/2-initButtonH/2;
//滑动按钮左边界的坐标
int moveToLeft_x=baseButton_x+0.25*buttonW-initButtonW/2;
int moveToLeft_y=baseButton_y+buttonH/2-initButtonH/2;
ApplySurface(moveToRight_x,moveToRight_y,initButton,renderer);
SDL_RenderPresent(renderer);
// SDL_Delay(10000);
SDL_Event e;
bool quit=false; //用于标记用户是否想退出程序
int preMouseX,preMouseY;
int mouse_x,mouse_y;
bool mouseDown=false; //此变量用于指示鼠标是否一直按着没有松开
bool moveTo=false; //此变量用于表示滑动按钮可以移动的方向，false代表向左移动，true代表向右移动
int curButton_x=moveToRight_x; //此变量代表滑动按钮X轴方向的坐标
int curButton_y=moveToRight_y;
while(!quit)
{
while(SDL_PollEvent(&e))
{
switch(e.type)
{
//此种情况是退出程序用的，当你点击窗口的红X时就会关闭界面
case SDL_QUIT:
quit=true;
break;
//此处处理的是鼠标按下事件
case SDL_MOUSEBUTTONDOWN:
mouseDown=true;
preMouseX=e.button.x;
preMouseY=e.button.y;
//当鼠标在当前按钮的区域中时，此if语句得到执行
if(preMouseX>=curButton_x&&preMouseX<=curButton_x+initButtonW&&preMouseY>=curButton_y&&preMouseY<=curButton_y+initButtonH)
{
//当按钮位于最左面时，灯亮
if(curButton_x==moveToLeft_x)
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
}
else //当按钮不在最左面时，画灯不亮的图
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
}
}
break;
//鼠标弹起操作
case SDL_MOUSEBUTTONUP:
mouseDown=false; //表示用户鼠标点击已经松开了
break;
//鼠标移动操作
case SDL_MOUSEMOTION:
//记录鼠标移动时的坐标
mouse_x=e.motion.x;
mouse_y=e.motion.y;
if(!mouseDown) //此时处理的是鼠标有可能放到滑动按钮上的情况
{
if(curButton_x==moveToRight_x)
{
//此if语句在鼠标在按钮区域内且点击了按钮时执行，此时会刷新窗口，将按钮换成变色的按钮
if(mouse_x>=moveToRight_x&&mouse_x<=moveToRight_x+initButtonW&&mouse_y>=moveToRight_y&&mouse_y<=moveToRight_y+initButtonH)
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,onButton,
curButton_x,moveToRight_y);
}
else //此时表示鼠标点击在了空白区域，并不对它做出什么反应，将初始化的按钮画在窗口
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,moveToRight_y);
}
}
//此if语句执行的操作和上一个相似
if(curButton_x==moveToLeft_x)
{
if(mouse_x>=moveToLeft_x&&mouse_x<=moveToLeft_x+initButtonW&&mouse_y>=moveToLeft_y&&mouse_y<=moveToLeft_y+initButtonH)
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,onButton,
curButton_x,moveToLeft_y);
}
else
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,moveToLeft_y);
}
}
}
else //此处处理的是鼠标拖动情况
{
if(!moveTo) //当moveTo为false时执行，此时表示滑动按钮向左移动的操作
{
//当鼠标位于滑动按钮区域时
if(mouse_x>=curButton_x&&mouse_x<=curButton_x+initButtonW&&mouse_y>=curButton_y&&mouse_y<=curButton_y+initButtonH)
{
if(mouse_x>=preMouseX) //当鼠标往反方向移动时，不做操作
break;
curButton_x+=mouse_x-preMouseX; //移动后的button的x坐标位置
if(curButton_x<moveToLeft_x) //当鼠标移动后的距离超过了滑动按钮可移动的位置，便不再改变其位置
{
moveTo=true; //滑动按钮已经移动到最左端，将移动设置为可以向右移动
curButton_x=moveToLeft_x; //将滑动按钮的位置设置为边界值
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,curButton_y);
}
else //滑动按钮在鼠标拖动下的实时移动
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
SDL_Delay(80); //使滑动按钮的滑动速度慢些
}
}
}
else //滑动按钮向右移动的操作
{
if(mouse_x>=curButton_x&&mouse_x<=curButton_x+initButtonW&&mouse_y>=curButton_y&&mouse_y<=curButton_y+initButtonH)
{
SDL_RenderClear(renderer);
if(mouse_x<=preMouseX)
break;
curButton_x+=mouse_x-preMouseX; //移动后的button的x坐标位置
if(curButton_x>moveToRight_x) //当鼠标移动后的距离超过了滑动按钮可移动的位置，便不再改变其位置
{
moveTo=false; //滑动按钮已经移动到最右端，将移动设置为可以向左移动
curButton_x=moveToRight_x; //将滑动按钮的位置设置为边界值
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,curButton_y);
}
else //滑动按钮在鼠标拖动下的实时移动
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
SDL_Delay(50); //使滑动按钮的滑动速度慢些
}
}
}
}
break;
default:
break;
}
}
}
//做好善后工作，释放掉资源
SDL_DestroyTexture(background);
SDL_DestroyTexture(light_off);
SDL_DestroyTexture(light_on);
SDL_DestroyTexture(baseButton);
SDL_DestroyTexture(initButton);
SDL_DestroyTexture(onButton);
SDL_DestroyTexture(downButton);
SDL_DestroyRenderer(renderer);
SDL_DestroyWindow(window);
SDL_Quit();
return 0;
}
SDL_Texture* LoadImage(std::string file)
{
SDL_Surface *loadedImage = nullptr;
SDL_Texture *texture = nullptr;
loadedImage = SDL_LoadBMP(file.c_str()); //加载图层
if (loadedImage != nullptr)
{
texture = SDL_CreateTextureFromSurface(renderer, loadedImage); //将图层转化为纹理
SDL_FreeSurface(loadedImage); //释放掉图层
}
else
std::cout << SDL_GetError() << std::endl;
return texture;
}
//此函数用于将纹理画到渲染器上
void ApplySurface(int x, int y, SDL_Texture *tex, SDL_Renderer *rend)
{
SDL_Rect pos;
//x，y是图片左上角的坐标
pos.x = x;
pos.y = y;
SDL_QueryTexture(tex, NULL, NULL, &pos.w, &pos.h);
SDL_RenderCopy(rend, tex, NULL, &pos); //将纹理tex画到渲染器rend
}
void PresentImage(SDL_Renderer *rend,SDL_Texture *background,SDL_Texture *light,int light_x,int light_y,SDL_Texture *baseButton,
int baseButton_x,int baseButton_y,SDL_Texture *button,int button_x,int button_y)
{
SDL_RenderClear(renderer); //清空屏幕
ApplySurface(0, 0, background, renderer);
ApplySurface(light_x, light_y, light, renderer);
ApplySurface(baseButton_x,baseButton_y,baseButton,renderer);
ApplySurface(button_x,button_y,button,renderer);
SDL_RenderPresent(renderer);
}

复制代码

完整程序下载

游客，如果您要查看本帖隐藏内容请回复


	登录后可以保存扩展风格炉石传说

登录后可以保存 扩展风格

对于SDL我也只是一个初学的菜鸟，接下来和大家分享一个

想要查看内容赶紧注册登陆吧!

登录后可以保存扩展风格