HomeLease/uni_modules/lime-signature

LimeSignature 写字板

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

文档链接

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

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

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-signature
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	保存为图片

支持与赞赏

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

支付宝赞助	微信赞助