SDL2学习笔记 - 鼠标事件和拖拽

开发环境： MacOS
参考资料：陈云老师的 SDL2 教程

在 SDL2 中实现鼠标事件还是比较简单的，只需要再event_loop(事件循环)里加个switch或者if就可以的实现：

/* 事件循环 */
void event_loop() {
    while (1) {

        ...

        // 鼠标事件
        SDL_Event event;
        while (SDL_PollEvent(&event)) {
            if(event.type == SDL_QUIT) {
                return;
            } 
        }

        ...
    }
}

但如果要实现拖拽事件，我们就需要大刀阔斧的改造一下了。
首先使用面向对象思维抽象化RectShape，在头文件里做一个结构体和几个必须的函数。

// 抽象矩形框
#ifndef MOUSEEVENT_RECTSHAPE_H
#define MOUSEEVENT_RECTSHAPE_H

#include <SDL.h>

typedef struct {
    SDL_FRect dest;
    uint32_t color;
    // _代表内部使用
    // 记录起始点
    SDL_FPoint _dragStartPoint;
    // 记录开始拖动时鼠标的位置 了解鼠标移动的距离
    SDL_FPoint _dragStartMousePoint;
    // 是否被点击(是否启用)
    int _dragEnabled;
} RectShape;

// 创建矩形框
RectShape *RectShape_Create(float x, float y, float w, float h, uint32_t color);

// 绘图
void RectShape_Draw(RectShape *self, SDL_Renderer *renderer);

// 鼠标事件 .. SDL_Event是事件类型
void RectShape_OnMouseEvent(RectShape *self, SDL_Event *event);

// 销毁
void RectShape_Destroy(RectShape *self);

#endif

然后，我们逐一实现它：

首先是创建矩形框，这个比较简单：

...

// 创建矩形框
RectShape *RectShape_Create(float x, float y, float w, float h, uint32_t color) {
    // 分配内存
    RectShape *self = malloc(sizeof(RectShape));
    self->color = color;
    self->dest.x = x;
    self->dest.y = y;
    self->dest.w = w;
    self->dest.h = h;
    // 默认不启用拖动属性
    self->_dragEnabled = 0;
    return self;
}

...

_dragEnabled是确定是否启用拖拽属性的，确保鼠标没按下时不启动属性（直接启用不成自动寻路了）

然后基本的销毁和绘图

...

// 绘制
void RectShape_Draw(RectShape *self, SDL_Renderer *renderer) {
    // 提取颜色通道
    // 0xffff0000 ARGB
    SDL_SetRenderDrawColor(
        renderer,
        // RGBA
        // 提取红色通道值，右移xx位
        (self->color & 0x00ff0000) >> 16, // 红    r
        (self->color & 0x0000ff00) >> 8,  // 绿    g
        self->color & 0x000000ff,         // 蓝    b
        (self->color & 0xff000000) >> 24  // 透明  a
    );
    // &取地址
    SDL_RenderFillRectF(renderer, &(self->dest));
}

...

// 销毁
void RectShape_Destroy(RectShape *self) {
    free(self);
}

dest->color不能直接用，需要用右移计算提取里面的元素（颜色 RGBA）

最重要的来了，怎么搞出来拖拽这一事件呢？

// 鼠标事件（拖动） .. SDL_Event是事件类型
void RectShape_OnMouseEvent(RectShape *self, SDL_Event *event) {
    switch (event->type) {
        // 鼠标移动事件
        case SDL_MOUSEMOTION:
            // 点击时开始和鼠标一起拖动
            if (self->_dragEnabled == 1) {
                self->dest.x = self->_dragStartPoint.x + event->motion.x - self->_dragStartMousePoint.x;
                self->dest.y = self->_dragStartPoint.y + event->motion.y - self->_dragStartMousePoint.y;
            }
            break;
        // 鼠标点下事件
        case SDL_MOUSEBUTTONDOWN:
            // 当鼠标按下时，开始拖动
            self->_dragStartPoint.x = self->dest.x;
            self->_dragStartPoint.y = self->dest.y;
            self->_dragStartMousePoint.x = event->button.x;
            self->_dragStartMousePoint.y = event->button.y;
            self->_dragEnabled = 1;
            break;
        // 鼠标弹起事件
        case SDL_MOUSEBUTTONUP:
            self->_dragEnabled = 0;
            break;
    }
}

还有限定区域：只能拖动方块区域才能拖动的方法

