如何实现折现弯曲进度条

[CuteB]

lvgl使用什么方法能实现这种进度条，如果用画布的话，但不能给绘制的圆弧或者进度条添加图片源

[yunfeng]

可以使用滑块部件slider，用两张图片，一张是量程满的图片，一张是量程全空的图片

[CuteB]

这样的话，到斜着的部分就还是水平或者垂直增加，不能是斜着的了，效果可能就会差很多了

[lizhaoming]

V9的话看看lv_demo_vector_graphic_buffered，不过感觉也很难实现，还是用图片比较好

[yunfeng]

可以去看看squareline_studio这个软件里面的案例是怎么实现的，里面可以做到这种功能

[lizhaoming]

曲线太难算了，这个是纯代码绘制的
static void draw_my_gradient(lv_vector_dsc_t* ctx, lv_vector_path_t* path)
{
lv_vector_path_clear(path);
lv_vector_dsc_identity(ctx);

lv_fpoint_t pts[6] = {
{ 0,  0},   
{75,  30},   
{230, 180},  
{500, 180},   
{600, 230},  
{ 200, 230}    
};

lv_vector_path_move_to(path, &pts[0]);

for (int i = 1; i < 6; i++) {
    lv_vector_path_line_to(path, &pts[i]);
}
lv_vector_path_close(path);

lv_grad_stop_t stops[2];
lv_memzero(stops, sizeof(stops));
stops[0].color = lv_color_make(34, 177, 244); 
stops[0].opa = LV_OPA_COVER;
stops[0].frac = 0;
stops[1].color = lv_color_make(10, 12, 153);
stops[1].opa = LV_OPA_COVER;
stops[1].frac = 255;


lv_vector_dsc_set_fill_linear_gradient(ctx, 0, 0, 600, 230);
lv_vector_dsc_set_fill_gradient_color_stops(ctx, stops, 2);
lv_vector_dsc_set_fill_gradient_spread(ctx, LV_VECTOR_GRADIENT_SPREAD_REPEAT);
lv_vector_dsc_add_path(ctx, path); // draw a path

}

[CuteB]

确实很难实现曲线，你这个也很好

[lizhaoming]

主要是你这个是进度条，你还得去计算所有的点的变化，这才是最麻烦的

[yunfeng]

其实可以使用滑动块slider组件+图片来实现的，一张量程全满和一张量程全空，在squareline_studio软件里面有实现案例的

[lizhaoming]

是的，这个我知道，我也建议他用图片+slider，省事简单

[CuteB]

谢谢大家给的建议，其实我想表达的是如果是斜着的话，可能slider+图片效果不是很好，slider是水平或者垂直方向增长

[yunfeng]

明白你意思了，好像确实也没什么好办法