批阅笔迹识别

期望支持使用场景

老师根据个人书写习惯录入批阅笔迹，跟具体的批阅结果对应保存，之后批阅笔迹自动识别成批阅结果

批阅笔迹识别.png

背景

不改变老师线下操作习惯，让算法根据个人书写习惯，识别批阅笔迹，得到笔迹结果。

实现效果

微信图片_20211124191126.jpg

微信图片_20211124191136.jpg

微信图片_20211124191143.jpg

微信图片_20211124191151.jpg

设计思路

类似快捷手势（鼠标轨迹）识别软件的功能，先录入保存轨迹图形模板，后续在产生轨迹的情况下，通过坐标系转换、图形变换、斜率向量计算，简单噪声处理等过程判断新轨迹和模板轨迹的离散度，当拟合度高于某个设定阈值时，则判断新轨迹属于模板轨迹，然后触发模板轨迹的对应处理事件逻辑

算法逻辑

微信图片_20211125180156.png

具体代码实现

坐标系转换

  // 坐标系转换
  changXY(strokes, zoom) {
    let {
      zoomX,
      zoomY
    } = zoom
    let zoomPos = strokes.map(p => {
      return {
        ...p,
        x: Number((p.x / zoomX).toFixed(2)),
        y: Number((p.y / zoomY).toFixed(2))
      }
    })
    let p = zoomPos.map(p => {
      return {
        ...p,
        x: Number((p.x - zoomPos[0].x).toFixed(2)),
        y: Number((p.y - zoomPos[0].y).toFixed(2))
      }
    })

    let obj = {};
    let newPos = p.reduce((cur, next) => {
      obj[next.x] ? 0 : obj[next.x] = true && obj[next.y] ? 0 : obj[next.y] = true && cur.push(next);
      return cur;
    }, [])
    return newPos
  },

图形平移

  // 平移模板
  changePattenXY(patten) {
    let p = patten.map(p => {
      return {
        ...p,
        x: p.x - patten[0].x,
        y: p.y - patten[0].y
      }
    })

    let obj = {};
    let newPos = p.reduce((cur, next) => {
      obj[next.x] ? 0 : obj[next.x] = true && obj[next.y] ? 0 : obj[next.y] = true && cur.push(next);
      return cur;
    }, [])
    return newPos
  }

计算斜率，判断点在不在线段上

 findPreNextPoint(patten, checkPoint, cp) {
    let _that = this
    let dotOnLine = false
    for (let i = 0; i < patten.length - 1; i++) {
      let result = _that.checkOneLine(patten[i], patten[i + 1], checkPoint)
      if (result < 1) {
        dotOnLine = true
        break
      }
    }
    console.log('dotOnLine', dotOnLine)
    sumResult = sumResult + (dotOnLine ? 1 : 0)
  }
  
// 计算斜率
  checkOneLine(point1, point2, checkPoint) {
    let k1 = 999999999
    let k2 = 999999999
    if (point2.x - point1.x !== 0 && point2.x - checkPoint.x !== 0) {
      k1 = Number((point2.y - point1.y) / (point2.x - point1.x).toFixed(2))
      k2 = Number((point2.y - checkPoint.y) / (point2.x - checkPoint.x).toFixed(2))
    }
    if (Math.abs(checkPoint.x - point1.x) <= Math.abs(point2.x - point1.x)) {
      return Number(Math.abs(k2 - k1).toFixed(2))
    } else {
      return 999
    }
  }

未尽事宜及可行优化项

目前只做了单笔/轨迹的简单图形（批阅笔迹大多是这类轨迹），多笔轨迹后续花时间想想算法实现
可用于大屏的手势识别（多点触碰费脑，还没想）
算法精度，只可意会，没有实际数据