TouchGFX使用教程(六)

2021-10-07 17:31:11 字數 3161 閱讀 7449

好久沒更新了,之間主要是為了之後的更新在準備一些demo,這期主要給大家介紹乙個例子,這個例子很小但是能說明 一些touchgfx的開發細節。話不多說先上圖。

這期主要給大家介紹這個圓環進度條。

這個 看起來感覺很高大上的進度條,其實組成原理分為幾個部分。

首先先注意下這個介面,這個介面是touchgfx官方提供的demo中的乙個畫面,其中左側的滑動欄主要作用是用於切換右側的介面,這裡我們不過多講解。再看下整體通過touchgfx搭建的介面。

這個介面上並沒有圓環的內容,但是右側有乙個底圖背景background,這個image定義了介面的主色調,這樣開發這個控制項時主要的大背景顏色也應該類似,如果跳脫了那就只能說明醜!!!

既然控制項不是通過designer去實現的,那只能說明該部分的內容可變動的地方過於多。所以需要通過**實現,下面我們想一下這個控制項的製作過程。

首先在touchgfx中製作控制項需要有乙個類container,這個類之前提過這裡就不過多說明了。過載這個類後需要乙個背景,還需要乙個前景,這兩個的色調要和大背景相互吻合。

背景圖

前景圖除此之外,也需要圓環的部分,第一圓環需要根據百分比的數值進行變動,第二也可以通過手動進行滑動,如果用製作那麼會加大繁瑣程度也不會有太好的效果。這裡我們想到touchgfx官方提供的畫圓的工具circle類,這個類繼承的是畫圖及畫布的部分,這樣就需要乙個畫出色彩斑斕的畫筆去畫圓。 那這個畫筆的顏色如下圖

通過這個畫筆則可以製作出相應的圓環。

到這裡總結下之前的思路,首先需要兩個乙個做前景乙個做背景,還有需要乙個圓環,乙個畫筆,其餘就是需要滑動事件,及控制項視窗。

到這裡有人會問,這麼簡單就製作乙個控制項嗎,其實大多數控制項都可以分解為簡單的部分。通過簡單的搭建可以做出複雜的效果,千里之行始於足下嘛。下面看下製作流程吧。

首先建立個控制項類。

class circularprogress : public container

在類中新增內容

class circularprogress : public container

void setbarangle(int angleindegrees)

; virtual void handleclickevent(const clickevent& evt)

; virtual void handledragevent(const dragevent& evt)

;protected:

static const int end_degree = 116;

static const int start_degree = -end_degree;

image background; 背景

image centerimage; 前景

circle bar; 圓環

#if !defined(use_bpp) || use_bpp==16

painterrgb565 colorpainter;

#elif use_bpp==24

painterrgb888 colorpainter;

#elif defined(lcd8bpp_abgr2222)

painterabgr2222 colorpainter;

#elif defined(lcd8bpp_rgba2222)

painterrgba2222 colorpainter;

#elif defined(lcd8bpp_bgra2222)

painterbgra2222 colorpainter;

#elif defined(lcd8bpp_argb2222) || use_bpp==8

painterargb2222 colorpainter;

#elif use_bpp==4

paintergray4 colorpainter;

#elif use_bpp==2

paintergray2 colorpainter;

#else

#error unknown use_bpp

#endif

textareawithonewildcard percentagetext;

unicode::unicodechar percentagetextbuffer[5]

; textarea headlinetext;//文字

int currentpercentage;

void updatebar(int newx, int newy)

; 位置

};

之後看一下整體的組合。

circularprogress::circularprogress(

)

修改角度的**

void circularprogress::setbarangle(int angleindegrees)

到這裡乙個控制項就展示完了,之後給大家展示下這個控制項的使用。

percentagebar.setxy(background.getx(

) + (background.getwidth(

) - percentagebar.getwidth(

)) / 2, background.gety(

) + (background.getheight(

) - percentagebar.getheight(

)) / 2)

; percentagebar.setbarangle(100)

; percentagebar.setvisible(false)

; add(percentagebar)

; //圓環

shell 教程六 函式的使用

linux ubuntu test shell cat hello sh bin bash myfunc echo begin call myfunc myfunc echo end call myfunc linux ubuntu test shell hello sh begin call my...

MySQL使用教程 六 索引的操作

1 建立和檢視普通索引 普通索引 建立索引時,不附加任何限制條件 唯 一 非空等限制 該型別的索引可以建立在任何資料型別的字段上。1 建立表時建立普通索引 語法形式 create table table name 屬性名1 資料型別,屬性名2 資料型別,屬性名3 資料型別,index key 索引名...

C 學習教程六

c 異常機制具有如下的特徵 1 所有異常必須用system.exception類或者從system.exception派生的類例項來標識。2 可以使用fianlly塊編寫在正常執行或異常情況下都要執行的終止 3 系統級的異常如移除 被零除和null等都對應地定義了其匹配的異常類,並且與應用程式級的錯...