更新记录

1.0.3（2021-11-02） 下载此版本

1、解决动画时长与内部setTimeout不一致的问题； 2、优化代码；

1.0.2（2021-11-01） 下载此版本

1、使用二阶贝塞尔曲线来解决菱角问题；

1.0.1（2021-11-01） 下载此版本

1、修改用法，使用v-modal来控制值的变化，用v-if控制组件的创建与销毁，具体看下面的例子； 2、增加支持控制显示与隐藏动画时长；

平台兼容性

uni-app

签名板signBoard

使用说明

<template>
    <view>
        <button type="default" @click="show = !show">签名板</button>
        <signBoard v-model="show" @save="save"></signBoard>
        <image :src="path"></image>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                show: false,
                path:'',
                colorList:['pink','purple','#f90']
            }
        },
        methods: {
            toBoard() {
                uni.navigateTo({
                    url: "/pages/signBoard/signBoard"
                })
            },
            save(e) {
                // console.log(e);
                this.path = e.path
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

感谢

感谢大佬的组件给了一点想法

贝塞尔曲线计算公式

注意

利用moveTo和lineTo会产生菱角，尤其在滑动过快且有转弯的地方觉明显；大佬的组件使用二阶贝塞尔曲线解决了这个问题；