LimeSignature 写字板

一款用于业务签名等场景的写字板插件，支持横屏、压感模拟、撤销/重做等功能。

文档链接

📚 详细文档请访问以下站点：

• signature 文档 - 站点1
• signature 文档 - 站点2
• signature 文档 - 站点3

安装方法

1. 在 uni-app 中搜索并导入 LimeSignature
2. 导入后可能需要重新编译项目。

代码演示

基本用法

<view style="width: 750rpx ;height: 750rpx;">
	<l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
</view>
<view>
	<button @click="onClick('clear')">清空</button>
	<button @click="onClick('undo')">撤消</button>
	<button @click="onClick('save')">保存</button>
	<!-- uvue 不支持 openSmooth -->
	<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

Uniapp

export default {
	data() {
		return {
			title: 'Hello',
			penColor: 'red',
			penSize: 5,
			url: '',
			openSmooth: true
		}
	},
	methods: {
		onClick(type) {
			 if(type == 'openSmooth') {
				 this.openSmooth = !this.openSmooth
				 return
			 }
			if (type == 'save') {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						this.url = res.tempFilePath
					}
				})
				return
			}
			if (this.$refs.signatureRef)
				this.$refs.signatureRef[type]()
		}
	}
}

Uniappx

import {LimeSignatureToTempFilePathOptions, LimeSignatureToFileSuccess} from '@/uni_modules/lime-signature'
export default {
	data() {
		return {
			title: 'Hello',
			penColor: 'red',
			penSize: 5,
			url: '',
			openSmooth: true
		}
	},
	methods: {
		onClick(type: string) {
			const signatureRef = this.$refs['signatureRef'] as LSignatureComponentPublicInstance
			// APP 不支持
			// #ifndef APP 
			 if(type == 'openSmooth') {
				 this.openSmooth = !this.openSmooth
			 }
			 // #endif
			if (type == 'save') {
				signatureRef.canvasToTempFilePath({
					success: (res: LimeSignatureToFileSuccess) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						this.url = res.tempFilePath
					}
				} as LimeSignatureToTempFilePathOptions)
				return
			}
			if(type == 'undo'){
				signatureRef.undo()
			}
			if(type == 'redo'){
				signatureRef.redo()
			}
			if(type == 'clear'){
				signatureRef.clear()
			}
		}
	}
}

横屏

通过设置landscape,改变生成图片的方向，达到横屏的作用

<view style="width: 100vw; height: 100vh;">
	<l-signature landscape></l-signature>
</view>
<view style="transform: rotate(90deg);">
	<button @click="onClick('clear')">清空</button>
	<button @click="onClick('undo')">撤消</button>
	<button @click="onClick('save')">保存</button>
	<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

API 文档

Props

参数	说明	类型	默认值
penSize	画笔大小	number	2
minLineWidth	线条最小宽度	number	2
maxLineWidth	线条最大宽度	number	6
penColor	画笔颜色	string	black
backgroundColor	背景颜色（透明背景需留空）	string	``
openSmooth	是否模拟压感	boolean	false
landscape	横屏模式	boolean	false
disableScroll	禁用滚动	boolean	true
disabled	禁用写字板	boolean	false

事件

事件名	说明
undo	撤销操作
clear	清空画板
canvasToTempFilePath	保存为图片

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码