SignBoard 文档

SignBoard 文档

概述

SignViewBoard 主要是显示字迹

快速使用

接入

import { SignViewBoard } from '@/src/signBoard';

初始化

参数名称	类型	说明
container	HTMLElement	用于显示的 dom 元素(必填)
mode	SignViewBoard.PC_MODE SignViewBoard.MOBILE_MODE	电脑的显示方式：SignViewBoard.PC_MODE（默认值) 手机的显示方式：SignViewBoard.MOBILE_MODE 设置为 MOBILE 的条件下，显示板随着手机的方向作出对应的调整
width	number	显示宽度 设置为 PC 且不指定 width 的条件下，默认值是 500 像素 设置为 MOBILE 且不指定 width 的条件下，默认值则手机屏幕宽度

示例代码

const signViewBoard = new SignViewBoard({
  container: document.getElementById('aos-sign-board'),
  width: 300,
  mode: SignViewBoard.PC_MODE | SignViewBoard.MOBILE_MODE,
});

创建显示板

signViewBoard.createSignBoard

参数名称	类型	说明
width	number	签字板的原始宽度(必填)
height	number	签字板的原始高度(必填)
fakePressure	boolean	是否伪压力（默认值为 true)

示例代码

signViewBoard.createSignBoard(
  {
    width: 1962, //原始的签字板宽度
    height: 763, //原始的签字板高度
  },
  false,
);

写入数据回显字迹

signViewBoard.write

参数名称	类型	说明
points	array	点位数组(必填) 每个点位有五个属性, 作如下说明 p 为模拟压感，s 为状态，t 为时间，x 是横向坐标，y 是纵向坐标

代码示例

signViewBoard.write([
  {
    p: 0.5,
    s: 0,
    t: 0,
    x: 410.1640625,
    y: 289.9609375,
  }, ...
]);

获取签字信息

signViewBoard.getSignInfo

参数名称	类型	说明
points	array	点位信息
dataUrl	string	获取 png 格式的 base64
boardWidth	number	显示板宽度
boardHeight	number	显示板高度
info	object	签字信息（注：不是第一手的原始信息，而是与当前设备有关的信息)

代码示例

document.getElementById('submitBtn').addEventListener('click', () => {
  const e = signViewBoard.getSignInfo();
  console.log(e);

  createElementTo('img', document.body, '', { src: e.dataUrl });
});