当前位置:网站首页>Dayu200 experience officer homepage AITO video & Canvas drawing dashboard (ETS)
Dayu200 experience officer homepage AITO video & Canvas drawing dashboard (ETS)
2022-07-06 22:51:00 【51CTO】
Catalog
0. explain
OH System version :OpenHarmony3.1Release
IDE: 3.0.0.900
Implement language :ets
- APP Open screen videos are quite common ,dayu200 Support video playback ,3.5 The headphone port also outputs audio normally .
- Dial is very common in modern cars , There are many styles , Different style ,OHOS API8 It also supports rich 2D Drawing ability , It is relatively easy to draw the dial . The above two are to prepare for the smart cockpit . The combination of the two is shown below :
1. Homepage video playback
1.1 Video Component summary
Reference address : be based on TS Of Video Component description
Video The development process is as follows :
- Create a video control object :
- Get the video path :@State srcs: Resource = $rawfile(‘video1’); Network video can also , Need configuration INTERNET jurisdiction . It is worth noting that , You can also visit through Data Ability Video path provided , That is to say, distributed video can also be realized .
- Set up Video attribute :muted( Is it mute? )、autoPlay( Auto play )、controls( Control bar )、objectFit( display mode )、loop( Loop or not ). among ,objectFit The parameter setting value is ImageFit.Cover Then spread the whole container .
- Video event :
It needs to be noted that , utilize onFinish() event , It can realize that after playing the video, we can jump directly to APP Inside .
1.2 Open screen video implementation
Create a new one based on ETS Language project , stay index.ets in , First create a video control object , And video path .
stay Component Medium build Create Video Components , Use Column The container holds ,
Then run the video control when creating the page start Method
2. Canvas Draw dashboard
2.1 Interface Analysis
Reference address : Canvas components There are many ways to draw images , Here we mainly summarize the commonly used and used in instrument drawing .
- establish CanvasRenderingContext2D object
- event :
onReady(callback: () => void) Event callback of canvas component , You can draw at this time . - attribute :
- Provide drawing methods
- How to make the graph move
You can get the system time , Or use setTime To dynamically refresh the image . It seems that the figure is moving, but in fact, some structures are rotating 、 Move or zoom
- gauge Components
Speaking of drawing instrument dial ,gauge Components are also commonly used . and Text Like components ,gauge Highly defined , We can only define parameters simply .gauge Is used as follows :
The effect is as follows :
2.2 Draw a dial
First create 2D Draw objects , And the variables used
Then draw the disc and numbers :
Draw pointer , The pointer needs to rotate a certain angle , So the coordinates must be fixed in the center of the disc
The effect of the dial is as follows :
Use the timer to change the pointer rotation angle and shadow color effect , Combined with the homepage video , Get the sample shown in front of the post .
Want to know more about open source , Please visit :
边栏推荐
- TypeScript获取函数参数类型
- MySQL教程的天花板,收藏好,慢慢看
- UVa 11732 – strcmp() Anyone?
- [untitled]
- UVa 11732 – strcmp() Anyone?
- Detailed explanation of ThreadLocal
- 存币生息理财dapp系统开发案例演示
- [step on pit collection] attempting to deserialize object on CUDA device+buff/cache occupy too much +pad_ sequence
- Word2vec (skip gram and cbow) - pytorch
- Jafka source analysis processor
猜你喜欢
Web APIs DOM time object
Signed and unsigned keywords
Thinkphp5 multi table associative query method join queries two database tables, and the query results are spliced and returned
Machine test question 1
欧洲生物信息研究所2021亮点报告发布:采用AlphaFold已预测出近1百万个蛋白质
【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件
European Bioinformatics Institute 2021 highlights report released: nearly 1million proteins have been predicted by alphafold
DR-Net: dual-rotation network with feature map enhancement for medical image segmentation
Les entreprises ne veulent pas remplacer un système vieux de dix ans
Slide the uniapp to a certain height and fix an element to the top effect demo (organize)
随机推荐
2014 Alibaba web pre intern project analysis (1)
MySQL教程的天花板,收藏好,慢慢看
Jafka来源分析——Processor
Balanced Multimodal Learning via On-the-fly Gradient Modulation(CVPR2022 oral)
Project duplicate template
Plafond du tutoriel MySQL, bien collecté, regardez lentement
#DAYU200体验官# 首页aito视频&Canvas绘制仪表盘(ets)
C three ways to realize socket data reception
Export MySQL table data in pure mode
On file uploading of network security
Web APIs DOM time object
动作捕捉用于蛇运动分析及蛇形机器人开发
Machine test question 1
MySQL教程的天花板,收藏好,慢慢看
Windows Auzre 微软的云计算产品的后台操作界面
config:invalid signature 解决办法和问题排查详解
Inno setup packaging and signing Guide
[IELTS speaking] Anna's oral learning record part1
Signed and unsigned keywords
面试题:AOF重写机制,redis面试必问!!!