// 鼠标事件（拖动） .. SDL_Event是事件类型
void RectShape_OnMouseEvent(RectShape *self, SDL_Event *event) {
    // 检测碰撞
    SDL_Point currentMousePoint;
    // 转换类型
    SDL_Rect destRect;
    
    switch (event->type) {
        // 鼠标移动事件
        case SDL_MOUSEMOTION:
            // 点击时开始和鼠标一起拖动
            if (self->_dragEnabled == 1) {
                self->dest.x = self->_dragStartPoint.x + event->motion.x - self->_dragStartMousePoint.x;
                self->dest.y = self->_dragStartPoint.y + event->motion.y - self->_dragStartMousePoint.y;
            }
            break;
        // 鼠标点下事件
        case SDL_MOUSEBUTTONDOWN:
            // 检测碰撞(鼠标和红色块)
            currentMousePoint.x = event->button.x;
            currentMousePoint.y = event->button.y;
            // 强制类型转换
            destRect.x = (int) self->dest.x;
            destRect.y = (int) self->dest.y;
            destRect.w = (int) self->dest.w;
            destRect.h = (int) self->dest.h;
            // 如果他俩相交
            if (SDL_PointInRect(&currentMousePoint, &destRect)) {
                // 当鼠标按下时，开始拖动
                self->_dragStartPoint.x = self->dest.x;
                self->_dragStartPoint.y = self->dest.y;
                self->_dragStartMousePoint.x = event->button.x;
                self->_dragStartMousePoint.y = event->button.y;
                self->_dragEnabled = 1;
            }
            break;
        // 鼠标弹起事件
        case SDL_MOUSEBUTTONUP:
            self->_dragEnabled = 0;
            break;
    }
}

然后在 main 里画一个小方块，配置一下

#include <SDL.h>
#include "RectShape.h"

#define WIDTH 400
#define HEIGHT 300
/* 设定帧频 */
#define FRAMERATE 60

// 渲染器
SDL_Renderer *renderer; 
// window
SDL_Window *window;
// RectShape
RectShape *rect;


void draw() {
    // 渲染背景为白色，使用渲染器
    SDL_SetRenderDrawColor(renderer, 225, 225, 225, 225);
    SDL_RenderClear(renderer);

    RectShape_Draw(rect, renderer);

    // 使其生效（放到屏幕上）
    SDL_RenderPresent(renderer);
}

/* 事件循环 */
void event_loop() {
    while (1) {
        /* 帧率：获取毫秒值 */
        long begin = SDL_GetTicks();
        /* 动画 */
        draw();

        SDL_Event event;
        /* 使用循环读取事件比if快，不用等 */
        while (SDL_PollEvent(&event)) {
            switch (event.type) {
                // 鼠标移动事件
                case SDL_MOUSEMOTION:

                // 鼠标点下事件
                case SDL_MOUSEBUTTONDOWN:
                // 鼠标弹起事件
                case SDL_MOUSEBUTTONUP:
                    // 转移到函数内部处理事件
                    RectShape_OnMouseEvent(rect, &event);
                    break;
                case SDL_QUIT: return;
            }
        }

        /* 帧率：当前值 */
        long current = SDL_GetTicks();
        /* 现在每一帧花费的时间 */
        long cost = current - begin;
        /* 每帧应该的时间 */
        long frame = 1000/FRAMERATE;
        /* 计算该休眠的时间维持帧数 */
        long delay = frame - cost;
        /* 如果delay是负就不休眠维持帧数 */
        if (delay > 0) {
            SDL_Delay(delay);
        }
        /* 在系统资源足够的情况下能够保持一个足够的帧频，不够咱也没办法 */
    }
}

int main() {

    if (SDL_Init(SDL_INIT_VIDEO)) {
        SDL_Log("Can not init video, %s", SDL_GetError());
        return 1;
    }

    window = SDL_CreateWindow(
        "鼠标事件",
        SDL_WINDOWPOS_CENTERED,
        SDL_WINDOWPOS_CENTERED,
        WIDTH,HEIGHT,
        SDL_WINDOW_SHOWN
    );

    if (window==NULL) {
        SDL_Log("Can not create window, %s", SDL_GetError());
        return 1;
    }

    // 创建渲染器
    // 窗口 渲染驱动(索引) 用什么渲染
    // SDL_RENDERER_ACCELERATED 硬件加速 GPU
    // SDL_RENDERER_SOFTWARE CPU渲染 (什么MC行为)
    renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
    if (renderer==NULL) {
        SDL_Log("Can not create renderer, %s", SDL_GetError());
    }

    // 创建
    rect = RectShape_Create(0, 0, 80, 60, 0xffff0000);

    event_loop();
    // 销毁
    RectShape_Destroy(rect);
    /* 释放渲染器 */
    SDL_DestroyRenderer(renderer);
    /* 释放窗口 */
    SDL_DestroyWindow(window);
    return 0;
}