<template>
<div class="share" style="background:#fff">
<div class="zk-title">
请工整的书写 <span style="color:#06F;">独孤求败</span> 的签字
</div>
<!-- <div style="100px;height:100px"><img src="" width="40px" height="40px" id="test"/>88</div> -->
<div class="canvasBox" ref="canvasHW">
<canvas @touchstart='touchStart'
@touchmove='touchMove'
@touchend='touchEnd'
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp"
ref="canvasF">
</canvas>
</div>
<div class="btnBox">
<button class="clear" @click="overwrite">清除</button>
<button class="confirm" @click="commit">确认</button>
<button class="cancel" @click="cancel">取消</button>
</div>
</div>
</template>
<script>
export default {
name: 'signature',
data () {
return {
points: [],
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
imgData: '',
isDown: false,
canvasBoard: null,
canvasContext: null
}
},
mounted () {
this.canvasBoard = this.$refs.canvasF;
this.canvasBoard.height = this.$refs.canvasHW.offsetHeight;
this.canvasBoard.width = this.$refs.canvasHW.offsetWidth;
var ctx = this.canvasBoard.getContext('2d');
this.canvasContext = ctx;
ctx.lineWidth=3;
ctx.font = "Arial";
},
methods: {
back(){
},
// Computer event -- Mouse down
mouseDown (ev) {
ev = ev || event
ev.preventDefault()
console.log(ev)
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
console.log(obj)
this.startX = obj.x
this.startY = obj.y
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.points.push(obj)
this.isDown = true
},
// Mobile event -- Touch start
touchStart (ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length === 1) {
let obj = {
x: ev.targetTouches[0].clientX,
y: ev.targetTouches[0].clientY - 0//0为y轴的偏移量
}
this.startX = obj.x
this.startY = obj.y
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.points.push(obj)
}
},
// Mobile -- Mouse move
mouseMove (ev) {
ev = ev || event
ev.preventDefault()
if (this.isDown) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
// Mobile event -- Touch move
touchMove (ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length === 1) {
let obj = {
x: ev.targetTouches[0].clientX,
y: ev.targetTouches[0].clientY - 0
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
// Computer event -- Mouse up
mouseUp (ev) {
ev = ev || event
ev.preventDefault()
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.points.push(obj)
this.points.push({x: -1, y: -1})
this.isDown = false
},
// Mobile event TouchEnd
touchEnd (ev) {
ev = ev || event
ev.preventDefault()
console.log(ev)
if (ev.touches.length === 1) {
let obj = {
x: ev.targetTouches[0].clientX,
y: ev.targetTouches[0].clientY - 0
}
this.canvasContext.beginPath()
this.canvasContext.moveTo(this.startX, this.startY)
this.canvasContext.lineTo(obj.x, obj.y)
this.canvasContext.stroke()
this.canvasContext.closePath()
this.points.push(obj)
this.points.push({x: -1, y: -1})
}
},
// Over write
overwrite () {
// this.canvasBoard.height
// this.canvasBoard.width
this.canvasContext.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
this.points = [];
},
// Commit
commit () {
// this.$refs.mySignature.src = this.$refs.canvasF.toDataURL('image/png')
//this.$store.state.currentSignatureData = this.$refs.canvasF.toDataURL('image/png');
var imgdata = this.$refs.canvasF.toDataURL('image/png');
// var vertical = true;
// var imgdata = signaturePad.toDataURL(); // base64
//alert(Vertical);
// this.upload(imgdata, Vertical);
// 当Vertical为true的时候，后台需要转90度；
// 当Vertical为false的时候，后台不需要转；
document.getElementById('test').src=imgdata;
this.$router.back();
},
upload(imgdata, vertical) {
// $("#clearButton,#backBtn,#subBtn").hide();
//alert("v:"+vertical);
$.ajax({
type : 'POST',
dataType : 'json',
url : $("#url").val(),
data : {
media : imgdata,
v : vertical,
res_code:$("#resCode").val(),
clientId:$("#clientId").val()
},
success : function(data) {
if (data['error'] != null) {
alert(data['error']);
$("#clearButton,#backBtn,#subBtn").show();
$("#msg").hide();
} else {
if (data.url!=null)
location.href = data.url;
else
{
$("#msg").hide();
alert("签署成功");
}
}
},
error : function() {
alert("错误：" + error);
$("#clearButton,#backBtn,#subBtn").show();
$("#msg").hide();
}
});
},
cancel(){
this.$router.back();
}
}
}
</script>
<style lang="stylus" scoped>
.share
position absolute
top 0
bottom 0
left 0
right 0
z-index 15
background #fff
</style>
<style scoped>
.signatureBox{
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
background: #fff;
z-index: 100;
display: flex;
flex-direction: column;
}
.visaDetailTop p{
margin: 0;
text-align: center;
color: #000;
font-size: 1em;
position: relative;
}
.visaDetailTop p span{
color: #fff;
font-size: 1.2em;
}
.visaDetailTop p:first-of-type{
float: left;
}
.visaDetailTop p:nth-of-type(2){
float: right;
}
.canvasBox{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
box-sizing: border-box;
flex: 1;
font-family: 'Helvetica, Sans-Serif';
font-size: 16px;
}
.btnBox{
height: 30px;
padding: 5px;
text-align: right;
line-height: 30px;
}
.btnBox button{
border: 1px solid lightgray;
color: #fff;
border-radius: 4px;
padding: 5px 10px;
60px;
outline:none;
}
.zk-title {
position: absolute;
right: -85px;
top: 85px;
font-size: 16px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
canvas {
position: absolute;
left: 0;
top: 0;
100%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.btnBox {
position: absolute;
left: -68px;
bottom: 90px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.btnBox .clear{
background: #808080;
}
.btnBox .confirm{
background: #04BE02;
}
.btnBox .cancel{
background: #39F;
}
@media only screen and (min- 750px){
.signatureBox{
position: absolute;
top: 0;
left: 0;
100%;
min-height: 100%;
box-sizing: border-box;
overflow: visible;
}
}
</style>