HarmonyOS应用开发-手写板

news2024/12/26 21:16:31

        这是一个基于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;
    }
  }
}

在这个代码中,我们构建了一个手势绘图应用。以下是关键部分的解释:

  1. @Entry和@Component注解: 这两个注解用于标识这个类是一个入口点并且是一个组件。在HarmonyOS中,这是定义页面的标准方式。

  2. @State注解: 在HarmonyOS中,@State注解同样用于声明状态。在这里,我们声明了一个字符串类型的pathCommands,用于存储手势绘制的路径。

  3. build()函数:这个函数定义了HarmonyOS页面的结构,包括清空按钮和用于展示绘图路径的组件。

  4. onTouchEvent函数: 这个函数处理触摸事件,根据手指按下和移动的位置,将相应的绘制命令添加到路径中,实现了手势绘制的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1303007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HCIA-H12-811题目解析(10)

1、【单选题】DHCP客户端在租期到达哪个比例时第一次发送续租报文? 2、【单选题】在WLAN中用于标识无线网络, 区分不同的无线网络的是? 3、【单选题】我们在笔记本电脑上搜索可接入无线网络时,显示出来的网络名称实际是 4、【单…

leetcode 904. 水果成篮(优质解法)

代码: class Solution {public int totalFruit(int[] fruits) {int lengthfruits.length;int []fruitNumsnew int[length1]; //用于记录各个种类摘了多少个水果int count0; //用于记录当前采摘了几种水果int sum0; //用于记录当前共摘了多少水果for(int left0…

mmseg上手自己的数据集

制作自己的数据集,VOC格式为例。 这三个文件包括数据集的名称。可以使用labelme脚本自动生成。 跟据预测类别修改配置文件 D:\projects\mmsegmentation-main\mmseg\datasets\voc.py 因为是voc格式的数据集,在这个文件里进行配置,修改成自己数…

at least 1 bean which qualifies as autowire candidate

No qualifying bean of type com. spdbcccdl.mapper.dl.DatabaseDaoavailable: expected at least 1 bean which qualifies as autowire candidate.

《PySpark大数据分析实战》-02.了解Hadoop

📋 博主简介 💖 作者简介:大家好,我是wux_labs。😜 热衷于各种主流技术,热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员(PCTA)、TiDB数据库专家(PCTP…

PC 机与单片机通信(RS232 协议)

PC 机与单片机通信(RS232 协议) 目录: 1、单片机串口通信的应用 2、PC控制单片机IO口输出 3、单片机控制实训指导及综合应用实例 4、单片机给计算机发送数据: [实验任务] 单片机串口通信的应用,通过串口,我们的个人电脑和单…

智能优化算法应用:基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.阴阳对算法4.实验参数设定5.算法结果6.参考文…

搜集怎么绘制三维曲线和曲面?

1、针对函数对象是单一变量、两个函数的情况。用plot3函数;(三维曲线) 看一下matlab官方的例子: t 0:pi/50:10*pi; st sin(t); ct cos(t); plot3(st,ct,t) 绘制出来的曲线: 几个比较关键的点: &…

手把手教你玩转ESP8266(原理+驱动)

在嵌入式开发中,无线通信的方式有很多,其中 WIFI 是绕不开的话题。说到 WIFI 通信,就不得不提 ESP8266了。 ESP8266 是一款高性能的 WIFI 串口模块,实现透明传输。只要有一定的串口知识,不需要知道 WIFI 原理就可以上…

数据结构:第13关:查找两个单词链表共同后缀的起始结点

任务描述编程要求 输入输出测试说明来源 任务描述 本关任务:假定采用带头结点的单链表保存单词,当两个单词有相同的后缀时,则可共享相同的后缀空间。 例如,“loading”和“being”的存储映像如下图所示: 设str1和str2…

论文阅读《Domain Generalized Stereo Matching via Hierarchical Visual Transformation》

论文地址:https://openaccess.thecvf.com/content/CVPR2023/html/Chang_Domain_Generalized_Stereo_Matching_via_Hierarchical_Visual_Transformation_CVPR_2023_paper.html 概述 立体匹配模型是近年来的研究热点。但是,现有的方法过分依赖特定数据集上…

使用 PyTorch FSDP 微调 Llama 2 70B

通过本文,你将了解如何使用 PyTorch FSDP 及相关最佳实践微调 Llama 2 70B。在此过程中,我们主要会用到 Hugging Face Transformers、Accelerate 和 TRL 库。我们还将展示如何在 SLURM 中使用 Accelerate。 完全分片数据并行 (Fully Sharded Data Paral…

游戏中小地图的制作__unity基础开发教程

小地图的制作 Icon标识制作制作摄像机映射创建地图UI效果“不一样的效果” 在游戏中经常可以看到地图视角的存在,那么地图视角是如何让实现的呢? 这一期教大家制作一个简易的小地图。 💖点关注,不迷路。 老样子,我们还…

使用MfgTool烧写前需准备的文件

一. 简介 本文我们就来学习,如何将我们编译的 uboot,zImage(内核镜像),xxx.dtb设备树文件,还有制作的根文件系统,这四个文件烧写到开发板中,最后 开发板能正常启动。 本文这里使用…

Linux实用操作篇-下篇

Linux实用操作篇-上篇:Linux实用操作-上篇-CSDN博客 一、网络传输 1.1 ping命令 网络是否可联通 可以通过ping命令,检查指定的网络服务器是否是可联通状态 语法: ping [-c num] ip或主机名 选项:-c,检查的次数,…

# 一些视觉-激光、加速度传感器类的铣削振动测试方法案例

一些视觉-激光类的铣削振动测试方法 1. 基于激光测振仪的振动测试2. 切削加工的 加速度传感器实测信号2.1 x轴向信号2.2 Y轴向信号2.3 第二次廊坊实验3. 关于数值频域积分1. 基于激光测振仪的振动测试 【1】舜宇LDV|激光测振—机床铣刀寿命预测 新刀具为100hz主频 旧刀具为800…

多源异构数据融合是什么,在进行故障预测、诊断、辨识的时候有什么有优点和缺点!

文章目录 1、多源异构数据融合是什么2、多源异构数据融合的优点主要包括:3、多源异构数据融合进行故障辨识的缺点 1、多源异构数据融合是什么 多源异构数据融合是将来自于不同设备、传感器、系统或网络等多个数据源的数据进行整合并综合分析处理的一种技术。这种数…

AcWing 95. 费解的开关(递推)

题目链接 活动 - AcWing 本活动组织刷《算法竞赛进阶指南》,系统学习各种编程算法。主要面向有一定编程基础的同学。https://www.acwing.com/problem/content/97/ 题解 只要第一行开关的状态确定,则所有开关的状态都可以被推出来。第一行开关总共有种操…

了解 git rebase

了解 git rebase 大多数人习惯使用 git merge 将更改从功能分支合并到主分支,但还有其他方法。我们是否曾经遇到过 git rebase 这个术语并想知道它是什么?或者我们可能听说过 rebase 和 merge ,但不确定何时使用哪个?不用担心&am…

Axure的安装及基本功能介绍

目录 一. Axure概述 二. Axure安装 2.1 安装包下载 2.2 安装步骤 三. Axure功能介绍​ 3.1 工具栏介绍 3.1.1 复制,剪切及粘贴 3.1.2 选择模式和连接 3.1.3 插入形状 3.1.4 点(编辑控点) 3.1.5 置顶和置底 3.1.6 组合和取消组合 …