当前位置:网站首页>#DAYU200体验官# 首页aito视频&Canvas绘制仪表盘(ets)
#DAYU200体验官# 首页aito视频&Canvas绘制仪表盘(ets)
2022-07-06 15:35:00 【51CTO】
目录
0. 说明
OH系统版本:OpenHarmony3.1Release
IDE: 3.0.0.900
实现语言:ets
- APP开屏视频挺常见,dayu200支持视频播放,3.5耳机口也正常输出音频。
- 表盘在现代车机中很常见,样式多,风格迥异,OHOS API8也支持丰富的2D绘图能力,想要绘制表盘还是相对容易的。捣鼓以上两个是为做智能座舱做准备。将二者结合展示如下:
1. 首页视频播放
1.1 Video组件总结
参考地址: 基于TS的Video组件说明
Video开发流程如下:
- 创建视频控制对象:
- 获取视频路径:@State srcs: Resource = $rawfile(‘video1’); 网络视频也可以,需要配置INTERNET权限。值得注意的是,还可访问通过Data Ability提供的视频路径,也就是说分布式视频也可以实现的。
- 设置Video属性:muted(是否静音)、autoPlay(自动播放)、controls(控制栏)、objectFit(显示模式)、loop(是否循环播放)。其中,objectFit参数设置值为ImageFit.Cover则铺满整个容器。
- Video事件:
这里需要注意到,利用onFinish()事件,可以实现当播放完视频后我们可以直接跳跳转到APP内部。
1.2 开屏视频实现
新建一个基于ETS语言的项目,在index.ets中,先创建视频控制对象,以及视频路径。
在Component中的build下创建Video组件,使用Column容器容纳,
然后再页面创建时运行视频控制的start方法
2. Canvas绘制仪表盘
2.1 接口分析
参考地址: 画布组件绘制图像的方法很多,这里主要总结常用的以及仪表绘制用到的。
- 创建CanvasRenderingContext2D对象
- 事件:
onReady(callback: () => void) 画布组件的事件回调,可以在此时进行绘制。 - 属性:
- 提供绘制方法
- 如何让图动起来
可以获取系统时间,或者使用setTime来实现动态刷新图像。看起来图形在动其实只是某些结构在转动、移动或者缩放
- gauge组件
说起绘制仪器表盘,gauge组件其实也常用到。和Text组件一样,gauge已经高度定义,我们只能做简单的定义参数。gauge的使用方法如下:
效果如下:
2.2 绘制表盘
首先创建2D绘制对象,以及用到的变量
然后绘制圆盘与数字:
绘制指针,指针需要旋转一定角度,所以坐标一定要固定好在圆盘中心
表盘效果如下:
使用定时器改变指针旋转角度以及阴影颜色效果,再结合首页视频,得到帖子前面展示的样例。
边栏推荐
猜你喜欢
Improving Multimodal Accuracy Through Modality Pre-training and Attention
Installation and use of labelimg
Mysql 身份认证绕过漏洞(CVE-2012-2122)
欧洲生物信息研究所2021亮点报告发布:采用AlphaFold已预测出近1百万个蛋白质
Slide the uniapp to a certain height and fix an element to the top effect demo (organize)
View
Improving Multimodal Accuracy Through Modality Pre-training and Attention
The SQL response is slow. What are your troubleshooting ideas?
Machine test question 1
手写ABA遇到的坑
随机推荐
OpenNMS separation database
What are the specific steps and schedule of IELTS speaking?
Machine test question 1
const关键字
CSDN 上传图片取消自动加水印的方法
Web APIs DOM 时间对象
Jafka source analysis processor
Extern keyword
Void keyword
Plafond du tutoriel MySQL, bien collecté, regardez lentement
void关键字
signed、unsigned关键字
three. JS gorgeous bubble effect
Clip +json parsing converts the sound in the video into text
POJ 1094 sorting it all out
case 关键字后面的值有什么要求吗?
go多样化定时任务通用实现与封装
That's why you can't understand recursion
【雅思口语】安娜口语学习记录part1
【编译原理】做了一半的LR(0)分析器