OpenHarmony开发者论坛

标题: 应用开发-手写板 [打印本页]
作者: 海浪漂啊漂    时间: 2024-1-14 12:09
标题: 应用开发-手写板
这是一个基于ArkUI开发的手写板应用，只需几十行简洁的代码，即可轻松实现以下手写功能和清空画布的操作。

一、效果图：
(, 下载次数: 0)
二、代码
  1. @Entry
  2. @Component
  3. struct Index {
  4.   //手写路径
  5.   @State pathCommands: string = '';

  7.   build() {
  8.     Column() {
  9.       //清空画布按钮
  10.       Button("清空")
  11.         .onClick(() => {
  12.           //将路径置空
  13.           this.pathCommands = '';
  14.         })
  15.       Flex() {
  16.         //如果路径不为空，那么展示path路径，
  17.         // stokeWidth(5)表示画笔宽度为5，
  18.         // fill('none')表示填充为空白，
  19.         // stroke(Color.Blue)表示画笔为蓝色
  20.         if (this.pathCommands != '') {
  21.           Path().commands(this.pathCommands).strokeWidth(5).fill('none').stroke(Color.Blue)
  22.         }
  23.       }.onTouch((event: TouchEvent) => {
  24.         //响应手势触摸操作
  25.         this.onTouchEvent(event)
  26.       }).width('100%').height('100%')
  27.     }
  28.   }

  30.   onTouchEvent(event: TouchEvent) {
  31.     //手指按下和移动时的位置转换成像素位置
  32.     let x = vp2px(event.touches[0].x);
  33.     let y = vp2px(event.touches[0].y);
  34.     switch (event.type) {
  35.       
  36.       //手指按下
  37.       case TouchType.Down:
  38.       //绘制点移动到（x,y）位置
  39.         this.pathCommands += 'M' + x + ' ' + y;
  40.         break;
  41.             
  42.       //当前位置画线到（x,y）位置
  43.       case TouchType.Move:
  44.         this.pathCommands += 'L' + x + ' ' + y;
  45.         break;
  46.       default:
  47.         break;
  48.     }
  49.   }
  50. }
复制代码
在这个代码中，我们构建了一个手势绘图应用。以下是关键部分的解释：





欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5