|
@@ -8,9 +8,10 @@
|
|
|
</div>
|
|
|
<div
|
|
|
v-else
|
|
|
- class="absolute top-[50%] left-[50%] translate-[-50%] w-[1100px] h-[640px] rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
|
|
|
+ class="absolute top-[50%] left-[50%] translate-[-50%] p-x-120px p-y-100px rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
|
|
|
>
|
|
|
<canvas
|
|
|
+ id="drawingCanvas"
|
|
|
ref="paintCanvas"
|
|
|
width="560"
|
|
|
height="480"
|
|
@@ -18,10 +19,12 @@
|
|
|
@mousedown="startDrawing"
|
|
|
@mousemove="draw"
|
|
|
@mouseup="stopDrawing"
|
|
|
+ @touchstart="startDrawing"
|
|
|
+ @touchmove="draw"
|
|
|
></canvas>
|
|
|
|
|
|
<div v-if="isMainWin" class="absolute wh-full top-0 left-0 z-3000"></div>
|
|
|
- <div v-else>
|
|
|
+ <div v-else class="ml-96px">
|
|
|
<div class="font-600 text-[20px] mb-[12px]">画笔颜色:</div>
|
|
|
<div class="w-[270px] flex flex-row flex-wrap">
|
|
|
<div
|
|
@@ -200,8 +203,7 @@ import EvaluationSTRecordInfoAPI from '@/api/tester/evaluation/stRecord'
|
|
|
import { useUserStore } from '@/store'
|
|
|
|
|
|
import { useSocket } from '@/utils/websoket'
|
|
|
-import { isJSON } from '@/utils'
|
|
|
-const { socket, wsSend, wsOn, wsOff } = useSocket()
|
|
|
+import { useThrottleFn } from '@vueuse/core'
|
|
|
|
|
|
const isMainWin = ref(false)
|
|
|
|
|
@@ -246,6 +248,10 @@ const preDrawAry = ref<ImageData[]>([])
|
|
|
const middleAry = ref<ImageData[]>([])
|
|
|
const nextDrawAry = ref<ImageData[]>([])
|
|
|
|
|
|
+/**
|
|
|
+ * 鼠标按下事件
|
|
|
+ * @param event
|
|
|
+ */
|
|
|
const startDrawing = (event: MouseEvent) => {
|
|
|
if (!isPainting && ctx) {
|
|
|
isPainting = true
|
|
@@ -260,6 +266,30 @@ 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)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 鼠标移动事件
|
|
|
+ * @param event
|
|
|
+ */
|
|
|
const draw = (event: MouseEvent) => {
|
|
|
if (isPainting && ctx) {
|
|
|
ctx.lineTo(event.offsetX, event.offsetY)
|
|
@@ -269,6 +299,33 @@ const draw = (event: MouseEvent) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 触摸移动事件
|
|
|
+ * @param e
|
|
|
+ */
|
|
|
+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
|
|
|
+ }
|
|
|
+
|
|
|
+ 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)
|
|
|
if (!nextDrawAry.value.length) {
|
|
@@ -284,6 +341,24 @@ const stopDrawing = () => {
|
|
|
isPainting = false
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 触摸抬起事件
|
|
|
+ */
|
|
|
+function touchStopDrawing() {
|
|
|
+ const preData = ctx?.getImageData(0, 0, 600, 420)
|
|
|
+ if (!nextDrawAry.value.length) {
|
|
|
+ // 当前绘图表面进栈
|
|
|
+ middleAry.value.push(preData!)
|
|
|
+ } else {
|
|
|
+ middleAry.value = []
|
|
|
+ middleAry.value = middleAry.value.concat(preDrawAry.value)
|
|
|
+ middleAry.value.push(preData!)
|
|
|
+ nextDrawAry.value = []
|
|
|
+ }
|
|
|
+
|
|
|
+ isPainting = false
|
|
|
+}
|
|
|
+
|
|
|
const initCanvas = () => {
|
|
|
if (paintCanvas.value) {
|
|
|
ctx = paintCanvas.value.getContext('2d')
|
|
@@ -292,6 +367,21 @@ const initCanvas = () => {
|
|
|
ctx.lineWidth = 5
|
|
|
ctx.lineCap = 'round'
|
|
|
}
|
|
|
+
|
|
|
+ const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement
|
|
|
+ // 触摸事件
|
|
|
+ canvas.addEventListener('touchstart', touchStartDrawing)
|
|
|
+ canvas.addEventListener('touchmove', touchDraw)
|
|
|
+ canvas.addEventListener('touchend', touchStopDrawing)
|
|
|
+
|
|
|
+ // 确保取消默认行为
|
|
|
+ canvas.addEventListener(
|
|
|
+ 'touchmove',
|
|
|
+ (e) => {
|
|
|
+ e.preventDefault()
|
|
|
+ },
|
|
|
+ { passive: false }
|
|
|
+ ) // 确保 passive 选项为 false
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -328,7 +418,7 @@ function controlCanvas(action: string) {
|
|
|
|
|
|
const getImage = () => {
|
|
|
imgUrl.value = paintCanvas.value?.toDataURL('image/png') ?? ''
|
|
|
- dialogVisible.value = true
|
|
|
+ // dialogVisible.value = true
|
|
|
|
|
|
localStorage.setItem('tow-win-draw-clock-result-arr-reset', 'reset')
|
|
|
localStorage.setItem('tow-win-draw-clock-show-dialog', 'YES')
|
|
@@ -353,7 +443,7 @@ watch(
|
|
|
/**
|
|
|
* 提交操作
|
|
|
*/
|
|
|
-const handleSubmit = () => {
|
|
|
+const handleSubmit = useThrottleFn(() => {
|
|
|
if (
|
|
|
radios.value[0] == null ||
|
|
|
radios.value[1] == null ||
|
|
@@ -417,7 +507,7 @@ const handleSubmit = () => {
|
|
|
ElMessage.error('提交失败!')
|
|
|
loading.value = false
|
|
|
})
|
|
|
-}
|
|
|
+})
|
|
|
|
|
|
const countDownEnd = () => {
|
|
|
countDownBegin.value = false
|