LITTLEVGL--繪製圓--3

畫圈

標題一、 目的

   採用littlegl繪製一個圈。

標題二、 流程方案

標題2.1 方案原理

 littlegl中提供了一個畫弧度的函數。我們可以採用此函數繪製一個圓。此UI系統中將各個對象外觀,屬性和行爲都獨立分開。
 要繪製一個圓,我們至少要做兩個操作,即圓繪製(包含了半徑大小),另外一個爲圓的一些屬性(修飾或者風格),即顏色,邊框寬度,以及疊影等。

標題 繪製圓弧的函數:

lv_arc_set_angles(arc, start_angle, end_angle)

標題 配置屬性的函數:

lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &style)

標題2.2 流程

  1. 配置圓的風格屬性;
  2. 創建圓arc,確定其顯示位置以及大小;
  3. 給arc加載1配置的風格屬性。

標題三、 代碼

標題3.1 新建arc案例的頭文件和源文件

 在pc_simulator_sdl_visual_studio-master\visual_studio_2017_sdl\lv_examples\lv_tests中創建cr_test目錄,並在其中創建cr_arc.h和cr_arc.c文件。

文件顯示
vc下的工程結構

main.c中添加對此頭文件引用#include"lv_examples/lv_tests/cr_test/cr_arc.h"**

標題3.2 編寫源文件和頭文件

標題 源文件

#include <stdlib.h>
#include <Windows.h>
#include <SDL.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/display/monitor.h"
#include "lv_drivers/indev/mouse.h"
#include "lv_drivers/indev/keyboard.h"
#include "lv_examples/lv_apps/demo/demo.h"
#include "lv_examples/lv_apps/benchmark/benchmark.h"
#include "lv_examples/lv_tests/lv_test_theme/lv_test_theme_1.h"
#include "lv_examples/lv_tutorial/10_keyboard/lv_tutorial_keyboard.h"




static void ArcTaskCb(lv_task_t *t)
{
	static int16_t a = 0;

	//1. 每20ms任務調度時,此a+3;
	a += 3;
	if(a > 360)a = 360;

	//2. 給user_data這個傳遞過來的圓弧對象重繪製0度->a度的弧度
	lv_arc_set_angles(t->user_data, 0 ,a);

	if(a == 360){
		//刪除任務
		lv_task_del(t);
		a = 0;
		printf("task cut!!\r\n");//debug
		return ;
	}
}



void DrawArc()
{
  //1. style config
	 static lv_style_t style;
	 lv_style_copy(&style, &lv_style_plain);//複製默認常規屬性lv_style_plain,這樣屬性不用大規模複製
	 style.line.color = LV_COLOR_NAVY;          //深藍色
	 style.line.width = 8;                       //寬度


	  //2. arc config
	lv_obj_t * arc = lv_arc_create(lv_scr_act(), NULL);//在當前screen對象上創建一個arc,則arc父類爲screen
	lv_arc_set_angles(arc, 90, 190);//初始顯示的弧度爲一個90度到190度的100度半圓
	lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &style);//配置圓弧風格
	lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);	//在其父對象(這裏就是screen)上的中間顯示
  	lv_task_create(ArcTaskCb, 20, LV_TASK_PRIO_LOWEST, arc);//創建了一個20ms,優先級爲最低的ArcTaskCb重繪任務,並向任務的user_data參數傳遞arc指針
	
}

標題 頭文件

僅僅是聲明瞭DrawArc函數。

#ifndef CR_ARC_H_
#define CR_ARC_H_

void DrawArc();

#endif

標題3.3 main.c函數調用

在實現demo中,需要在lv_init()和hal_init()兩個函數初始化後調用【具體原因見其他章節】。

int main(int argc, char** argv)
{
    /*Initialize LittlevGL*/
    lv_init();

    /*Initialize the HAL for LittlevGL*/
    hal_init();

    /*
     * Demo, benchmark, tests and tutorial.
     *
     * Uncomment any one (and only one) of the functions below to run that
     * particular demo, test or tutorial.
     */

	DrawArc();//調用

	//ButtonTest(); SliderInit(); ListInit();
   // demo_create();
    //benchmark_create();
    //lv_test_theme_1(lv_theme_night_init(210, NULL));
    //lv_test_theme_1(lv_theme_night_init(100, NULL));
    //lv_test_theme_1(lv_theme_material_init(210, NULL));
    //lv_test_theme_1(lv_theme_alien_init(210, NULL));
    //lv_test_theme_1(lv_theme_zen_init(210, NULL));
    //lv_test_theme_1(lv_theme_nemo_init(210, NULL));
    //lv_test_theme_1(lv_theme_mono_init(210, NULL));
    //lv_test_theme_1(lv_theme_default_init(210, NULL));
    //lv_tutorial_keyboard(kb_indev);

    while (1) {
        /* Periodically call the lv_task handler.
        * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        Sleep(8);       /*Just to let the system breathe */
    }

    return 0;
}

四、 結果
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章