广州定制型网站,自做网站,wordpress任意电脑编辑,做网站wordpress这是一个基于HarmonyOS做的一个手写板应用#xff0c;只需要简单的几十行代码#xff0c;就可以实现如下手写功能以及清空画布功能。
一、先上效果图#xff1a; 二、上代码
Entry
Component
struct Index {//手写路径State pathCommands: string ;build() {Column() {//… 这是一个基于HarmonyOS做的一个手写板应用只需要简单的几十行代码就可以实现如下手写功能以及清空画布功能。
一、先上效果图 二、上代码
Entry
Component
struct Index {//手写路径State pathCommands: string ;build() {Column() {//清空画布按钮Button(清空).onClick(() {//将路径置空this.pathCommands ;})Flex() {//如果路径不为空那么展示path路径// stokeWidth(5)表示画笔宽度为5// fill(none)表示填充为空白// stroke(Color.Blue)表示画笔为蓝色if (this.pathCommands ! ) {Path().commands(this.pathCommands).strokeWidth(5).fill(none).stroke(Color.Blue)}}.onTouch((event: TouchEvent) {//响应手势触摸操作this.onTouchEvent(event)}).width(100%).height(100%)}}onTouchEvent(event: TouchEvent) {//手指按下和移动时的位置转换成像素位置let x vp2px(event.touches[0].x);let y vp2px(event.touches[0].y);switch (event.type) {//手指按下case TouchType.Down://眺到x,y)点this.pathCommands M x y;break;//画线到x,y)点case TouchType.Move:this.pathCommands L x y;break;default:break;}}
}
在这个代码中我们构建了一个手势绘图应用。以下是关键部分的解释 Entry和Component注解 这两个注解用于标识这个类是一个入口点并且是一个组件。在HarmonyOS中这是定义页面的标准方式。 State注解 在HarmonyOS中State注解同样用于声明状态。在这里我们声明了一个字符串类型的pathCommands用于存储手势绘制的路径。 build()函数这个函数定义了HarmonyOS页面的结构包括清空按钮和用于展示绘图路径的组件。 onTouchEvent函数 这个函数处理触摸事件根据手指按下和移动的位置将相应的绘制命令添加到路径中实现了手势绘制的功能。
