更新记录

1.0.0（2022-02-03） 下载此版本

1.0.0

平台兼容性

drawingBoard 手写签名

快速使用

<template>
    <drawing-board ref="drawingBoard" canvasWidth="100vw"></drawing-board>
</template>
<script>
import drawingBoard from "@/components/drawingBoard.vue"
    export default {
            components: {
                drawingBoard
            },
    }
</script>

API

属性 (Props)

this.$refs['xxx'].canvasContext 拿到 uni.createCanvasContext创建的...

动态修改线条宽度和颜色不起效果，可以通过this.$refs['xxx'].canvasContext 拿到canvas对象修改，或者自行修改一下本插件

方法（function） 通过 this.$refs['xxx'] 调用

画板清空、回撤、保存示例：

<template>
    <drawing-board ref="drawingBoard" canvasWidth="100vw"></drawing-board>
    <button @click="$refs['drawingBoard'].retracement()">回撤</button>
    <button @click="$refs['drawingBoard'].clear()">清空</button>
    <button @click="save">保存</button>
</template>
<script>
    export default {
        methods: {
            save() {
              this.$refs['drawingBoard'].save((res) => {
                console.log(res)
              })
            }
        }
    }
</script>