移动端V1.0
This commit is contained in:
6
uni_modules/liu-signature/changelog.md
Normal file
6
uni_modules/liu-signature/changelog.md
Normal file
@@ -0,0 +1,6 @@
|
||||
## 1.0.2（2023-06-08）
|
||||
增加预览二维码
|
||||
## 1.0.1（2023-05-31）
|
||||
增加license
|
||||
## 1.0.0（2023-05-26）
|
||||
初始化发布
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="canvas-main">
|
||||
<canvas :style="'width:'+width+'rpx;height:'+height+'rpx;'" class="canvas-item" disable-scroll="true"
|
||||
canvas-id="canvasId" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
|
||||
@error="error"></canvas>
|
||||
<view class="btn-list">
|
||||
<view class="btn-reset" @click.stop="reset">重置</view>
|
||||
<!-- <view class="btn-reset" @click.stop="rotateScreen">
|
||||
横向
|
||||
</view> -->
|
||||
<view class="btn-complete" @click.stop="save">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//签名板宽度(rpx)
|
||||
width: {
|
||||
type: Number,
|
||||
default: 750
|
||||
},
|
||||
//签名板高度(rpx)
|
||||
height: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
//签名板背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
//画笔大小(rpx)
|
||||
lineWidth: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
//画笔颜色
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
//生成的图片格式(jpg或png)
|
||||
fileType: {
|
||||
type: String,
|
||||
default: 'png'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowWidth: 0,
|
||||
pixelRatio: 0,
|
||||
context: null,
|
||||
points: [],
|
||||
oldPoints: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.start()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
rotateScreen(){
|
||||
this.$emit('heng')
|
||||
},
|
||||
start() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.windowWidth = systemInfo.windowWidth
|
||||
this.pixelRatio = systemInfo.pixelRatio
|
||||
this.context = uni.createCanvasContext('canvasId', this)
|
||||
this.context.fillStyle = this.bgColor
|
||||
const width = this.width / 750 * this.windowWidth
|
||||
const height = this.height / 750 * this.windowWidth
|
||||
const lineWidth = this.lineWidth / 750 * this.windowWidth
|
||||
this.context.fillRect(0, 0, width, height)
|
||||
this.context.lineWidth = lineWidth
|
||||
this.context.strokeStyle = this.lineColor
|
||||
this.context.lineCap = 'round'
|
||||
this.context.lineJoin = 'round'
|
||||
this.context.stroke()
|
||||
this.context.draw(true)
|
||||
},
|
||||
touchstart(e) {
|
||||
this.points.push({
|
||||
x: e.changedTouches[0].x,
|
||||
y: e.changedTouches[0].y
|
||||
})
|
||||
this.context.beginPath()
|
||||
},
|
||||
touchmove(e) {
|
||||
this.points.push({
|
||||
x: e.changedTouches[0].x,
|
||||
y: e.changedTouches[0].y
|
||||
})
|
||||
this.oldPoints = JSON.parse(JSON.stringify(this.points))
|
||||
if (this.points.length > 1) {
|
||||
this.context.moveTo(this.points[0].x, this.points[0].y)
|
||||
this.context.lineTo(this.points[1].x, this.points[1].y)
|
||||
this.points.splice(0, 1)
|
||||
this.context.stroke()
|
||||
this.context.draw(true)
|
||||
}
|
||||
},
|
||||
touchend(e) {
|
||||
this.points = []
|
||||
},
|
||||
reset() {
|
||||
this.context = null
|
||||
this.points = []
|
||||
this.oldPoints = []
|
||||
this.start()
|
||||
},
|
||||
save() {
|
||||
if (this.oldPoints.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请进行签名!',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
let self = this
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'canvasId',
|
||||
fileType: self.fileType,
|
||||
quality: 1,
|
||||
width: self.width,
|
||||
height: self.height,
|
||||
destWidth: self.width * self.pixelRatio,
|
||||
destHeight: self.height * self.pixelRatio,
|
||||
success: (res) => {
|
||||
self.$emit('change', res.tempFilePath)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('生成图片失败:', err)
|
||||
}
|
||||
}, self)
|
||||
},
|
||||
error(e) {
|
||||
console.log('错误信息：', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.canvas-main {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.btn-list {
|
||||
width: 100%;
|
||||
height: 102rpx;
|
||||
background: #FEFFFE;
|
||||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
view{
|
||||
// flex: 1;
|
||||
}
|
||||
.btn-reset {
|
||||
width: 320rpx;
|
||||
height: 72rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #E6E6E6;
|
||||
font-size: 30rpx;
|
||||
color: #3E3E3E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-complete {
|
||||
width: 320rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #FD430E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
uni_modules/liu-signature/license.md
Normal file
6
uni_modules/liu-signature/license.md
Normal file
@@ -0,0 +1,6 @@
|
||||
### 1、本插件可免费下载使用；
|
||||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
|
||||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
||||
85
uni_modules/liu-signature/package.json
Normal file
85
uni_modules/liu-signature/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "liu-signature",
|
||||
"displayName": "签名板、手写签名、签字",
|
||||
"version": "1.0.2",
|
||||
"description": "简单好用的签名板、手写签名、签字组件，可设置签名板宽度、签名板高度、签名板背景色、画笔大小、画笔颜色、生成的格式等",
|
||||
"keywords": [
|
||||
"签名",
|
||||
"签名板",
|
||||
"手写签名",
|
||||
"签字",
|
||||
"电子签名"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
67
uni_modules/liu-signature/readme.md
Normal file
67
uni_modules/liu-signature/readme.md
Normal file
@@ -0,0 +1,67 @@
|
||||
# liu-signature适用于uni-app项目的签名板、手写签名、签字组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件是简单好用的签名板、手写签名、签字组件，可设置签名板宽度、签名板高度、签名板背景色、画笔大小、画笔颜色、生成的格式等
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||||
|
||||
|
||||
|
||||
### 使用示例
|
||||
```
|
||||
<template>
|
||||
<view class="tab-box">
|
||||
<liu-signature @change="change"></liu-signature>
|
||||
<image class="success-img" :src="url" @click="previewImg(url)"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('生成的图片:', e)
|
||||
this.url = e
|
||||
},
|
||||
//预览图片
|
||||
previewImg(url) {
|
||||
if (!url) return
|
||||
let list = [url]
|
||||
uni.previewImage({
|
||||
urls: list
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
|
||||
.success-img {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ---------------------- | ---------------|
|
||||
| width | Number | 750 | 签名板宽度(rpx)
|
||||
| height | Number | 500 | 签名板高度(rpx)
|
||||
| bgColor | String | #000000 | 签名板背景色
|
||||
| lineWidth | Number | 6 | 画笔大小(rpx)
|
||||
| lineColor | String | #FFFFFF | 画笔颜色
|
||||
| fileType | String | png | 生成的图片格式(jpg或png)
|
||||
| @change | Function | | 签名完成回调事件
|
||||
|
||||
Reference in New Issue
Block a user