关于harmonyos:100行代码实现画图应用eTS开发走起

8次阅读

共计 2731 个字符，预计需要花费 7 分钟才能阅读完成。

介绍

2021 年的华为开发者大会 (HDC2021) 上，HarmonyOS 公布了新一代的申明式 UI 框架——方舟开发框架(ArkUI)。ArkUI 框架引入了基于 TS 扩大的申明式开发范式，让开发变得更加简洁、高效！

曾经有很多开发者在应用 eTS(extended TypeScript)语言，基于申明式开发范式开发利用了。本期咱们要介绍的就是 eTS 开发先行者 Rick 的分享——100 行代码实现“画图”利用，带大家一起领略 eTS 语言的简洁之美~

一、实现成果

100 行代码实现的“画图”利用是怎么的？咱们先来看看成果吧：

图 1 实现成果

“画图”利用除了实现必须的画图性能外，还可能设置画笔的色彩和大小，且提供了撤销性能，堪称短小而精美了。你心动了吗？是否也想试试？连忙追随 Rick 的开发过程，也来尝试一下吧！

二、开发过程

装置 DevEco Studio

eTS 开发需装置 DevEco Studio V3.0.0.601 Beta1 或更高版本。
DevEco Studio 下载地址：
https://developer.harmonyos.c…

2. 创立 eTS 工程

(1) 关上 DevEco Studio，在菜单栏抉择“File > New > New Project”。
(2) 抉择工程模板“Empty Ability”，而后点击 Next。

图 2 抉择工程模板
(3) 工程配置时，留神将“Language”配置为“eTS”。

图 3 工程配置
(4) 最初点击 Finish，DevEco Studio 就会主动创立一个 eTS 工程。

三、代码实现

工程创立实现后，能够看到文件目录构造如图 4 所示。其中，“ets”为代码实现目录，申明式 UI 实现的布局及逻辑代码都放在这个目录外面。

图 4 文件目录构造
本次“画图”利用的代码都放在“entry/src/main/ets/default/pages/index.ets”文件中。
残缺的实现代码可从华为开发者论坛获取：

https://developer.huawei.com/…
上面为大家介绍两段要害代码：

(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))
        break
      case 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 开发的学习资源，强烈建议珍藏哦！
申明式语法：
https://developer.harmonyos.c…
组件阐明：
https://developer.harmonyos.c…
欢送更多开发者与咱们共享开发成绩，分享技术解读与教训心得!

正文完