发新帖

[试用评测] 【RT-Thread柿饼派】+3.柿饼UI之Canvas

[复制链接]
发表于 2019-5-27 16:25:49
| 1794 查看 | 0 回复
本帖最后由 川楠 于 2019-5-27 16:30 编辑

前言
      大家好,我又开始了柿饼派的学习了。
      初步的看了下,柿饼派的控件还是有点多,那些API的函数更多。不过没关系,我就依依的学习吧,这次使用的是Canvas控件,一个画布控件。
      有了这个画布,我们可以在这个画布上绘制任何东西,比如图标,图表等等。
      下面开始学习。还是老话,注意软件的帮助文档。      
       a1.jpg


控件使用
      对于学习Canvas控件,我是通过一个一个的小例子去测试,了解API函数接口以及参数的意义。先有个大致的映象,这样后面项目上有这样的需求时,方便第一时间查阅相关的资料,不至于感觉到抓瞎。
测试1:画布新建与删除
      建立多个画布,分别在每个画布上写一些东西,然后删除一个。按键1开始建立两个画布,按键2删除一个画布:
       a2.jpg
      编写代码如下:
       a3.jpg
      注意;context这个类似句柄,但又不完全是。这里可以不需要去管context的变量的生命期。
结果如下图所示:
       a4.jpg
      按键1能正常建立两个画布,但是,按键2按下去没有反映,这里是一个坑,柿饼的pm.canvasContextDestroy()接口函数有问题。
      找了技术支持,也没搞定,好吧,继续测试其他的。

测试2:绘制渐变线条
      新建了一个按键3,用按键3来触发。
       a5.jpg
      函数createLinearGradient的坐标参数,是相对于Canvas的区域坐标。
      最后效果如下图所示:
       a6.jpg
测试3:渐变圆形填充
       a7.jpg
      我做了两个渐变圆形填充,一个是从圆点开始想外面渐变,另一个是从半径为25的位置,开始向外渐变。
       a8.jpg
测试4:绘制实线线条和端点样式
       a9.jpg
      这个代码少,设置好起点和终点,以及线宽,端点样式即可。
       b1.jpg

测试5:线条交叉点的三种样式
       b2.jpg
      效果如下图所示:
       b3.jpg

测试6:绘制虚线线条
       b4.jpg
      函数setLineDash()中的参数[10表示虚线中线段和空格之间的点位;后面的0表示虚线起始点的平移位置。
       b5.jpg

测试7:绘制弧线
       b6.jpg
      注意备注文字,setStrokeStyle函数是设置图形的外形边框的意思。
       b7.jpg


总结:
      柿饼UI,确实和传统的GUI有很大的差别,其是采用小程序的思想,使用JS语言,对纯C语言开发的单片机用户来说,还是有点难度,但是也不是达到了那种不能接受的地步。
      同时,其作为一个新的GUI界面,肯定有一些BUG和不完善的地点。这个需要我们用户经行包容,理性看待,当然也需要柿饼的开发人员的不断努力才行。


LearnCanvas.rar (144.56 KB, 下载次数: 188)
我要点赞 0

举报

您需要登录后才可以回帖 登录 | 立即注册