圆弧部件(lv_arc)

圆弧部件以弧形滑动的形式来调节、显示某个参数的值。(类似于滑动部件弧型版本)
img

圆弧部件组成部分:(类比开关部件)

  1. 背景弧(LV_PART_MAIN)(主体)
  2. 前景弧(LV_PART_INDICATOR)(指示器)
  3. 旋钮(LV_PART_KNOB)(手柄)、

API函数

img

  1. 创建圆弧部件
lv_obj_t *arc = lv_arc_create( parent );
  1. 设置当前值、范围值
lv_arc_set_value(arc, 80);							/* 设置当前值(需要在范围值之内)*/
lv_arc_set_range(arc, 0, 200);						/* 设置范围值 */
  1. 设置圆弧角度
//先设置背景弧角度再设置前景,否则会出现前景设置有问题
lv_arc_set_bg_angles(arc, 135, 45);					/* 设置背景弧角度 */
lv_arc_set_angles(arc, 135, 270);					/* 设置前景弧角度 */
  1. 设置旋转角度
lv_arc_set_rotation(arc, 180);
  1. 获取当前值
lv_arc_get_value(arc);
  1. 设置模式、圆弧绘制速率
lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);				/* 设置模式 */
lv_arc_set_change_rate(arc, 90);						/* 绘制速率:90°/秒 */

线条部件(lv_line)

线条部件能够在一组坐标点之间依次绘制直线。
img

线条部件组成部分:

  1. 主体(LV_PART_MAIN)

API函数

  1. 创建线条部件
lv_obj_t   *line = lv_line_create( parent );
  1. 设置线条坐标点
static lv_point_t  line_points[] = { {15, 5}, {25, 20}, {5, 20}, {15, 5} };
lv_line_set_points(line, line_points, 4);	
  1. 设置线条样式
lv_obj_set_style_line_width(line, 8, LV_PART_MAIN);           	/* 设置宽度 */
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);	   	/* 设置圆角 */
  1. 设置y轴反转
lv_line_set_y_invert(line, true);

img

图片部件(lv_img)

图片部件可用于图片显示、功能界面优化、背景优化等。
img

图片部件组成部分:

  1. 主体(LV_PART_MAIN)

API函数

  1. 创建图片部件
lv_obj_t  *img = lv_img_create( parent );
  1. 设置图片源
//LV_IMG_DECLARE(img_bird);需要全局声明
LV_IMG_DECLARE(img_bird);				/* 声明图片 */
lv_img_set_src(img, &img_bird);			/* 设置图片源 */
  1. 设置图片偏移
lv_img_set_offset_x(img, 100);				/* x轴偏移100 */
lv_img_set_offset_y(img, 20); 				/* y轴偏移20 */

img

  1. 图片重新着色
lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN); 
lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);
  1. 设置图片缩放、旋转
//放大(缩小)倍数根据自己的尺寸设置,原函数的意思是“设置图片大小”
//旋转度数:90°对应的就是900,同理,1800就是180°
lv_img_set_zoom(img, 512);		/* 放大2倍 */
lv_img_set_angle(img, 900);		/* 顺时针方向旋转90° */

img

  1. 设置中心点
lv_obj_update_layout(img);		/* 更新图片布局信息 */
lv_img_set_pivot(img, 0, 0);	/* 设置中心点 */

img