docs/writingPad/README.md · wanjie/knowledge_demo_temp

#  OpenHarmony 多功能手写板

## 一、简介

[本Demo](../../FA/writingPad)是基于OpenHarmony3.2 Beta1，使用js语言编写的应用。用户可以使用该应用能在设备上临摹、绘画、做笔记。

#### 1.效果展示

视频地址：[基于OpenHarmony的多功能手写板_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1da411R76G/?spm_id_from=333.999.0.0&vd_source=d9be34bb05ccdbfa6d92285af7480048)

#### 2.涉及OpenHarmony技术特性

- JS UI
- Canvas 组件

####  3.支持OpenHarmony版本

OpenHarmony 3.0 LTS

## 二、快速上手

####  1、标准设备环境准备

以润和大禹系列HH-SCDAYU200开发板套件为例

- [开发板上新 | RK3568开发板上丝滑体验OpenHarmony标准系统](https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/dev/docs/rk3568_quick_start)

####  2、应用编译环境准备

- 下载DevEco Studio [下载地址](https://gitee.com/link?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdevelop%2Fdeveco-studio%23download_beta)；
- SDK 版本 ：OpenHarmony SDK API 8，请参考[配置OpenHarmony SDK](https://gitee.com/openharmony/docs/blob/update_master_0323/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md)，完成**DevEco Studio**的安装和开发环境配置。

#### 3、项目下载和导入

- 项目下载

`git clone git@gitee.com:openharmony-sig/knowledge_demo_temp.git --depth=1`

- 项目导入

打开DevEco Studio,点击File->Open->下载路径/FA/writingPad

```
└─src
    ├─main
    │  │  config.json // 应用配置文件
    │  │  
    │  ├─js
    │  │  └─MainAbility
    │  │      │  app.js // 应用程序主入口
    │  │      │  
    │  │      ├─common
    │  │      │  ├─components
    │  │      │  │  ├─Draw // 绘画模块
    │  │      │  │  │      index.css
    │  │      │  │  │      index.hml
    │  │      │  │  │      index.js
    │  │      │  │  │      
    │  │      │  │  ├─layout // tab栏
    │  │      │  │  │      layout.css
    │  │      │  │  │      layout.hml
    │  │      │  │  │      layout.js
    │  │      │  │  │      
    │  │      │  │  ├─Note // 笔记模块
    │  │      │  │  │      index.css
    │  │      │  │  │      index.hml
    │  │      │  │  │      index.js    
    │  │      │  │  │       
    │  │      │  │  └─Write // 练字模块
    │  │      │  │          index.css
    │  │      │  │          index.hml
    │  │      │  │          index.js
    │  │      │  │          
    │  │      │  └─images     
    │  │      └─pages
    │  │          └─index // 首页
    │  │                  index.css
    │  │                  index.hml
    │  │                  index.js
    │  │                  
    │  └─resources
    │      ├─base
    │      │  ├─element
    │      │  │      color.json
    │      │  │      string.json
    │      │  │      
    │      │  └─media
    │      │          icon.png
    │      │          
    │      └─rawfile
```

## 三、关键代码解读

#### 1.绘制原理

>使用前，需要线了解canvas组件，可以参考[OpenHarmony开发者文档](https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/reference#/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/Readme-CN.md)

首先，我们需要将canvas上下文对象，需要在触摸移动事件中绑定，因为我们是通过触摸来生成对应线条的。

绘制直线，通常使用moveTo ()与lineTo ()两个方法。. moveTo ()方法用于将画笔移至指定点并以改点为直线的开始点，lineTo ()则为结束点。

```
        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        // 向线条的每个末端添加圆形线帽。
        this.ctx.lineCap = 'square'
        // 每次将数组中最后一个值取出，作为起始点
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
```

将数组中的最后一个值取出，作为moveTo的坐标，将鼠标移动后的点作为lineTo的坐标，然后再通过stroke就能绘制出图像。

#### 2.线条粗细

> 想要通过速度来计算线条粗细，那么可以是需要获取两点之间的时间，通过时间和距离得到速度

当触发touchmove事件，将当前时间戳存储起来，通过上一次触发事件获得的时间-当前触发事件获得的时间，就可以得到两次触发事件的事件间隔，此时我们就获得了两点之间的时间

再计算两点之间的距离（平方和再开根号），通过 `路程/时间 = 速度`计算出两点之间的速度，从而可以动态生成线条粗细

```
        // 计算线条粗细
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            // 传入倒数第二个点和最后一个点，和持续时间，会返回加速度
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

```

wanjie/knowledge_demo_temp

简介

发行版

贡献者

近期动态

wanjie/knowledge_demo_temp .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wanjie/knowledge_demo_temp