目录

手写签批


手写签批是建立公文编辑器组件基础上,允许用户在公文内容上进行手写、签名、批注、文字输入、擦除的一系列功能。手写签批功能可以直观的展现每位处理人对公文内容的批注,有效的提高办公效率。

手写签批是在公文编辑器正文上创建多个canvas,根据用户的鼠标允许轨迹产生笔迹。

签批界面

手写签批支持PC端和移动端的操作。

点击“手写签批”按钮,可进入签批界面:

效果如下:


移动端界面如下:


展现界面

展现界面根据公文使用的场景不同有两种类型:保存正文内容和不保存正文内容。

使用正文内容为背景

公文正文可能在流程的一些节点被修改,比如发文。这种情况下进行手写签批,需要考虑到正文内容位置的变化对签批内容的影响。我们会把公文正文作为手写签批的背景保存下来,每个处理人的签批分别展现。

PC端如下:

移动端如下:

不使用正文内容为背景

在一些流程中,比如收文,正文内容不会被修改,这个时候可以设置手写签批不保存正文。这种场景下的手写签批文件,系统可以叠加多个签批展现,并会以不同的颜色来区分不同处理人。

PC端如下:

移动端如下:

手写界面相关参数

我们在初始化编辑器的时候可以传入相关的参数来控制手写签批操作条中操作的展现和顺序、画笔的初始粗细和颜色值、橡皮初始大小、字体初始大小及可选值、canvas每页高度。

具体如下面的代码:

const editor = await DocEditor.createEditor(div, {
    //通过base参数配置编辑器路径
    base: './doceditor/',
    handwriting: {                        //手写签批参数
        notice: true,                     //如果提交手写签批的时候,用户当前未打开手写签批,且系统中存在该用户的未提交签批内容,系统是否提示用户打开手写签批
        lineWidth : 1,                   //画笔初始粗细,px
        color : "#000000",               //画笔初始颜色值
        eraserRadiusSize: 20,            //橡皮初始粗细,px

        fontSize: "16",                  //输入法初始字体大小, px
        fontSizeList: ["10", "12", "14", "16", "18", "24", "32", "48"], //字体大小可选值

        pageHeight: 1000,                //每页canvas高度,最后1页取实际高度,需要注意的是不同浏览器对canvas的尺寸都是有不同限制的
        inputEnable: true,               //是否启用输入法功能
        eraserEnable: true,              //是否启用橡皮功能
        tools: [                        //操作条位置和启用操作,|表示分隔线
            "|",
            "undo",                          //撤销
            "redo", "|",                     //重做
            "eraser",                        //橡皮
            "input",                         //输入法
            "pen", "|",                      //笔画
            "eraserRadius",                  //橡皮尺寸
            "size",                          //笔画粗细
            "color",                         //笔画颜色和输入法颜色
            "fontSize", "|",                 //输入法尺寸
            "reset"                          //撤销
        ]
    }
}).load();


签批浏览界面相关参数

我们在初始化编辑器的时候可以传入相关的参数来控制手写签批浏览界面的颜色值可选列表。当签批记录超过该列表长度,系统会产生随机颜色。

具体如下面的代码:

const editor = await DocEditor.createEditor(div, {
  //通过base参数配置编辑器路径
  base: './doceditor/',
  handwritingLog: {                     //手写历史记录界面
    colorList: [                      //不带背景签批记录展现的颜色值列表,当签批记录超过该列表长度,系统会产生随机颜色
      "#00b050","#4f81bd","#BAE637", "#36CFC9",
      "#5C0011", "#1890FF","#135200", "#906EDB",
      "#391085", "#FF85C0","#FA8C16","#061178",
      "#9E1068","#D4380D","#FFD300", "#333333"
    ]
  }
}).load();