381 lines
12 KiB
Vue
381 lines
12 KiB
Vue
<template>
|
||
<view class="signature" :class="{landscape}">
|
||
<text class="signature-text">请在此处签名</text>
|
||
<view class="signature-area" v-if="landscape">
|
||
<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize" :key="landscape" uid="0"
|
||
:minLineWidth="2" :openSmooth="openSmooth" :boundingBox="bBox" landscape></l-signature>
|
||
</view>
|
||
<view class="signature-area" v-if="!landscape">
|
||
<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize" :key="!landscape" uid="1"
|
||
:minLineWidth="2" :openSmooth="openSmooth" :boundingBox="bBox"></l-signature>
|
||
</view>
|
||
<view class="screen-handle" @click="change">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>{{landscape ? '横':'竖'}}</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="screen-handle__image" :src="icon" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools">
|
||
<view class="tools-item" @tap="isShowPen = !isShowPen;">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>设置</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/brush-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools-item" @tap="onClick('undo')">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>撤消</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/reply-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools-item restore" @tap="onClick('restore')">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>上一步</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/reply-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools-item" @tap="onClick('clear')">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>清空</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/brush-2-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools-item" @tap="onClick('save')">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>保存</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/save-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="tools-item" @tap="onClick('save2')">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<text>保存</text>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<image class="tools-item__image" src="https://fastly.jsdelivr.net/gh/liangei/image@latest/save-fill.svg" mode="widthFix"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup" type="bottom" @change="isShowPen = $event.show">
|
||
<view class="popup-wrap">
|
||
<view class="popup-item">
|
||
<view class="popup-item__head">
|
||
<view class="popup-item__title">笔锋</view>
|
||
<view class="popup-item__more">
|
||
<text class="popup-item__more-text">{{openSmooth}}</text>
|
||
<switch class="popup-item__more-switch" @change="() => openSmooth = !openSmooth" :checked="openSmooth"/>
|
||
</view>
|
||
</view>
|
||
<view class="popup-item__head">
|
||
<view class="popup-item__title">包围盒</view>
|
||
<view class="popup-item__more">
|
||
<text class="popup-item__more-text">{{bBox}}</text>
|
||
<switch class="popup-item__more-switch" @change="() => bBox = !bBox" :checked="bBox"/>
|
||
</view>
|
||
</view>
|
||
<slider :value="penSize" max="20" @change="penSize = $event.detail.value" show-value/>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- <view class="buttons">
|
||
<button @click="onClick('clear')">清空</button>
|
||
<button @click="onClick('undo')">撤销</button>
|
||
<button @click="onClick('save')">保存</button>
|
||
<button @click="bBox = !bBox">bBox{{bBox?'开':'关'}}</button>
|
||
<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
|
||
</view> -->
|
||
<!-- <view style="background-color: #2196f3; text-align: center;">
|
||
<view style="border: 2px dashed #fff; display: inline-block;">
|
||
<image :src="url" v-if="url" style="width: 370rpx;" mode="widthFix"></image>
|
||
</view>
|
||
</view> -->
|
||
<view class="signature-preview" v-if="url">
|
||
<image class="signature-preview__image" :src="url" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'Hello',
|
||
penColor: 'red',
|
||
penSize: 16,
|
||
url: '',
|
||
show: false,
|
||
landscape: false,
|
||
openSmooth: true,
|
||
bottomHeight: 0,
|
||
bBox: true,
|
||
isShowPen: false,
|
||
customBar: this.CustomBar || 0,
|
||
}
|
||
},
|
||
watch:{
|
||
isShowPen(v) {
|
||
if(!v) {
|
||
this.$refs.popup.close()
|
||
} else {
|
||
this.$refs.popup.open()
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// styles() {
|
||
// if(this.landscape) {
|
||
// return `width: 100vw; height: 100vh`
|
||
// }
|
||
// return `flex:1`
|
||
// },
|
||
icon() {
|
||
if(this.landscape) {
|
||
return `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00MSAxOUgyOVY3IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE4IDZINlYxOCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zMCA0Mkg0MlYzMCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03IDI5SDE5VjQxIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQyIDZMMjkgMTkiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTkgMjlMNiA0MiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==`
|
||
}
|
||
return `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02IDZMMTYgMTUuODk5NSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik02IDQxLjg5OTVMMTYgMzIiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNDIuMDAwMSA0MS44OTk1TDMyLjEwMDYgMzIiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNDEuODk5NSA2TDMyIDE1Ljg5OTUiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMzMgNkg0MlYxNSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik00MiAzM1Y0MkgzMyIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNSA0Mkg2VjMzIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTYgMTVWNkgxNSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==`
|
||
}
|
||
},
|
||
methods: {
|
||
change() {
|
||
this.landscape = !this.landscape;
|
||
this.url = ''
|
||
},
|
||
open() {
|
||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||
this.$refs.popup.open()
|
||
this.show = true
|
||
},
|
||
onClick(type) {
|
||
const {signatureRef} = this.$refs
|
||
if (type == 'openSmooth') {
|
||
this.openSmooth = !this.openSmooth
|
||
return
|
||
}
|
||
if (type == 'save') {
|
||
signatureRef.canvasToTempFilePath({
|
||
// destWidth: 300,
|
||
// destHeight: 200,
|
||
quality: 0.8,
|
||
success: (res) => {
|
||
uni.getImageInfo({
|
||
src: res.tempFilePath,
|
||
success(res) {
|
||
console.log('Temp res', res)
|
||
}
|
||
})
|
||
this.url = res.tempFilePath
|
||
}
|
||
})
|
||
return
|
||
}
|
||
if (type == 'save2') {
|
||
signatureRef.canvasToMaskPath({
|
||
// destWidth: 300,
|
||
// destHeight: 200,
|
||
success: (res) => {
|
||
uni.getImageInfo({
|
||
src: res.tempFilePath,
|
||
success(res) {
|
||
console.log('Mask res', res)
|
||
}
|
||
})
|
||
this.url = res.tempFilePath
|
||
}
|
||
})
|
||
return
|
||
}
|
||
if (signatureRef)
|
||
signatureRef[type]()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.signature {
|
||
/* #ifndef APP-NVUE */
|
||
height: calc(100vh - var(--window-top));
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
&-area {
|
||
/* #ifndef APP-NVUE */
|
||
height: calc(100vh - var(--window-top) - 120rpx);
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
}
|
||
&-text {
|
||
position: absolute;
|
||
/* #ifndef APP-NVUE */
|
||
left: 50%;
|
||
top: 50%;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
left: 375rpx;
|
||
top: 375rpx;
|
||
/* #endif */
|
||
font-size: 60rpx;
|
||
color: #ddd;
|
||
transform: translate(-50%,-50%);
|
||
z-index: -1;
|
||
transition: transform 300ms;
|
||
}
|
||
&-preview {
|
||
position: absolute;
|
||
bottom: 120rpx;
|
||
right: 20rpx;
|
||
width: 120px;
|
||
background: #000;
|
||
box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
|
||
&__image {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
}
|
||
}
|
||
&.landscape {
|
||
.signature-preview {
|
||
bottom: 20rpx;
|
||
width: 220px;
|
||
|
||
}
|
||
.signature-text {
|
||
transform: translate(-50%,-50%) rotate(90deg);
|
||
}
|
||
.tools {
|
||
z-index: 1;
|
||
position: absolute;
|
||
left: 10rpx;
|
||
bottom: 10rpx;
|
||
transform: rotate(90deg) translate(-100%, 0%);
|
||
transform-origin: bottom left;
|
||
padding: 0 16rpx;
|
||
border-radius: 50rpx;
|
||
&_item {
|
||
padding: 0 16rpx;
|
||
}
|
||
}
|
||
// .popup-wrap {
|
||
// box-sizing: border-box;
|
||
// height: 750rpx;
|
||
// padding-top: 100px;
|
||
// padding-bottom: 0;
|
||
// transform: rotate(90deg) translate(-100%, 0%);
|
||
// transform-origin: bottom left;
|
||
// }
|
||
}
|
||
}
|
||
|
||
.screen-handle {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
top: 10rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: white;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #ddd;
|
||
z-index: 10;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&__image {
|
||
/* #ifndef APP-NVUE */
|
||
width: 80%;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 0.8;
|
||
/* #endif */
|
||
}
|
||
}
|
||
.tools {
|
||
background-color: #fff;
|
||
position: relative;
|
||
z-index: 999999;
|
||
display: flex;
|
||
height: 120rpx;
|
||
box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
|
||
/* #ifdef APP-NVUE */
|
||
flex-direction: row;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* #endif */
|
||
&-item {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.6;
|
||
transition: opacity 0.1s ease-out;
|
||
&.restore{
|
||
/* #ifndef APP-NVUE */
|
||
transform: scaleX(-1);
|
||
/* #endif */
|
||
}
|
||
&.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
&__image {
|
||
width: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
.popup {
|
||
&-wrap {
|
||
padding-bottom: 120rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
&-item {
|
||
padding-bottom: 30rpx;
|
||
|
||
&__head {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
&__more {
|
||
flex-direction: row;
|
||
&-text {
|
||
font-size: 24rpx;
|
||
// padding-right 10rpx
|
||
color: #999;
|
||
|
||
}
|
||
|
||
&-switch {
|
||
transform: scale(0.7);
|
||
transform-origin: center right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |