html 写字版插件,写字板 - DCloud 插件市场

更新记录

0.1.0(2021-03-07)

首次上传

撤消、清空、保存、模拟压感等功能

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

3.1.4 app-vue

√

×

×

×

×

×

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

√

√

√

√

√

×

×

√

√

signature 写字板

uniapp 写字板，可用业务签名等场景

查看更多

Q群：806744170

平台兼容

H5

微信小程序

支付宝小程序

百度小程序

头条小程序

QQ 小程序

App

√

√

未测

未测

未测

未测

未测

插件不包含样式，需要自己写样式，demo提供一份参考

代码演示

基本用法

// uni_modules引入

import lSignature from '@/uni_modules/lime-signature/components/lime-signature/'

export default {

components: {lSignature},

data() {

return {

}

}

}

事件调用

isPressure是否开启模拟压感，只有在H5端比较流畅，介意勿开

export default {

components: {lSignature},

data() {

return {

}

},

methods: {

clear() {

// 清空

this.$refs.signature.clear()

},

undo() {

// 撤消

this.$refs.signature.undo()

},

save() {

// 保存

this.$refs.signature.save().then(res => {

// #ifndef H5

uni.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success() {

uni.showToast({

title: '已保存到相册',

icon: 'success',

duration: 2000

});

},

});

// #endif

})

}

}

}

API

Props

参数

说明

类型

默认值

speed

模拟压感的速度比重

Number

0.7

dotSize

画笔大小

number

minLineWidth

线条最小宽

number

0.1

maxLineWidth

线条最大宽

number

2.5

penColor

画笔颜色

string

black

backgroundColor

画板背景色

string

quality

裁剪框最大宽度

number

1

pixelRatio

像素比，影响保存图大小

number

系统

type

指定 canvas 类型，支持2d和webgl,只对微信小程序有效

string

2d

throttle

节流限频

number

16

isPressure

是否模拟压感

boolean

false

事件 Events

事件名

说明

回调

undo

撤消，回退到上一步

clear

清空，清空画板

save

保存，生成图片

Promise

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。