|
@@ -260,7 +260,7 @@ const startDrawing = (event: MouseEvent) => {
|
|
|
ctx.moveTo(lastX, lastY)
|
|
|
|
|
|
// 当前绘图表面状态
|
|
|
- const preData = ctx.getImageData(0, 0, 600, 420)
|
|
|
+ const preData = ctx.getImageData(0, 0, 600, 490)
|
|
|
// 当前绘图表面进栈
|
|
|
preDrawAry.value.push(preData)
|
|
|
}
|
|
@@ -270,20 +270,22 @@ const startDrawing = (event: MouseEvent) => {
|
|
|
* 触摸开始事件
|
|
|
* @param e
|
|
|
*/
|
|
|
-function touchStartDrawing(e: MouseEvent | TouchEvent) {
|
|
|
- isPainting = true
|
|
|
- ;[lastX, lastY] = [
|
|
|
- 'touches' in e
|
|
|
- ? [(e as TouchEvent).touches[0].clientX, (e as TouchEvent).touches[0].clientY]
|
|
|
- : [(e as MouseEvent).clientX - 360, (e as MouseEvent).clientY - 140]
|
|
|
- ]
|
|
|
- ctx.beginPath()
|
|
|
- ctx.moveTo(lastX, lastY)
|
|
|
-
|
|
|
- // 当前绘图表面状态
|
|
|
- const preData = ctx.getImageData(0, 0, 600, 420)
|
|
|
- // 当前绘图表面进栈
|
|
|
- preDrawAry.value.push(preData)
|
|
|
+const touchStartDrawing = (e: MouseEvent | TouchEvent) => {
|
|
|
+ if (!isPainting && ctx) {
|
|
|
+ isPainting = true
|
|
|
+ ;[lastX, lastY] = [
|
|
|
+ 'touches' in e
|
|
|
+ ? [(e as TouchEvent).touches[0].clientX, (e as TouchEvent).touches[0].clientY]
|
|
|
+ : [(e as MouseEvent).clientX - 360, (e as MouseEvent).clientY - 140]
|
|
|
+ ]
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.moveTo(lastX, lastY)
|
|
|
+
|
|
|
+ // 当前绘图表面状态
|
|
|
+ const preData = ctx.getImageData(0, 0, 600, 490)
|
|
|
+ // 当前绘图表面进栈
|
|
|
+ preDrawAry.value.push(preData)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -307,27 +309,29 @@ function touchDraw(e: MouseEvent | TouchEvent) {
|
|
|
if (!isPainting) return // 防止在未按下鼠标或触摸时绘制
|
|
|
e.preventDefault()
|
|
|
|
|
|
- let x: number, y: number
|
|
|
- if ('touches' in e) {
|
|
|
- x = (e as TouchEvent).touches[0].clientX - 360
|
|
|
- y = (e as TouchEvent).touches[0].clientY - 140
|
|
|
- } else {
|
|
|
- x = (e as MouseEvent).clientX
|
|
|
- y = (e as MouseEvent).clientY
|
|
|
- }
|
|
|
+ if (isPainting && ctx) {
|
|
|
+ let x: number, y: number
|
|
|
+ if ('touches' in e) {
|
|
|
+ x = (e as TouchEvent).touches[0].clientX - 360
|
|
|
+ y = (e as TouchEvent).touches[0].clientY - 140
|
|
|
+ } else {
|
|
|
+ x = (e as MouseEvent).clientX
|
|
|
+ y = (e as MouseEvent).clientY
|
|
|
+ }
|
|
|
|
|
|
- ctx.moveTo(lastX, lastY)
|
|
|
- ctx.lineTo(x, y)
|
|
|
- ctx.stroke()
|
|
|
- ;[lastX, lastY] = [x, y]
|
|
|
- canvasToBase64ToStorage(0)
|
|
|
+ ctx.moveTo(lastX, lastY)
|
|
|
+ ctx.lineTo(x, y)
|
|
|
+ ctx.stroke()
|
|
|
+ ;[lastX, lastY] = [x, y]
|
|
|
+ canvasToBase64ToStorage(0)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 鼠标抬起事件
|
|
|
*/
|
|
|
const stopDrawing = () => {
|
|
|
- const preData = ctx?.getImageData(0, 0, 600, 420)
|
|
|
+ const preData = ctx?.getImageData(0, 0, 600, 490)
|
|
|
if (!nextDrawAry.value.length) {
|
|
|
// 当前绘图表面进栈
|
|
|
middleAry.value.push(preData!)
|
|
@@ -345,7 +349,7 @@ const stopDrawing = () => {
|
|
|
* 触摸抬起事件
|
|
|
*/
|
|
|
function touchStopDrawing() {
|
|
|
- const preData = ctx?.getImageData(0, 0, 600, 420)
|
|
|
+ const preData = ctx?.getImageData(0, 0, 600, 490)
|
|
|
if (!nextDrawAry.value.length) {
|
|
|
// 当前绘图表面进栈
|
|
|
middleAry.value.push(preData!)
|