|
|
@@ -6,7 +6,7 @@
|
|
|
<view class="canvas-container" slot="label">
|
|
|
<canvas canvas-id="canvas" id="canvas" :disable-scroll="true" style="width: 100%; height: 260px;background-color: #FFFFFF;border:1px solid #aaa;border-radius: 5px;"
|
|
|
@touchstart="handleTouchStart($event)" @touchmove="handleTouchMove($event)" @touchend="handleTouchEnd($event)"
|
|
|
- @touchcancel="handleEnd($event)"></canvas>
|
|
|
+ ></canvas>
|
|
|
</view>
|
|
|
</u-cell-item>
|
|
|
<view style="width:80px;height:30px;text-align: center;line-height: 30px;background-color: #ff6e3e;color:#fff;border-radius: 5px;position: absolute;right:0;z-index:5;" @click="reset">重新签名</view>
|
|
|
@@ -45,7 +45,12 @@
|
|
|
ifSign: false,
|
|
|
signUrl: '',
|
|
|
realPayAmount: '',
|
|
|
- canvasData: []
|
|
|
+ canvasData: [],
|
|
|
+ canvas: null,
|
|
|
+ context: null,
|
|
|
+ isDrawing: false,
|
|
|
+ lastX: 0,
|
|
|
+ lastY: 0
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -68,6 +73,7 @@
|
|
|
console.log(this.realPayAmount);
|
|
|
this.getContractInfo(options.parentName, options.sex)
|
|
|
context = uni.createCanvasContext('canvas')
|
|
|
+ //this.canvas = uni.createCanvasContext('canvas', this);
|
|
|
context.setLineWidth(3)
|
|
|
context.setStrokeStyle("#000000")
|
|
|
this.reset()
|
|
|
@@ -94,28 +100,62 @@
|
|
|
this.ifSign = false
|
|
|
context.draw()
|
|
|
},
|
|
|
+ drawPoint( x, y,) {
|
|
|
+ context.beginPath();
|
|
|
+ context.arc(x, y, 2, 0, 2 * Math.PI);
|
|
|
+ context.setFillStyle('#000000');
|
|
|
+ context.fill();
|
|
|
+ context.stroke()
|
|
|
+ context.draw(true)
|
|
|
+ },
|
|
|
handleTouchStart(e) {
|
|
|
this.ifSign = true
|
|
|
- this.canvasData = []
|
|
|
+ this.isDrawing = true;
|
|
|
+ const a = e.changedTouches[0]
|
|
|
+ const x = a.x;
|
|
|
+ const y = a.y;
|
|
|
+ this.lastX = x;
|
|
|
+ this.lastY = y;
|
|
|
+ //this.drawPoint(x, y)
|
|
|
+ context.beginPath();
|
|
|
+ context.moveTo(x, y);
|
|
|
+ /*this.canvasData = []
|
|
|
const a = e.changedTouches[0]
|
|
|
this.canvasData.push({
|
|
|
x: a.x,
|
|
|
y: a.y
|
|
|
- })
|
|
|
+ })*/
|
|
|
},
|
|
|
handleTouchMove(e) {
|
|
|
- const a = e.changedTouches[0]
|
|
|
+ if (this.isDrawing) {
|
|
|
+ const x = e.changedTouches[0].x;
|
|
|
+ const y = e.changedTouches[0].y;
|
|
|
+ //this.drawPoint(x, y)
|
|
|
+ context.lineTo(x, y);
|
|
|
+ context.stroke()
|
|
|
+ context.draw(true)
|
|
|
+ context.beginPath();
|
|
|
+ context.moveTo(x, y);
|
|
|
+ }
|
|
|
+ /*const a = e.changedTouches[0]
|
|
|
this.canvasData.push({
|
|
|
x: a.x,
|
|
|
y: a.y
|
|
|
- })
|
|
|
+ })*/
|
|
|
},
|
|
|
handleTouchEnd(e) {
|
|
|
- const a = e.changedTouches[0]
|
|
|
+ this.isDrawing = false;
|
|
|
+ const x = e.changedTouches[0].x;
|
|
|
+ const y = e.changedTouches[0].y;
|
|
|
+ //this.drawPoint(x, y)
|
|
|
+ context.lineTo(x, y);
|
|
|
+ context.stroke()
|
|
|
+ context.draw(true)
|
|
|
+ /*const a = e.changedTouches[0]
|
|
|
this.canvasData.push({
|
|
|
x: a.x,
|
|
|
y: a.y
|
|
|
- })
|
|
|
+ })*/
|
|
|
},
|
|
|
handleEnd() {
|
|
|
context.stroke()
|
zhangli