自己设计一种运行在单片机的嵌入式gui图形库—控件设计之表盘时钟

1、控件结构体

typedef struct {
    fv_widget_t widget;
	
    int32_t   hour;    //时
    int32_t   minute;  //分
    int32_t   second;  //秒
	
    char    * bg_image_name;       //背景图片的名称
    char    * hour_image_name;     //时针图片的名称
    char    * minute_image_name;   //分针图片的名称
    char    * second_image_name;   //秒针图片的名称
	
    int32_t   needle_xpos;         //指针中心点 相对于控件左上角 的x坐标
    int32_t   needle_ypos;         //指针中心点 相对于控件左上角 的y坐标
    int32_t   hour_needle_xcor;    //时针图片旋转时,旋转点的x坐标偏移量
    int32_t   hour_needle_ycor;    //时针图片旋转时,旋转点的y坐标偏移量
    int32_t   minute_needle_xcor;  //分针图片旋转时,旋转点的x坐标偏移量
    int32_t   minute_needle_ycor;  //分针图片旋转时,旋转点的y坐标偏移量
    int32_t   second_needle_xcor;  //秒针图片旋转时,旋转点的x坐标偏移量
    int32_t   second_needle_ycor;  //秒针图片旋转时,旋转点的y坐标偏移量
} fv_time_clock_t;

2、控件绘制

static int32_t on_paint_self(fv_widget_t* widget, fv_canvas_t* canvas)
{
    fv_time_clock_t* time_clock = (fv_time_clock_t*)widget;
    fv_pixelmap_t pixelmap = { 0 };
    float_t rotation = 0;

    //显示背景图片
    if (time_clock->bg_image_name != FV_NULL && fv_load_image(time_clock->bg_image_name, &pixelmap) == RET_OK)
    {
        fv_canvas_pixelmap_draw(canvas, 0, 0, &pixelmap);
    }

    //显示旋转的时针图片
    if (time_clock->hour_image_name != FV_NULL && fv_load_image(time_clock->hour_image_name, &pixelmap) == RET_OK)
    {
        float_t hour = time_clock->hour + time_clock->minute / 60.0f + time_clock->second / 3600.0f;
        rotation = 360 * hour / 12.0f;

        fv_canvas_pixelmap_rotate(canvas,   //画布指针
            time_clock->needle_xpos - pixelmap.pixelmap_width / 2,   //图片的x坐标
            time_clock->needle_ypos - time_clock->hour_needle_ycor,  //图片的y坐标
            &pixelmap,                      //图片指针
            (int32_t)rotation,              //旋转角度
            time_clock->hour_needle_xcor,   //指针图片旋转时,旋转点的x坐标偏移量
            time_clock->hour_needle_ycor);  //指针图片旋转时,旋转点的y坐标偏移量  
    }

    //显示旋转的分针图片
    if (time_clock->minute_image_name != FV_NULL && fv_load_image(time_clock->minute_image_name, &pixelmap) == RET_OK)
    {
        float_t minute = time_clock->minute + time_clock->second / 60.0f;
        rotation = 360 * minute / 60.0f;

        fv_canvas_pixelmap_rotate(canvas,     //画布指针
            time_clock->needle_xpos - pixelmap.pixelmap_width / 2,     //图片的x坐标
            time_clock->needle_ypos - time_clock->minute_needle_ycor,  //图片的y坐标
            &pixelmap,                        //图片指针
            (int32_t)rotation,                //旋转角度
            time_clock->minute_needle_xcor,   //指针图片旋转时,旋转点的x坐标偏移量
            time_clock->minute_needle_ycor);  //指针图片旋转时,旋转点的y坐标偏移量  
    }

    //显示旋转的秒针图片
    if (time_clock->second_image_name != FV_NULL && fv_load_image(time_clock->second_image_name, &pixelmap) == RET_OK)
    {
        rotation = 360 * time_clock->second / 60.0f;

        fv_canvas_pixelmap_rotate(canvas,     //画布指针
            time_clock->needle_xpos - pixelmap.pixelmap_width / 2,     //图片的x坐标
            time_clock->needle_ypos - time_clock->second_needle_ycor,  //图片的y坐标
            &pixelmap,                        //图片指针
            (int32_t)rotation,                //旋转角度
            time_clock->second_needle_xcor,   //指针图片旋转时,旋转点的x坐标偏移量
            time_clock->second_needle_ycor);  //指针图片旋转时,旋转点的y坐标偏移量  
    }

    return 0;
}