100行代码实现HarmonyOS“画图”应用,eTS开发走起
本期我们给大家带来的是“画图”应用开发者Rick的分享,希望能给你的HarmonyOS开发之旅带来启发~
介绍
2021年的华为开发者大会(HDC2021)上,HarmonyOS 发布了新一代的声明式UI框架——方舟开发框架(ArkUI)。ArkUI框架引入了基于TS扩展的声明式开发范式,让开发变得更加简洁、高效!
已经有很多开发者在使用eTS(extended TypeScript)语言,基于声明式开发范式开发应用了。本期我们要介绍的就是eTS开发先行者Rick的分享——100行代码实现“画图”应用,带大家一起领略eTS语言的简洁之美~
一、实现效果
100行代码实现的“画图”应用是怎样的?我们先来看看实现效果吧:
图1 实现效果
“画图”应用除了实现必须的画图功能外,还能够设置画笔的颜色和大小,且提供了撤销功能,可谓短小而精美了。你心动了吗?是否也想试试?赶紧跟随Rick的开发过程,也来尝试一下吧!
二、开发过程
1. 安装DevEco Studio
eTS开发需安装DevEco Studio V3.0.0.601 Beta1或更高版本。
DevEco Studio下载地址:华为操作系统DevEco Studio和SDK下载与升级 | HarmonyOS开发者
2. 创建eTS工程
(1) 打开DevEco Studio,在菜单栏选择“File > New > New Project”。
(2) 选择工程模板“Empty Ability”,然后点击Next。
图2 选择工程模板
(3) 工程配置时,注意将“Language”配置为“eTS”。
图3 工程配置
(4) 最后点击Finish,DevEco Studio就会自动创建一个eTS工程。
3. 代码实现
工程创建完成后,可以看到文件目录结构如图4所示。其中,“ets”为代码实现目录,声明式UI实现的布局及逻辑代码都放在这个目录里面。
图4 文件目录结构
本次“画图”应用的代码都放在“entry/src/main/ets/default/pages/index.ets”文件中。
完整的实现代码可从华为开发者论坛获取:
华为开发者论坛
下面为大家介绍两段关键代码:
(1) 画图功能实现代码
// 画布@Builder Canvas() {ForEach(this.pathInfoArray, (pathInfo) => OnePath({ pathInfo: pathInfo })) // 遍历构建所有画图路径Stack() // 覆盖层,用于接收触摸事件,实现画图.width('100%').height('100%').onTouch((event: TouchEvent) => {switch (event.type) {case TouchType.Down: // 按下时,新建一条画图路径this.pathInfoArray.push(new PathInfo(`M${event.touches[0].x} ${event.touches[0].y}`, this.paintSize, this.paintColor))breakcase TouchType.Move: // 移动或抬起时,补充画图路径信息case TouchType.Up:this.pathInfoArray[this.pathInfoArray.length-1].commands += `L${event.touches[0].x} ${event.touches[0].y}`break}})}
以上代码通过Canvas组件定义画布,再通过onTouch组件监听触摸事件实现了画图功能。
(2) “设置画笔”的界面和功能实现代码
// 设置画笔组件@Builder SetPaint() {Panel(this.showSetPaint) {Column({ space: 30 }) {Row() {Text('画图效果:')Path().width(200).height(50).backgroundColor(Color.White).fillOpacity(0) // 不填充,只要stroke.commands(`M${vp2px(10)} ${vp2px(10)} S${vp2px(100)} ${vp2px(70)} ${vp2px(190)} ${vp2px(10)}`) // stroke路径,弧线.strokeWidth(this.paintSize) // stroke宽度.stroke(this.paintColor) // stroke颜色}Row() {Text('画笔大小:')Slider({ value: this.paintSize, min: this.PAINT_SIZE_MIN, max: this.PAINT_SIZE_MAX }).onChange((value) => this.paintSize = value) // 改变画笔大小.width(200)}Row() {Text('画笔颜色:')ForEach(this.COLORS, color => {Stack() {Stack().width(color == this.paintColor ? 26 : 20) // 若是当前画笔颜色,则放大一点显示.height(color == this.paintColor ? 26 : 20).backgroundColor(color).onClick(() => this.paintColor = color) // 点击改变画笔颜色}.width(32).height(32)})}}.width('100%').margin({ top: 30 })}.onChange((value: any) => {if (value.mode == 'mini') { // 最小显示状态时隐藏,不隐藏会阻挡触摸事件this.showSetPaint = false}})}
以上代码通过Panel、Column和Row等容器组件实现了“设置画笔”界面的布局。
此界面包含三个部分:画笔颜色、画笔大小和画图效果。代码中,通过Stack组件展示画笔的颜色,通过Slider组件调整画笔大小,通过Path组件绘制弧线来展示画图效果。最终实现效果如图5所示。
图5 “设置画笔”界面
至此,“画图”应用就开发完成啦!感兴趣的小伙伴也可以去尝试开发哦~
三、学习资源
使用eTS语言开发,仅用短短100行左右的代码就实现了“画图”应用的界面和功能。这正是eTS语言的魅力所在——简洁、高效!感兴趣的小伙伴也赶紧加入我们,开启你的eTS开发之旅吧~
我们为大家汇总了以下eTS开发的学习资源,强烈建议收藏哦!
声明式语法:
文档中心
组件说明:
文档中心
欢迎更多开发者与我们共享开发成果,分享技术解读与经验心得!
100行代码实现HarmonyOS“画图”应用,eTS开发走起相关推荐
- 100行代码搞定实时视频人脸表情识别(附代码)
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|OpenCV学堂 好就没有写点OpenCV4 + Open ...
- Android鬼点子 100行代码,搞定柱状图!
最近,项目中遇到一个地方,要用到柱状图.所以这篇文章主要讲怎么搞一个柱子. 100行代码,搞定柱状图! 我的印象中柱子是这样的. 恩,简单,一个View直接放到xml,搞定! 但,设计师给的柱子是这样 ...
- SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
- 100行代码让您学会JavaScript原生的Proxy设计模式
面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了. 其实和Java一样,JavaScript从语言层面来讲,也提供了对代理这个设计模式的原生支持.我们用一个不到100行代码的 ...
- react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
- 100行代码实现最简单的基于FFMPEG+SDL的视频播放器
简介 FFMPEG工程浩大,可以参考的书籍又不是很多,因此很多刚学习FFMPEG的人常常感觉到无从下手.我刚接触FFMPEG的时候也感觉不知从何学起. 因此我把自己做项目过程中实现的一个非常简单的视频 ...
- 用python画苹果的logo_简单几步,100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 简单几步,100行代码用Python画一个蝙蝠侠的logo-1.jpg (35.33 KB, 下载次数: 0) 2020-7-30 12:04 上传 蝙蝠侠作为DC漫画的核心 ...
- WebServer应用示例:不到100行代码玩转Siri语音控制 | ESP32轻松学(Arduino版)
ESP32轻松学系列文章目录: ESP32 概述与 Arduino 软件准备 蓝牙翻页笔(PPT 控制器) B 站粉丝计数器 Siri 语音识别控制 LED 灯 Siri 语音识别获取传感器数据 本期 ...
- 100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
- PONG - 100行代码写一个弹球游戏
大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏 游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...
最新文章
- Datawhale组队学习周报(第012周)
- 利用OLED构成可控点光源: SSD1306
- AngularJS模块——module
- 「神策 2020 数据驱动用户大会」10 月 13 日即将开幕,5 大亮点提前解锁!
- HDFS的副本存放策略(机架感知策略)
- linux操作系统之终端
- 【转】ARM 之七 主流编译器(armcc、iar、gcc for arm、LLVM(clang))详细介绍
- 【华为云技术分享】大数据实践解析(下):Spark的读写流程分析
- 基于JAVA+SpringMVC+Mybatis+MYSQL的药店门店管理系统
- python函数命名空间_python (函数命名空间和作用域)
- 7.PL_SQL——在PL_SQL程序中内嵌查询语句、DML语句、事物处理语句和游标属性
- 史上最全网易云音乐的API接口
- 【原创】 禁用ctfmon.exe 禁止ctfmon.exe自动启动
- 华为选用ServiceHot ITSM提升运维服务能力
- 塔望 · 食界人物|中国功能饮料A股第一股东鹏饮料创始人林木勤
- pfx格式密钥库修改密码
- c++多线程 CMakeLists设置
- 联想天逸310-15ikb装固态内存和重装系统
- mysql 列转行union all_sql:mysql:列转行(转为多个字段)
- Point(类与构造) C++