更新记录

0.1.1（2021-11-03）

1. 修复依赖关系
2. 主要提醒下:Vue2编译一切正常，Vue3支持renderjs不全面，同步功能在Vue3中可能不正常，其它功能没影响
3. 代码可参考示例项目，后端代码是基于gateway-worker实现的，下载后端

0.1.0（2021-11-03）

1. 同步实现以前是基于goeasy，现在更改为基于自己实现的workerman，自主性更强

0.0.9（2021-08-09）

1. 增加了自动保存属性auto-mode，可自动保存为image或data,前者是临时地址，后者是画面原始数据，可动态重现
2. 增加了save保存事件，saveall保存所有事件，page翻页事件和autosave自动保存事件，可灵活获取画布数据

平台兼容性

wxy-signature 介绍

组件来源

项目中要使用白板上课,在插件市场中搜索了不少,开始接触的是陌上华年大神的写字板，不过在使用过程中发现没有案例，更大问题是回退时发现闪屏，这样体验非常不好，最后找到不错另款手写板、签字板，本插件正是基于它改进而来，这里非常感谢原作者，本插件目标是

• [√]开箱即用的白板，如画笔类型、大小、颜色、虚线、背景色、插入图片、插入文本，可分页，可回退、清空和保存
• [√]可通过属性控制菜单按钮
• [×]曲线优化为贝塞尔曲线,参考陌上年华的写字板中代码进行优化
• [×]支持模拟压感
• [×]APP与H5画笔同步,目前方案是基于webrtc实现,webrtc建立以前是goeasy(wxy-signature2.vue)，现在更改为自己基于workerman实现的(wxy-signature.vue)

虽然本插件是基于原作者插件，但改动比较大，主要有以下几个方面

• 缓存数据格式：原作者是三维数组，只能保存点信息，而白板即要保存背景色，还要保存每种画笔类型等信息，所以对缓存数据格式进行了改进
  1. 一级成员是对象,两个成员bgColor和data，前者是背景色，后者是当前画布数据
  2. 二级成员即是一级data,数组类型，每个成员还是对象，包括当前画面中每次画笔信息，如类型(type)、类型相关参数和点数据(points)
  3. 三级成员就是二级points，它每个成员是数组，即x,y坐标值
• 重写了各API，支持各种画笔类型,修复了原API不合理部分

基本使用

<template>
    <view class="container">
        <wxy-signature ref="signature" menu-flag page-flag @save="save" @saveall="saveall"></wxy-signature> 
    </view>
</template>
<script>
export default {
    methods: {
        save() {
            // 保存当前画布
            this.$refs.signature.save().then(res => {
                console.log(res.tempFilePath);
            });
        },
        saveall() {
            // 保存所有画布
            this.$refs.signature.saveAll().then(res => {
                console.log(res);
            });
        }
    }
};
</script>

同步示例

<template>
    <view class="container">
        <wxy-signature ref="signature" :label="label" menu-flag page-flag @save="save" @saveall="saveall"></wxy-signature>
    </view>
</template>
<script>
export default {
    data() {
        return {
            label:'mysignatrue-sync',
        };
    },
    onLoad(options){
        let message = { type: 'login',data: {} };
        message.data.mid = this.label;
        this.$socket.send(message);
    },
    methods: {
        save() {
            // 保存当前画布
            this.$refs.signature.save().then(res => {
                console.log(res.tempFilePath);
            });
        },
        saveall() {
            // 保存所有画布
            this.$refs.signature.saveAll().then(res => {
                console.log(res);
            });
        }
    }
};
</script>

操作说明

1. 画笔可选曲线,直线,矩形,圆形和文本,曲线即自由画笔，而直线、矩形、圆形需要起始点和终点,使用是相同，只是根据选择画笔类型绘画相应的形状
2. 文本时，点击即可输入文本，未确认前，可通过再次点击调整位置，确认后将无法改变位置
3. 虚线是画笔的状态，默认是实线，若是选择虚线，则直线、矩形、圆形将以虚线呈现，曲线也可虚线，但要掌握一定的技巧
4. 大小和颜色就是画笔的粗细和颜色
5. 插入图片时，先要按矩形方式选择范围，然后将图片插入相应范围内,图片将按最大一边进行缩放
6. 背景色可选白色、黑色和透明
7. 页码组可向前翻页，向后翻页，加减页
8. 清空操作时，单击是清除当前画布，长按则清除所有缓存数据并重置为1页
9. 保存操作时，单击是保存当前画布，长按则保存所有缓存中画布

基本属性

事件

API

在父级页面中使用ref获取到组件实例，可调用的几个方法

• init 保存当前画板到缓存,清空画板,可通过回退恢复
• back 回退上一步:若是清除画布则从缓存中恢复，若是当前画布有则退回上一步
• save 保存当前内容为图片,Promise调用方式
• saveData 返回指定页画面原始数据
• saveCache 保存当前画布背景和内容到缓存
• restoreCache 从缓存中恢复画板背景和内容
• clearCache 清空缓存中所有数据,需要通过用户确认，若是清空则页码为1
• saveAll 保存所有缓存的画布,要注意此时是同步操作,保存是依次恢复画面，时间可能比较长，推荐save单画布保存

注意事项

1. save方法的参数是options对象: 详情参考uniapp官方文档

   const options = {
       x,
       y,
       width,
       height,
       destWidth,
       destHeight,
       fileType,
       quality
   } // 就这几个属性，其他的不要传；这些属性都有默认值，所以一般不用传options参数,直接调save()就可以了
   this.$refs.signature.save(options).then(res => {
       console.log('保存图片的地址', res.tempFilePath)
   })

2. saveCache方法的第一个参数为key，之后需要恢复画布内容就会用到对应的key；方法使用ES6的Map来实现，所以key的类型可以随便定义无所谓；第二个参数为保存后是否清空画布，默认为true

   const globalKey = Symbol('画布第一页的内容')
   this.$refs.signature.saveCache(globalKey)

3. restoreCache方法使用key来恢复画布内容

   this.$refs.signature.restoreCache(globalKey) // globalKey是上一步保存用的key