OpenHarmony 多功能手写板

└─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

        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)

        // 计算线条粗细
        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