电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
柿饼UI初体验(二)
分 享
扫描二维码分享
柿饼UI初体验(二)
柿饼UI
入门电子设计
关注
发布时间: 2020-12-10
丨
阅读: 2410
大家好,上篇文章我简单介绍了一下柿饼派和柿饼UI,最后写了一个简单的小程序用来演示button和label控件的用法,在柿饼UI的设计器中还有很多的控件,大部分用法也很简单,在这里我会介绍一些比较复杂的控件的用法。 首先还是新建一个工程,参数都按照默认的设置就可以,工程名不能包含全角字符。 ![](https://cf05.ickimg.com/bbsimages/202012/08df20cc90916ba4c68c8d34f026b1f2.png) ## Clock控件 首先我们来看一下clock控件,这是时钟控件,可以用于显示时间,也可以在其中放入其他子控件。 ![](https://cf05.ickimg.com/bbsimages/202012/b884644f1c7e3d144966c5d7dd26a58e.png) ![](https://cf05.ickimg.com/bbsimages/202012/4d44aaa9eeacc2203a09fb13db0714c6.png) 上图就是默认的时钟样式,我们可以仿真运行一下看看效果, ![](https://cf05.ickimg.com/bbsimages/202012/0116ed7d8a73bc373bce2a9e99dcf298.png) 可以看到初始时间是指向6:30的,跟正常的表颠倒过来了,我们可以对它的指针进行一下设置,打开界面的js代码,onLoad: function(event){}中添加如下代码 ![](https://cf05.ickimg.com/bbsimages/202012/3c9d845731583617ae5f397f37344a2b.png) 我们通过上面的程序设置clock控件的hour属性,这个属性是时钟时针的旋转中心,我们给他设定了x,y两个值,这两个值的确定需要我们去看控件的时针素材,在设计器的左边图片资源里我们可以找到时钟控件用到的素材, ![](https://cf05.ickimg.com/bbsimages/202012/53868347bf8d9a5d910c3cb555db0e25.png) 没有的话可以刷新一下图片资源,在这里的H.png、M.png、S.png分别是时钟的时针、分针、秒针,我们双击图片可以看到图片的尺寸, ![](https://cf05.ickimg.com/bbsimages/202012/11d299084f442d015770c21674987c69.png) 可以看到时针的尺寸是8*45,我们在设置时针的旋转中心的时候,x的值是图片宽度的一半,y的值是图片的高度,在这里x和y分别是4和45,设置好后我们运行看一下效果。 ![](https://cf05.ickimg.com/bbsimages/202012/9d7e4ddfe8a4e7ca64a1a3fd2d3182f8.png) 可以看到时针指示的位置已经正确了,分针和秒针按同样的方法设置即可, ![](https://cf05.ickimg.com/bbsimages/202012/475673a26925837b5eec72c67473bdf0.png) 现在需要给时钟设置一个定时器用来计时,代码如下: ```javascript var page = { timer: 0, time: 0, /@@* 此方法在第一次显示窗体前发生 */ onLoad: function (event) { this.setData({ Clock1: { hour: { x: 4, y: 45 }, minute: { x: 3, y: 58 }, second: { x: 2, y: 60 }, } }) var that = this; this.timer = setInterval(function () { that.setData({ Clock1: { value: that.time } }); that.time++; }, 1000); }, /@@* 此方法展示窗体后发生 */ onResume: function (event) { }, /@@* 当前页状态变化为显示时触发 */ onShow: function (event) { }, /@@* 当前页状态变化为隐藏时触发 */ onHide: function (event) { }, /@@* 此方法关闭窗体前发生 */ onExit: function (event) { clearInterval(this.timer) }, }; Page(page); page = 0; ``` 现在运行仿真时钟就可以计时了, ![](https://cf05.ickimg.com/bbsimages/202012/9f86f3850eb53038c820cabcf9b25f04.png) 时钟的样式也可以在属性这里进行设置, ![](https://cf05.ickimg.com/bbsimages/202012/35b71863a440f6d8e2556d6d10d77401.png) 可以选择自己设计的指针图片和背景图片,修改图片素材后要按上面的方法重新设置指针的旋转中心。 ## Canvas控件 接下来看一下canvas控件,canvas是柿饼UI中用于绘图的控件,用法很多,在这里只介绍一部分用法。首先在工具栏找到canvas控件,然后放置到UI界面, ![](https://cf05.ickimg.com/bbsimages/202012/6d5959372e2e3e318be125ee1009d1c0.png) ![](https://cf05.ickimg.com/bbsimages/202012/6c1f739c4000bce0dd0cc3fa5716895c.png) 首先我们需要通过pm.createCanvasContext(id, page);创建画布上下文,然后设置绘图路径,下面绘制一个矩形, ```javascript var page = { /@@* 此方法在第一次显示窗体前发生 */ onLoad: function (event) { var ctx = pm.createCanvasContext('Canvas1', this); ctx.moveTo(0, 0); //设置起点 ctx.rectTo(60, 60); //绘制矩形 ctx.setFillStyle('#000000'); //设置颜色 ctx.draw();//导出路径 }, /@@* 此方法展示窗体后发生 */ onResume: function (event) { }, /@@* 当前页状态变化为显示时触发 */ onShow: function (event) { }, /@@* 当前页状态变化为隐藏时触发 */ onHide: function (event) { }, /@@* 此方法关闭窗体前发生 */ onExit: function (event) { }, }; Page(page); page = 0; ``` 通过上面的程序我们可以在画布上绘制一个矩形路径,运行看一下效果, ![](https://cf05.ickimg.com/bbsimages/202012/d0207e80307db76100a5fbc1de0f8875.png) 同样我们可以用lineTo()绘制一条线,用arc()绘制一段弧,如果我们要填充绘制的路径可以使用fill(), ```javascript var page = { /@@* 此方法在第一次显示窗体前发生 */ onLoad: function (event) { var ctx = pm.createCanvasContext('Canvas1', this); ctx.moveTo(0, 0); //设置起点 ctx.rectTo(60, 60); //绘制矩形 ctx.setFillStyle('#000000'); //设置颜色 ctx.fill(); ctx.draw(); }, /@@* 此方法展示窗体后发生 */ onResume: function (event) { }, /@@* 当前页状态变化为显示时触发 */ onShow: function (event) { }, /@@* 当前页状态变化为隐藏时触发 */ onHide: function (event) { }, /@@* 此方法关闭窗体前发生 */ onExit: function (event) { }, }; Page(page); page = 0; ``` ![](https://cf05.ickimg.com/bbsimages/202012/f4e691e0ac3cc926d24604279b807543.png) 还可以使用路径变换API实现平移、旋转、缩放等操作,例如将矩形旋转一个角度。 ```javascript var page = { /@@* 此方法在第一次显示窗体前发生 */ onLoad: function (event) { var ctx = pm.createCanvasContext('Canvas1', this); ctx.moveTo(0, 0); //设置起点 ctx.rectTo(60, 60); //绘制矩形 ctx.setFillStyle('#000000'); //设置颜色 ctx.translate(-30, -30); ctx.rotate(45); ctx.translate(60, 60); ctx.fill(); ctx.draw(); }, /@@* 此方法展示窗体后发生 */ onResume: function (event) { }, /@@* 当前页状态变化为显示时触发 */ onShow: function (event) { }, /@@* 当前页状态变化为隐藏时触发 */ onHide: function (event) { }, /@@* 此方法关闭窗体前发生 */ onExit: function (event) { }, }; Page(page); page = 0; ``` ![](https://cf05.ickimg.com/bbsimages/202012/d3bebdb839bc3728e844452efdfd2ce5.png) 在进行旋转的时候要先将矩形中心移动到画布原点,旋转完成后再移动回来。就可以实现图像的旋转了,这些就是canvas的基本用法,后续还会继续体验柿饼UI,并且介绍更多控件的使用以及硬件方面的应用。
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
入门电子设计
关注
评论
(1)
登录后可评论,请
登录
或
注册
7fa2be848eeaa01d
119
天前...
软件界面像VS语法结构照搬微信小程序,这货是个什么鬼?
0
回复
发布
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交