【分享】低内存用KNOB实现一个环形触控滑块。

飛饵

现在的智能设备上经常见到那种环形的滑块，很炫酷。最近做项目也想做个这样的滑块，不过emwin没提供这样的控件。参考了坛友的分享自己魔改了一个出来。精简了一些代码，内存占用低，性能比较好。
参考：
http://www.armbbs.cn/forum.php?mod=viewthread&tid=30614&extra=page%3D1%26filter%3Ddigest%26digest%3D1
http://www.armbbs.cn/forum.php?mod=viewthread&tid=91792&extra=page%3D1

在F103上实测，只有旋钮控件情况下只需35Kb动态内存，这是实际不影响手指操作体验的大小，再大就要更多内存。操作时略微卡顿（F103跟不上了。。），欢迎大佬们来优化。
缺点是滑块另外画的，比较难看。因为没使用32bpp内存设备，所以旋钮控件自带的滑块用不了，欢迎大佬来实现更好看的滑块。
模拟器：

1. /*********************************************************************
   
2. *                                                                    *
   
3. *                SEGGER Microcontroller GmbH & Co. KG                *
   
4. *        Solutions for real time microcontroller applications        *
   
5. *                                                                    *
   
6. **********************************************************************
   
7. *                                                                    *
   
8. * C-file generated by:                                               *
   
9. *                                                                    *
   
10. *        GUI_Builder for emWin version 5.32                          *
    
11. *        Compiled Oct  8 2015, 11:59:02                              *
    
12. *        (c) 2015 Segger Microcontroller GmbH & Co. KG               *
    
13. *                                                                    *
    
14. **********************************************************************
    
15. *                                                                    *
    
16. *        Internet: www.segger.com  Support: support@segger.com       *
    
17. *                                                                    *
    
18. **********************************************************************
    
19. */
    
20. 
    
21. // USER START (Optionally insert additional includes)
    
22. // USER END
    
23. 
    
24. #include "DIALOG.h"
    
25. 
    
26. /*********************************************************************
    
27. *
    
28. *       Defines
    
29. *
    
30. **********************************************************************
    
31. */
    
32. #define ID_WINDOW_0  (GUI_ID_USER + 0x00)
    
33. #define ID_KNOB_0 (GUI_ID_USER + 0x01)
    
34. 
    
35. 
    
36. // USER START (Optionally insert additional defines)
    
37. #define KNOB_XSIZE 85 //旋钮控件的大小，越大约占内存
    
38. #define KNOB_YSIZE 85
    
39. #define KNOB_STEP 5  //画环时的弧长系数
    
40. 
    
41. #define AA_FACT 3 //抗锯齿质量
    
42. // USER END
    
43. 
    
44. /*********************************************************************
    
45. *
    
46. *       Static data
    
47. *
    
48. **********************************************************************
    
49. */
    
50. 
    
51. // USER START (Optionally insert additional static data)
    
52. // USER END
    
53. /*********************************************************************
    
54. *
    
55. *       _aDialogCreate
    
56. */
    
57. static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
    
58.   { WINDOW_CreateIndirect, "Window", ID_WINDOW_0, 0, 0, 320, 240, 0, 0x0, 0 },
    
59.   // USER START (Optionally insert additional widgets)
    
60.   { KNOB_CreateIndirect, "", ID_KNOB_0, 115, 45, KNOB_XSIZE, KNOB_YSIZE, WM_CF_SHOW}
    
61.   // USER END
    
62. };
    
63. 
    
64. /*********************************************************************
    
65. *
    
66. *       Static code
    
67. *
    
68. **********************************************************************
    
69. */
    
70. 
    
71. // USER START (Optionally insert additional static code)
    
72. /*--------------- 画环形滑块 -----------------
    
73. 
    
74. */
    
