<template>
<view>
<view class="wrapper">
<view class="handBtn">
<image @click="selectColorEvent('black', '#1A1A1A')"
:src="selectColor === 'black' ? '/static/img/sign/color_black_selected.png' : '/static/img/sign/color_black.png'"
:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
<image @click="selectColorEvent('red', '#ca262a')"
:src="selectColor === 'red' ? '/static/img/sign/color_red_selected.png' : '/static/img/sign/color_red.png'"
:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
<button @click="retDraw" class="delBtn">重写</button>
<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
<button @click="previewCanvasImg" class="previewBtn">预览</button>
<button @click="uploadCanvasImg" class="uploadBtn">上传</button>
<button @click="subCanvas" class="subBtn">完成</button>
<button @click="back" class="subBtn">返回</button>
</view>
<view class="handCenter">
<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
@touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
</view>
<view class="handRight">
<view class="handTitle">请签名</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
canvasName: 'handWriting',
ctx: '',
canvasWidth: 0,
canvasHeight: 0,
transparent: 1,
selectColor: 'black',
lineColor: '#1A1A1A',
lineSize: 1.5,
lineMin: 0.5,
lineMax: 4,
pressure: 1,
smoothness: 60,
currentPoint: {
},
currentLine: [],
firstTouch: true,
radius: 1,
cutArea: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
bethelPoint: [],
lastPoint: 0,
chirography: [],
currentChirography: {
},
linePrack: []
};
},
onLoad () {
let canvasName = this.canvasName;
let ctx = wx.createCanvasContext(canvasName);
this.ctx = ctx;
let query = wx.createSelectorQuery();
query
.select('.handCenter')
.boundingClientRect(rect => {
this.canvasWidth = rect.width;
this.canvasHeight = rect.height;
this.setCanvasBg('rgba(0,0,0,0)');
})
.exec();
},
methods: {
uploadScaleStart (e) {
if (e.type != 'touchstart') return false;
let ctx = this.ctx;
ctx.setFillStyle(this.lineColor);
ctx.setGlobalAlpha(this.transparent);
let currentPoint = {
x: e.touches[0].x,
y: e.touches[0].y
};
let currentLine = this.currentLine;
currentLine.unshift({
time: new Date().getTime(),
dis: 0,
x: currentPoint.x,
y: currentPoint.y
});
this.currentPoint = currentPoint;
if (this.firstTouch) {
this.cutArea = {
top: currentPoint.y,
right: currentPoint.x,
bottom: currentPoint.y,
left: currentPoint.x
};
this.firstTouch = false;
}
this.pointToLine(currentLine);
},
uploadScaleMove (e) {
if (e.type != 'touchmove') return false;
if (e.cancelable) {
if (!e.defaultPrevented) {
e.preventDefault();
}
}
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
if (point.y < this.cutArea.top) {
this.cutArea.top = point.y;
}
if (point.y < 0) this.cutArea.top =