【柿饼学习营】+werrysuzhen+汽车仪表盘

2018-9-14 15:32 [复制链接] 2 1393

本帖最后由 werrysuzhen 于 2018-9-14 15:34 编辑
: Y" E9 i/ S+ N$ t. T( k1 T" p5 ?" n) F
一.开发环境
% O' F% N$ m2 A' O1.开发板:野火I.MX1052 PRO9 c$ Z" E' S" g+ B- v5 W. v. T1 ]
2.win7-64位 专业版
' U; H( M0 W& c
二.作业题目
8 K; y9 @( N  C7 u$ g
1.使用画布控件绘制汽车仪表盘
' m& d; p' J( h$ v2 K8 W8 B0 ]. T: l6 m- C0 q) C9 T/ n5 h
三.过程和结果$ l$ C$ H! C4 w! s
1.在page上放置两个画布控件Canvas1和Canvas2Canvas1作为转速表,Canvas2作为速度表。官方给的教程中提供了绘制仪表盘的示例程序,在page的onLoad事件中验证示例程序% t: T; }( }, l8 k8 ?$ K8 H
1.png 3 h$ j$ z8 h2 S9 T7 K/ w& E
2.修改程序将速度表的最大范围由100改为200,并修改相应的指针指示值,将默认值改成0,在表盘上标注速度单位为km/h,表盘下方标注当前实时速度值
% o1 ~& A+ u# ~7 h 2.png ' k% F  n. B, a- x4 D7 ]
3.使用相同的程序在Canvas1上绘制转速表
1 u$ A9 P- H, { 3.png # Y+ a. X4 j5 s, a' l
3.增加两个按钮,一个控制加速,一个控制减速/ i- a) r3 j2 M' d& E
4.png
/ x. j+ q) i+ ]# L4.让仪表盘动起来,在两个按钮的onButton事件中,每次触发将转速表和速度表的值增加或减小一个单位,然后将画布内容清空,根据实际值重新绘制
& k& k9 r& M- D+ `. m' i' f( j4 L; o GIF.gif 6 D, o4 E) ^: h; y; A8 Y! m
5.做一个超速报警指示,当速度超过160Km/h时,速度指示显示为"Dange"报警,然后显示一个危险图标3 i: N8 {. j' e2 _& [1 |
GIF1.gif 4 p+ ^1 K( L' L9 t0 E3 R$ K8 E
) X0 ?' P) n9 z
四.作业总结- h6 B5 |- F5 T. F
1.本次的作业比较适合我,不需要太多的JS代码编写,主要是熟练使用官方的画布控件API函数。; \3 d. w4 ~. Q+ F' D% i/ s3 j" ^
2.本次学习营接近尾声了,不得不感叹柿饼实在是太好用了,简单几句代码就能实现想要的效果
0 Z9 s& ?- ^' A* |3.特别期待下一期的和硬件结合的课程
! i, w. I! z! T4 V7 i- J; M
& o" M3 y0 Z! H; r; h9 O2 E
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2018-9-14 16:22:57 | 显示全部楼层
厉害!
使用道具 举报 回复
发表于 2018-9-14 22:54:57 | 显示全部楼层
可以考虑把字体更改下,也把仪表盘的几个图标指示也加上
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表