75. static void _DrawWheel(KNOB_Handle hKnob) {
    
76.         GUI_COLOR mycolor;
    
77. 
    
78.         I32       Value;
    
79.         int       xPos, yPos;
    
80.         int ArcStart = 360 - KNOB_STEP, ArcEnd = 360;
    
81.         int i=0, step;
    
82.         Value = 360 - KNOB_GetValue(hKnob) / 10; //获取当前值
    
83.         step = Value / KNOB_STEP; //算出需要画内部弧形的个数
    
84. 
    
85.         xPos = 115 + KNOB_XSIZE / 2; //计算坐标，确保环和内部弧形是以旋钮控件中心为原点
    
86.         yPos = 45 + KNOB_YSIZE / 2;
    
87. 
    
88.         GUI_SetFont(&GUI_Font13B_ASCII);
    
89. 
    
90.         GUI_AA_EnableHiRes(); //开高分辨率模式
    
91.         GUI_AA_SetFactor(AA_FACT); //抗锯齿因子,关闭抗锯齿可减少卡顿
    
92. 
    
93.         /*画圆环*/
    
94.         GUI_SetPenSize(16); //使用弧线画环，可以调整画笔实现弧线粗细
    
95.         GUI_SetColor(0x00f5ec80);
    
96.         GUI_AA_DrawArc(xPos*AA_FACT, yPos*AA_FACT, 38*AA_FACT, 38*AA_FACT, 0, 360);
    
97. 
    
98. 
    
99.         /*根据旋钮值画内部弧形*/
    
100.         GUI_SetColor(0x00FFFFD0);
     
101.         GUI_SetPenSize(8);
     
102.         for(; i<=step-1; i++)
     
103.         {   //增大KNOB_STEP可减少画弧形的次数，可减少卡顿，但滑块变化精度变低
     
104.                 GUI_AA_DrawArc(xPos*AA_FACT, yPos*AA_FACT, 38*AA_FACT, 38*AA_FACT,  ArcStart, ArcEnd);
     
105.                
     
106.                 ArcEnd = ArcStart; //上一个弧形的初角度成为下一个弧形的末角度
     
107.                 ArcStart = ArcStart - KNOB_STEP;//下一个弧形的初角度
     
108.         }
     
109.         GUI_SetColor(0x000000FF);
     
110.         for(; i<=step; i++) //最后几段弧形作为滑块指示
     
111.         {
     
112.                 GUI_AA_DrawArc(xPos*AA_FACT, yPos*AA_FACT, 38*AA_FACT, 38*AA_FACT,  ArcStart, ArcEnd);
     
113.                
     
114.                 ArcEnd = ArcStart; //上一个弧形的初角度成为下一个弧形的末角度
     
115.                 ArcStart = ArcStart - KNOB_STEP;//下一个弧形的初角度
     
116.         }
     
117. 
     
118.         GUI_AA_DisableHiRes();//关闭高分辨率
     
119.         GUI_SetColor(GUI_WHITE);
     
120.         GUI_DispDecAt(Value,xPos-16,yPos-3, 5);
     
121.                
     
122.        
     
123. }
     
124. // USER END
     
125. 
     
126. /*********************************************************************
     
127. *
     
128. *       _cbDialog
     
129. */
     
130. static void _cbDialog(WM_MESSAGE * pMsg) {
     
131.   WM_HWIN hItem;
     
132.   // USER START (Optionally insert additional variables)
     
133.   static GUI_MEMDEV_Handle   hMemKnobSmall;
     
134.   // USER END
     
135. 
     
136.   switch (pMsg->MsgId) {
     
137.   case WM_INIT_DIALOG:
     
138.     //
     
139.     // Initialization of 'Window'
     
140.     //
     
141.     hItem = pMsg->hWin;
     
142.     WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00738640));
     
143.         //
     
144.     // 初始化旋钮
     
145.     //
     
146.         KNOB_SetRange(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0), 0, 3600);
     
147.         KNOB_SetOffset(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0), 0);
     
148.         KNOB_SetPeriod(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0), 100); //控制旋钮减速度
     
149.         KNOB_SetPos(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0),3600);
     
150.     // USER END
     
151.     break;
     
152.   // USER START (Optionally insert additional message handling)
     
153.         case WM_PAINT:
     
154.         _DrawWheel(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0));
     
155.         break;
     
156.   // USER END
     
157.   default:
     
158.     WM_DefaultProc(pMsg);
     
159.     break;
     
160.   }
     
161. }
     
162. 
     
163. /*********************************************************************
     
164. *
     
165. *       Public code
     
166. *
     
167. **********************************************************************
     
168. */
     
169. /*********************************************************************
     
170. *
     
171. *       CreateWindow
     
172. */
     
173. WM_HWIN CreateKNOB(void);
     
174. WM_HWIN CreateKNOB(void) {
     
175.   WM_HWIN hWin;
     
176. 
     
177.   hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
     
178.   return hWin;
     
179. }
     
180. 
     
181. // USER START (Optionally insert additional public code)
     
182. // USER END
     
183. 
     
184. /*************************** End of file ****************************/
     

复制代码

sanit

不错

eric2013

非常感谢楼主分享。

byccc

在WM_PAINT消息里面放，比较耗资源，这个消息会经常进入，有没有尝试过在KNOB的回调函数里面实现。

        _DrawWheel(WM_GetDialogItem(pMsg->hWin,ID_KNOB_0));

飛饵

byccc 发表于 2019-4-12 10:40
在WM_PAINT消息里面放，比较耗资源，这个消息会经常进入，有没有尝试过在KNOB的回调函数里面实现。

     ...

试了下好像不行。
我是在KNOB回调函数的WM_PAINT里调用绘制函数，这样可以吗？

飛饵

byccc 发表于 2019-4-12 10:40
在WM_PAINT消息里面放，比较耗资源，这个消息会经常进入，有没有尝试过在KNOB的回调函数里面实现。

     ...

试了下好像不行。
我是在KNOB回调函数的WM_PAINT里调用绘制函数，这样可以吗？