|
|
|
@ -1,134 +1,134 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<canvas id="myCanvas"></canvas>
|
|
|
|
<canvas id="myCanvas"></canvas>
|
|
|
|
<div class="footers">
|
|
|
|
<div class="footers">
|
|
|
|
<el-button type="primary" plain size="mini" @click="clearArea()">清除</el-button>
|
|
|
|
<el-button type="primary" plain size="mini" @click="clearArea()">清除</el-button>
|
|
|
|
<el-button type="primary" size="mini" @click="saveImageInfo()">保存</el-button>
|
|
|
|
<el-button type="primary" size="mini" @click="saveImageInfo()">保存</el-button>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<input v-model="strokeStyle" type="color">
|
|
|
|
<input v-model="strokeStyle" type="color">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
touchPressed: false,
|
|
|
|
touchPressed: false,
|
|
|
|
ctx: null,
|
|
|
|
ctx: null,
|
|
|
|
strokeStyle: "#EE2F2F",
|
|
|
|
strokeStyle: "#EE2F2F",
|
|
|
|
lineWidth: 2,
|
|
|
|
lineWidth: 2,
|
|
|
|
lastX: null,
|
|
|
|
lastX: null,
|
|
|
|
lastY: null,
|
|
|
|
lastY: null,
|
|
|
|
canvas: null,
|
|
|
|
canvas: null,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
let canvas = document.getElementById("myCanvas");
|
|
|
|
let canvas = document.getElementById("myCanvas");
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.ctx = canvas.getContext("2d");
|
|
|
|
this.ctx = canvas.getContext("2d");
|
|
|
|
let winW = window.innerWidth;
|
|
|
|
let winW = window.innerWidth;
|
|
|
|
let winH = window.innerHeight;
|
|
|
|
let winH = window.innerHeight;
|
|
|
|
canvas.width = winW;
|
|
|
|
canvas.width = winW;
|
|
|
|
canvas.height = winH;
|
|
|
|
canvas.height = winH;
|
|
|
|
this.Init();
|
|
|
|
this.Init();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
Init() {
|
|
|
|
Init() {
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
"touchstart",
|
|
|
|
"touchstart",
|
|
|
|
(event) => {
|
|
|
|
(event) => {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,重要
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,重要
|
|
|
|
var touch = event.targetTouches[0];
|
|
|
|
var touch = event.targetTouches[0];
|
|
|
|
this.touchPressed = true;
|
|
|
|
this.touchPressed = true;
|
|
|
|
this.draw(
|
|
|
|
this.draw(
|
|
|
|
touch.pageX - this.canvas.offsetLeft,
|
|
|
|
touch.pageX - this.canvas.offsetLeft,
|
|
|
|
touch.pageY - this.canvas.offsetTop,
|
|
|
|
touch.pageY - this.canvas.offsetTop,
|
|
|
|
false
|
|
|
|
false
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
false
|
|
|
|
false
|
|
|
|
);
|
|
|
|
);
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
"touchmove",
|
|
|
|
"touchmove",
|
|
|
|
(event) => {
|
|
|
|
(event) => {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,重要
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,重要
|
|
|
|
var touch = event.targetTouches[0];
|
|
|
|
var touch = event.targetTouches[0];
|
|
|
|
if (this.touchPressed) {
|
|
|
|
if (this.touchPressed) {
|
|
|
|
this.draw(
|
|
|
|
this.draw(
|
|
|
|
touch.pageX - this.canvas.offsetLeft,
|
|
|
|
touch.pageX - this.canvas.offsetLeft,
|
|
|
|
touch.pageY - this.canvas.offsetTop,
|
|
|
|
touch.pageY - this.canvas.offsetTop,
|
|
|
|
true
|
|
|
|
true
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
false
|
|
|
|
false
|
|
|
|
);
|
|
|
|
);
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
this.canvas.addEventListener(
|
|
|
|
"touchend",
|
|
|
|
"touchend",
|
|
|
|
(event) => {
|
|
|
|
(event) => {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
if (event.targetTouches.length == 1) {
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
|
|
|
|
event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
|
|
|
|
this.touchPressed = false;
|
|
|
|
this.touchPressed = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
false
|
|
|
|
false
|
|
|
|
);
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
draw(x, y, isDown) {
|
|
|
|
draw(x, y, isDown) {
|
|
|
|
let ctx = this.ctx;
|
|
|
|
let ctx = this.ctx;
|
|
|
|
if (isDown) {
|
|
|
|
if (isDown) {
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.strokeStyle = this.strokeStyle;
|
|
|
|
ctx.strokeStyle = this.strokeStyle;
|
|
|
|
ctx.lineWidth = this.lineWidth;
|
|
|
|
ctx.lineWidth = this.lineWidth;
|
|
|
|
ctx.lineJoin = "round";
|
|
|
|
ctx.lineJoin = "round";
|
|
|
|
ctx.moveTo(this.lastX, this.lastY);
|
|
|
|
ctx.moveTo(this.lastX, this.lastY);
|
|
|
|
ctx.lineTo(x, y);
|
|
|
|
ctx.lineTo(x, y);
|
|
|
|
ctx.closePath();
|
|
|
|
ctx.closePath();
|
|
|
|
ctx.stroke();
|
|
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.lastX = x;
|
|
|
|
this.lastX = x;
|
|
|
|
this.lastY = y;
|
|
|
|
this.lastY = y;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
clearArea() {
|
|
|
|
clearArea() {
|
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
|
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
|
|
|
|
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
saveImageInfo() {
|
|
|
|
saveImageInfo() {
|
|
|
|
let a = document.createElement("a");
|
|
|
|
let a = document.createElement("a");
|
|
|
|
a.href = this.canvas.toDataURL();
|
|
|
|
a.href = this.canvas.toDataURL();
|
|
|
|
a.download = "sign";
|
|
|
|
a.download = "sign";
|
|
|
|
a.click();
|
|
|
|
a.click();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
.footers {
|
|
|
|
.footers {
|
|
|
|
position: fixed;
|
|
|
|
position: fixed;
|
|
|
|
z-index: 10;
|
|
|
|
z-index: 10;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
border-top: 1px solid #ccc;
|
|
|
|
border-top: 1px solid #ccc;
|
|
|
|
margin: 0 150px;
|
|
|
|
margin: 0 150px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.footers div {
|
|
|
|
.footers div {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#myCanvas {
|
|
|
|
#myCanvas {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
height: 50vh;
|
|
|
|
height: 50vh;
|
|
|
|
border: #ccc 1px solid;
|
|
|
|
border: #ccc 1px solid;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|