2085 lines
34 KiB
Vue
2085 lines
34 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||
<!-- // @touchstart="handleCanvasTouch" -->
|
||
<canvas @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{
|
||
width: 1000 + 'px',
|
||
height: 800 + 'px',
|
||
transform: `translate(${offsetX}px, ${offsetY}px) scale(${scale})`
|
||
}" canvas-id="canvas" id="canvas"></canvas>
|
||
<!-- 添加一个按钮，用于触发绘图 -->
|
||
<!-- <button @click="handleDraw">点击绘制圆形</button> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
getCurrentInstance
|
||
} from 'vue'
|
||
import {
|
||
onReady
|
||
} from '@dcloudio/uni-app'
|
||
// import { useRafFn } from "./utils.js"
|
||
const canvasWidth = ref() // 动态设置Canvas宽度
|
||
const canvasHeight = ref() // 动态设置Canvas高度
|
||
const instance = getCurrentInstance()
|
||
const scale = ref(1)
|
||
const offsetX = ref(0)
|
||
const offsetY = ref(0)
|
||
const lastDistance = ref(-1)
|
||
|
||
const startX = ref(0)
|
||
const startY = ref(0)
|
||
const isDragging = ref(false)
|
||
const tempX = ref()
|
||
const tempY = ref()
|
||
const tempFlag = ref(true)
|
||
|
||
const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
|
||
const blocks = ref(
|
||
[
|
||
{
|
||
"areacode": "ksmj71jukqf7",
|
||
"areaname": "B2区",
|
||
"polygon": [
|
||
348,
|
||
193,
|
||
348,
|
||
216,
|
||
348,
|
||
240,
|
||
348,
|
||
263,
|
||
363,
|
||
263,
|
||
377,
|
||
263,
|
||
392,
|
||
263,
|
||
392,
|
||
240,
|
||
392,
|
||
216,
|
||
392,
|
||
193,
|
||
377,
|
||
193,
|
||
363,
|
||
193,
|
||
348,
|
||
193
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "B2区"
|
||
},
|
||
{
|
||
"areacode": "3ala2e74fet0",
|
||
"areaname": "A2区",
|
||
"polygon": [
|
||
488,
|
||
251,
|
||
473,
|
||
262,
|
||
453,
|
||
281,
|
||
455,
|
||
290,
|
||
494,
|
||
290,
|
||
518,
|
||
290,
|
||
542,
|
||
290,
|
||
542,
|
||
273,
|
||
542,
|
||
257,
|
||
536,
|
||
205,
|
||
521,
|
||
207,
|
||
494,
|
||
240,
|
||
488,
|
||
251
|
||
],
|
||
"row_size": 25,
|
||
"col_size": 50,
|
||
"stage": "2",
|
||
"amount": 286,
|
||
"hint": "A2区"
|
||
},
|
||
{
|
||
"areacode": "h4pff5jukqf9",
|
||
"areaname": "N3区",
|
||
"polygon": [
|
||
527,
|
||
96,
|
||
519,
|
||
107,
|
||
536,
|
||
140,
|
||
564,
|
||
172,
|
||
596,
|
||
182,
|
||
610,
|
||
176,
|
||
611,
|
||
166,
|
||
594,
|
||
149,
|
||
581,
|
||
138,
|
||
583,
|
||
142,
|
||
567,
|
||
119,
|
||
560,
|
||
114,
|
||
527,
|
||
96
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 35,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N3区"
|
||
},
|
||
{
|
||
"areacode": "8nbhrh2gt604",
|
||
"areaname": "H1区",
|
||
"polygon": [
|
||
348,
|
||
144,
|
||
348,
|
||
152,
|
||
348,
|
||
162,
|
||
348,
|
||
170,
|
||
361,
|
||
170,
|
||
374,
|
||
170,
|
||
388,
|
||
169,
|
||
387,
|
||
162,
|
||
387,
|
||
152,
|
||
387,
|
||
144,
|
||
374,
|
||
144,
|
||
361,
|
||
144,
|
||
348,
|
||
144
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "H1区"
|
||
},
|
||
{
|
||
"areacode": "0kc0kw2gt605",
|
||
"areaname": "N20区",
|
||
"polygon": [
|
||
582,
|
||
341,
|
||
582,
|
||
361,
|
||
582,
|
||
381,
|
||
602,
|
||
380,
|
||
600,
|
||
400,
|
||
614,
|
||
401,
|
||
620,
|
||
401,
|
||
622,
|
||
366,
|
||
619,
|
||
360,
|
||
621,
|
||
341,
|
||
614,
|
||
341,
|
||
597,
|
||
341,
|
||
582,
|
||
341
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N20区"
|
||
},
|
||
{
|
||
"areacode": "xrc8rwej0jkc",
|
||
"areaname": "G区",
|
||
"polygon": [
|
||
113,
|
||
371,
|
||
113,
|
||
397,
|
||
113,
|
||
424,
|
||
113,
|
||
450,
|
||
118,
|
||
450,
|
||
124,
|
||
450,
|
||
129,
|
||
450,
|
||
129,
|
||
424,
|
||
129,
|
||
397,
|
||
129,
|
||
371,
|
||
124,
|
||
371,
|
||
118,
|
||
371,
|
||
113,
|
||
371
|
||
],
|
||
"row_size": 10,
|
||
"col_size": 37,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "G区"
|
||
},
|
||
{
|
||
"areacode": "bjhut82gt607",
|
||
"areaname": "N11区",
|
||
"polygon": [
|
||
58,
|
||
323,
|
||
58,
|
||
345,
|
||
58,
|
||
367,
|
||
58,
|
||
389,
|
||
71,
|
||
389,
|
||
83,
|
||
389,
|
||
96,
|
||
389,
|
||
96,
|
||
367,
|
||
96,
|
||
345,
|
||
96,
|
||
323,
|
||
83,
|
||
323,
|
||
71,
|
||
323,
|
||
58,
|
||
323
|
||
],
|
||
"row_size": 16,
|
||
"col_size": 26,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N11区"
|
||
},
|
||
{
|
||
"areacode": "xrwmq3sa807n",
|
||
"areaname": "L区",
|
||
"polygon": [
|
||
541,
|
||
196,
|
||
554,
|
||
223,
|
||
553,
|
||
252,
|
||
554,
|
||
282,
|
||
555,
|
||
285,
|
||
564,
|
||
285,
|
||
568,
|
||
284,
|
||
567,
|
||
253,
|
||
568,
|
||
222,
|
||
559,
|
||
191,
|
||
564,
|
||
188,
|
||
555,
|
||
188,
|
||
541,
|
||
196
|
||
],
|
||
"row_size": 15,
|
||
"col_size": 50,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "L区"
|
||
},
|
||
{
|
||
"areacode": "aekymdjukqf6",
|
||
"areaname": "N2区",
|
||
"polygon": [
|
||
577,
|
||
204,
|
||
579,
|
||
216,
|
||
579,
|
||
240,
|
||
602,
|
||
252,
|
||
602,
|
||
267,
|
||
609,
|
||
267,
|
||
618,
|
||
267,
|
||
621,
|
||
240,
|
||
615,
|
||
221,
|
||
611,
|
||
191,
|
||
609,
|
||
189,
|
||
595,
|
||
194,
|
||
577,
|
||
204
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N2区"
|
||
},
|
||
{
|
||
"areacode": "g1aynfej0jku",
|
||
"areaname": "E区",
|
||
"polygon": [
|
||
114,
|
||
215,
|
||
114,
|
||
236,
|
||
114,
|
||
257,
|
||
114,
|
||
278,
|
||
119,
|
||
278,
|
||
124,
|
||
278,
|
||
129,
|
||
278,
|
||
129,
|
||
257,
|
||
129,
|
||
236,
|
||
129,
|
||
215,
|
||
124,
|
||
215,
|
||
119,
|
||
215,
|
||
114,
|
||
215
|
||
],
|
||
"row_size": 10,
|
||
"col_size": 34,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "E区"
|
||
},
|
||
{
|
||
"areacode": "66g4bm74fetb",
|
||
"areaname": "N14区",
|
||
"polygon": [
|
||
155,
|
||
529,
|
||
149,
|
||
538,
|
||
148,
|
||
542,
|
||
142,
|
||
551,
|
||
170,
|
||
563,
|
||
192,
|
||
563,
|
||
213,
|
||
563,
|
||
213,
|
||
550,
|
||
213,
|
||
538,
|
||
213,
|
||
525,
|
||
192,
|
||
525,
|
||
170,
|
||
525,
|
||
155,
|
||
529
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N14区"
|
||
},
|
||
{
|
||
"areacode": "31q0udej0jkx",
|
||
"areaname": "J区",
|
||
"polygon": [
|
||
393,
|
||
137,
|
||
393,
|
||
152,
|
||
393,
|
||
168,
|
||
393,
|
||
183,
|
||
414,
|
||
183,
|
||
434,
|
||
183,
|
||
455,
|
||
183,
|
||
455,
|
||
168,
|
||
455,
|
||
152,
|
||
455,
|
||
137,
|
||
434,
|
||
137,
|
||
414,
|
||
137,
|
||
393,
|
||
137
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "J区"
|
||
},
|
||
{
|
||
"areacode": "tsew3ejukqfb",
|
||
"areaname": "N17区",
|
||
"polygon": [
|
||
445,
|
||
532,
|
||
445,
|
||
544,
|
||
445,
|
||
555,
|
||
445,
|
||
567,
|
||
468,
|
||
567,
|
||
492,
|
||
567,
|
||
515,
|
||
560,
|
||
515,
|
||
555,
|
||
515,
|
||
544,
|
||
503,
|
||
527,
|
||
492,
|
||
532,
|
||
468,
|
||
532,
|
||
445,
|
||
532
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N17区"
|
||
},
|
||
{
|
||
"areacode": "t4wshyjukqfc",
|
||
"areaname": "G区",
|
||
"polygon": [
|
||
224,
|
||
139,
|
||
224,
|
||
153,
|
||
224,
|
||
169,
|
||
224,
|
||
183,
|
||
245,
|
||
183,
|
||
265,
|
||
183,
|
||
286,
|
||
183,
|
||
286,
|
||
169,
|
||
286,
|
||
153,
|
||
286,
|
||
139,
|
||
265,
|
||
139,
|
||
245,
|
||
139,
|
||
224,
|
||
139
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "G区"
|
||
},
|
||
{
|
||
"areacode": "bp2jtyjukqfd",
|
||
"areaname": "N10区",
|
||
"polygon": [
|
||
60,
|
||
256,
|
||
60,
|
||
276,
|
||
60,
|
||
297,
|
||
60,
|
||
317,
|
||
73,
|
||
317,
|
||
85,
|
||
317,
|
||
98,
|
||
317,
|
||
98,
|
||
297,
|
||
98,
|
||
276,
|
||
98,
|
||
256,
|
||
85,
|
||
256,
|
||
73,
|
||
256,
|
||
60,
|
||
256
|
||
],
|
||
"row_size": 16,
|
||
"col_size": 26,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N10区"
|
||
},
|
||
{
|
||
"areacode": "pee7rxjukqfe",
|
||
"areaname": "N9区",
|
||
"polygon": [
|
||
63,
|
||
181,
|
||
63,
|
||
203,
|
||
63,
|
||
224,
|
||
63,
|
||
246,
|
||
76,
|
||
246,
|
||
89,
|
||
246,
|
||
102,
|
||
246,
|
||
102,
|
||
224,
|
||
102,
|
||
203,
|
||
102,
|
||
181,
|
||
89,
|
||
181,
|
||
76,
|
||
181,
|
||
63,
|
||
181
|
||
],
|
||
"row_size": 16,
|
||
"col_size": 31,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N9区"
|
||
},
|
||
{
|
||
"areacode": "ga8mwdsa8081",
|
||
"areaname": "N7区",
|
||
"polygon": [
|
||
159,
|
||
87,
|
||
159,
|
||
100,
|
||
159,
|
||
113,
|
||
159,
|
||
126,
|
||
185,
|
||
126,
|
||
212,
|
||
126,
|
||
238,
|
||
126,
|
||
238,
|
||
113,
|
||
238,
|
||
100,
|
||
238,
|
||
87,
|
||
212,
|
||
87,
|
||
185,
|
||
87,
|
||
159,
|
||
87
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N7区"
|
||
},
|
||
{
|
||
"areacode": "0trbqk2gt60a",
|
||
"areaname": "M区",
|
||
"polygon": [
|
||
552,
|
||
283,
|
||
552,
|
||
309,
|
||
552,
|
||
335,
|
||
552,
|
||
361,
|
||
557,
|
||
361,
|
||
564,
|
||
361,
|
||
569,
|
||
361,
|
||
569,
|
||
335,
|
||
569,
|
||
309,
|
||
569,
|
||
283,
|
||
564,
|
||
283,
|
||
557,
|
||
283,
|
||
552,
|
||
283
|
||
],
|
||
"row_size": 15,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 75,
|
||
"hint": "M区"
|
||
},
|
||
{
|
||
"areacode": "0yup992gt60b",
|
||
"areaname": "N4区",
|
||
"polygon": [
|
||
440,
|
||
89,
|
||
440,
|
||
101,
|
||
440,
|
||
113,
|
||
440,
|
||
125,
|
||
471,
|
||
125,
|
||
503,
|
||
125,
|
||
507,
|
||
114,
|
||
512,
|
||
105,
|
||
512,
|
||
99,
|
||
505,
|
||
95,
|
||
492,
|
||
89,
|
||
471,
|
||
89,
|
||
440,
|
||
89
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N4区"
|
||
},
|
||
{
|
||
"areacode": "x4uxg3jukqcr",
|
||
"areaname": "Q区",
|
||
"polygon": [
|
||
223,
|
||
467,
|
||
223,
|
||
483,
|
||
223,
|
||
499,
|
||
223,
|
||
515,
|
||
257,
|
||
515,
|
||
290,
|
||
515,
|
||
324,
|
||
515,
|
||
324,
|
||
499,
|
||
324,
|
||
483,
|
||
324,
|
||
467,
|
||
290,
|
||
467,
|
||
257,
|
||
467,
|
||
223,
|
||
467
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "Q区"
|
||
},
|
||
{
|
||
"areacode": "j6l96jjukqcg",
|
||
"areaname": "O区",
|
||
"polygon": [
|
||
437,
|
||
472,
|
||
437,
|
||
486,
|
||
437,
|
||
501,
|
||
437,
|
||
515,
|
||
465,
|
||
515,
|
||
492,
|
||
515,
|
||
514,
|
||
502,
|
||
523,
|
||
499,
|
||
520,
|
||
486,
|
||
497,
|
||
463,
|
||
476,
|
||
469,
|
||
465,
|
||
472,
|
||
437,
|
||
472
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 44,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "O区"
|
||
},
|
||
{
|
||
"areacode": "g4r5lysa8087",
|
||
"areaname": "N13区",
|
||
"polygon": [
|
||
89,
|
||
485,
|
||
89,
|
||
499,
|
||
89,
|
||
514,
|
||
89,
|
||
528,
|
||
106,
|
||
528,
|
||
123,
|
||
528,
|
||
140,
|
||
528,
|
||
140,
|
||
514,
|
||
140,
|
||
499,
|
||
140,
|
||
485,
|
||
123,
|
||
485,
|
||
106,
|
||
485,
|
||
89,
|
||
485
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 36,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N13区"
|
||
},
|
||
{
|
||
"areacode": "q6tq75ej0jl0",
|
||
"areaname": "N18区",
|
||
"polygon": [
|
||
528,
|
||
486,
|
||
535,
|
||
509,
|
||
535,
|
||
520,
|
||
536,
|
||
527,
|
||
552,
|
||
532,
|
||
540,
|
||
531,
|
||
551,
|
||
544,
|
||
582,
|
||
511,
|
||
595,
|
||
495,
|
||
566,
|
||
480,
|
||
566,
|
||
482,
|
||
540,
|
||
470,
|
||
528,
|
||
486
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 36,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N18区"
|
||
},
|
||
{
|
||
"areacode": "twgl38ej0jl1",
|
||
"areaname": "N19区",
|
||
"polygon": [
|
||
583,
|
||
409,
|
||
583,
|
||
435,
|
||
595,
|
||
461,
|
||
589,
|
||
482,
|
||
600,
|
||
484,
|
||
605,
|
||
481,
|
||
610,
|
||
473,
|
||
611,
|
||
463,
|
||
617,
|
||
442,
|
||
619,
|
||
413,
|
||
615,
|
||
409,
|
||
599,
|
||
409,
|
||
583,
|
||
409
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N19区"
|
||
},
|
||
{
|
||
"areacode": "mnxkfajukqcl",
|
||
"areaname": "D区",
|
||
"polygon": [
|
||
111,
|
||
290,
|
||
111,
|
||
314,
|
||
111,
|
||
339,
|
||
111,
|
||
363,
|
||
116,
|
||
363,
|
||
122,
|
||
363,
|
||
127,
|
||
363,
|
||
127,
|
||
339,
|
||
127,
|
||
314,
|
||
127,
|
||
290,
|
||
122,
|
||
290,
|
||
116,
|
||
290,
|
||
111,
|
||
290
|
||
],
|
||
"row_size": 10,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "D区"
|
||
},
|
||
{
|
||
"areacode": "5k7ubtej0jl3",
|
||
"areaname": "N12区",
|
||
"polygon": [
|
||
57,
|
||
390,
|
||
57,
|
||
419,
|
||
57,
|
||
447,
|
||
57,
|
||
476,
|
||
71,
|
||
476,
|
||
85,
|
||
476,
|
||
99,
|
||
476,
|
||
99,
|
||
447,
|
||
99,
|
||
419,
|
||
99,
|
||
390,
|
||
85,
|
||
390,
|
||
71,
|
||
390,
|
||
57,
|
||
390
|
||
],
|
||
"row_size": 16,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N12区"
|
||
},
|
||
{
|
||
"areacode": "bt8yrj74fetj",
|
||
"areaname": "D4区",
|
||
"polygon": [
|
||
234,
|
||
412,
|
||
223,
|
||
423,
|
||
215,
|
||
440,
|
||
215,
|
||
463,
|
||
236,
|
||
463,
|
||
256,
|
||
463,
|
||
277,
|
||
463,
|
||
277,
|
||
440,
|
||
277,
|
||
419,
|
||
277,
|
||
396,
|
||
256,
|
||
396,
|
||
242,
|
||
402,
|
||
234,
|
||
412
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "D4区"
|
||
},
|
||
{
|
||
"areacode": "sm0jwq2gt60m",
|
||
"areaname": "P区",
|
||
"polygon": [
|
||
355,
|
||
486,
|
||
355,
|
||
501,
|
||
329,
|
||
500,
|
||
329,
|
||
515,
|
||
365,
|
||
515,
|
||
400,
|
||
515,
|
||
436,
|
||
515,
|
||
436,
|
||
500,
|
||
436,
|
||
484,
|
||
436,
|
||
469,
|
||
400,
|
||
469,
|
||
360,
|
||
469,
|
||
355,
|
||
486
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "P区"
|
||
},
|
||
{
|
||
"areacode": "dn5kn974fetl",
|
||
"areaname": "B3区",
|
||
"polygon": [
|
||
286,
|
||
193,
|
||
286,
|
||
216,
|
||
286,
|
||
238,
|
||
286,
|
||
261,
|
||
302,
|
||
261,
|
||
319,
|
||
261,
|
||
335,
|
||
261,
|
||
335,
|
||
238,
|
||
335,
|
||
216,
|
||
335,
|
||
193,
|
||
319,
|
||
193,
|
||
302,
|
||
193,
|
||
286,
|
||
193
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "B3区"
|
||
},
|
||
{
|
||
"areacode": "32lnp9jukqcs",
|
||
"areaname": "D3区",
|
||
"polygon": [
|
||
286,
|
||
398,
|
||
286,
|
||
419,
|
||
286,
|
||
441,
|
||
286,
|
||
462,
|
||
302,
|
||
462,
|
||
317,
|
||
462,
|
||
333,
|
||
462,
|
||
333,
|
||
441,
|
||
333,
|
||
419,
|
||
333,
|
||
398,
|
||
317,
|
||
398,
|
||
302,
|
||
398,
|
||
286,
|
||
398
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "D3区"
|
||
},
|
||
{
|
||
"areacode": "u1w8mhej0jlk",
|
||
"areaname": "D2区",
|
||
"polygon": [
|
||
347,
|
||
396,
|
||
347,
|
||
418,
|
||
347,
|
||
441,
|
||
347,
|
||
463,
|
||
362,
|
||
463,
|
||
376,
|
||
463,
|
||
391,
|
||
463,
|
||
391,
|
||
441,
|
||
391,
|
||
418,
|
||
391,
|
||
396,
|
||
376,
|
||
396,
|
||
362,
|
||
396,
|
||
347,
|
||
396
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "D2区"
|
||
},
|
||
{
|
||
"areacode": "p42ypdej0jla",
|
||
"areaname": "D1区",
|
||
"polygon": [
|
||
404,
|
||
397,
|
||
404,
|
||
419,
|
||
404,
|
||
440,
|
||
404,
|
||
462,
|
||
424,
|
||
462,
|
||
444,
|
||
462,
|
||
464,
|
||
462,
|
||
464,
|
||
440,
|
||
460,
|
||
435,
|
||
457,
|
||
425,
|
||
443,
|
||
411,
|
||
424,
|
||
397,
|
||
404,
|
||
397
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "D1区"
|
||
},
|
||
{
|
||
"areacode": "0ca4mx2gt615",
|
||
"areaname": "H2区",
|
||
"polygon": [
|
||
293,
|
||
144,
|
||
293,
|
||
153,
|
||
293,
|
||
162,
|
||
293,
|
||
171,
|
||
307,
|
||
171,
|
||
321,
|
||
171,
|
||
335,
|
||
171,
|
||
335,
|
||
162,
|
||
335,
|
||
153,
|
||
335,
|
||
144,
|
||
321,
|
||
144,
|
||
307,
|
||
144,
|
||
293,
|
||
144
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "H2区"
|
||
},
|
||
{
|
||
"areacode": "q4bf4074fets",
|
||
"areaname": "F区",
|
||
"polygon": [
|
||
163,
|
||
139,
|
||
163,
|
||
155,
|
||
163,
|
||
170,
|
||
163,
|
||
186,
|
||
181,
|
||
186,
|
||
199,
|
||
186,
|
||
217,
|
||
186,
|
||
217,
|
||
170,
|
||
217,
|
||
155,
|
||
217,
|
||
139,
|
||
199,
|
||
139,
|
||
181,
|
||
139,
|
||
163,
|
||
139
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 35,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "F区"
|
||
},
|
||
{
|
||
"areacode": "wpks2e74fett",
|
||
"areaname": "N8区",
|
||
"polygon": [
|
||
93,
|
||
121,
|
||
93,
|
||
136,
|
||
93,
|
||
149,
|
||
93,
|
||
164,
|
||
108,
|
||
164,
|
||
123,
|
||
164,
|
||
138,
|
||
164,
|
||
138,
|
||
149,
|
||
138,
|
||
136,
|
||
138,
|
||
121,
|
||
123,
|
||
121,
|
||
108,
|
||
121,
|
||
93,
|
||
121
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 35,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N8区"
|
||
},
|
||
{
|
||
"areacode": "9xnc21jukqd0",
|
||
"areaname": "N区",
|
||
"polygon": [
|
||
552,
|
||
372,
|
||
554,
|
||
401,
|
||
553,
|
||
423,
|
||
545,
|
||
459,
|
||
555,
|
||
465,
|
||
558,
|
||
462,
|
||
562,
|
||
453,
|
||
568,
|
||
426,
|
||
569,
|
||
398,
|
||
565,
|
||
367,
|
||
564,
|
||
367,
|
||
561,
|
||
369,
|
||
552,
|
||
372
|
||
],
|
||
"row_size": 15,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 89,
|
||
"hint": "N区"
|
||
},
|
||
{
|
||
"areacode": "ul1nl874fetw",
|
||
"areaname": "R区",
|
||
"polygon": [
|
||
157,
|
||
469,
|
||
157,
|
||
484,
|
||
157,
|
||
497,
|
||
157,
|
||
512,
|
||
177,
|
||
512,
|
||
196,
|
||
512,
|
||
216,
|
||
512,
|
||
216,
|
||
497,
|
||
216,
|
||
484,
|
||
216,
|
||
469,
|
||
196,
|
||
469,
|
||
177,
|
||
469,
|
||
157,
|
||
469
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "R区"
|
||
},
|
||
{
|
||
"areacode": "8ejjq6ej0jlg",
|
||
"areaname": "B1区",
|
||
"polygon": [
|
||
406,
|
||
193,
|
||
406,
|
||
214,
|
||
406,
|
||
237,
|
||
406,
|
||
258,
|
||
424,
|
||
258,
|
||
442,
|
||
258,
|
||
460,
|
||
257,
|
||
461,
|
||
237,
|
||
461,
|
||
217,
|
||
461,
|
||
193,
|
||
442,
|
||
193,
|
||
424,
|
||
193,
|
||
406,
|
||
193
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "B1区"
|
||
},
|
||
{
|
||
"areacode": "kt5npejukqd3",
|
||
"areaname": "K区",
|
||
"polygon": [
|
||
466,
|
||
140,
|
||
466,
|
||
155,
|
||
466,
|
||
172,
|
||
466,
|
||
187,
|
||
481,
|
||
187,
|
||
494,
|
||
187,
|
||
509,
|
||
187,
|
||
509,
|
||
172,
|
||
509,
|
||
155,
|
||
509,
|
||
140,
|
||
494,
|
||
140,
|
||
481,
|
||
140,
|
||
466,
|
||
140
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "K区"
|
||
},
|
||
{
|
||
"areacode": "w1perrjukqd5",
|
||
"areaname": "N15区",
|
||
"polygon": [
|
||
225,
|
||
530,
|
||
225,
|
||
545,
|
||
224,
|
||
565,
|
||
247,
|
||
566,
|
||
247,
|
||
578,
|
||
290,
|
||
582,
|
||
325,
|
||
580,
|
||
326,
|
||
561,
|
||
326,
|
||
545,
|
||
326,
|
||
530,
|
||
292,
|
||
530,
|
||
259,
|
||
530,
|
||
225,
|
||
530
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N15区"
|
||
},
|
||
{
|
||
"areacode": "c9e74k2gt61e",
|
||
"areaname": "C3区",
|
||
"polygon": [
|
||
134,
|
||
364,
|
||
134,
|
||
380,
|
||
134,
|
||
396,
|
||
134,
|
||
412,
|
||
160,
|
||
412,
|
||
185,
|
||
412,
|
||
211,
|
||
412,
|
||
211,
|
||
396,
|
||
211,
|
||
380,
|
||
211,
|
||
364,
|
||
185,
|
||
364,
|
||
160,
|
||
364,
|
||
134,
|
||
364
|
||
],
|
||
"row_size": 24,
|
||
"col_size": 43,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "C3区"
|
||
},
|
||
{
|
||
"areacode": "y424tp2gt61f",
|
||
"areaname": "A3区",
|
||
"polygon": [
|
||
451,
|
||
364,
|
||
453,
|
||
373,
|
||
470,
|
||
390,
|
||
486,
|
||
399,
|
||
493,
|
||
413,
|
||
516,
|
||
414,
|
||
541,
|
||
414,
|
||
541,
|
||
398,
|
||
541,
|
||
380,
|
||
541,
|
||
364,
|
||
516,
|
||
364,
|
||
493,
|
||
364,
|
||
451,
|
||
364
|
||
],
|
||
"row_size": 30,
|
||
"col_size": 60,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "A3区"
|
||
},
|
||
{
|
||
"areacode": "d2ekxysa808x",
|
||
"areaname": "C2区",
|
||
"polygon": [
|
||
133,
|
||
241,
|
||
133,
|
||
259,
|
||
133,
|
||
276,
|
||
133,
|
||
294,
|
||
158,
|
||
294,
|
||
185,
|
||
294,
|
||
210,
|
||
294,
|
||
210,
|
||
276,
|
||
210,
|
||
259,
|
||
210,
|
||
241,
|
||
185,
|
||
241,
|
||
158,
|
||
241,
|
||
133,
|
||
241
|
||
],
|
||
"row_size": 24,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "C2区"
|
||
},
|
||
{
|
||
"areacode": "x26ltu2gt61h",
|
||
"areaname": "C1区",
|
||
"polygon": [
|
||
134,
|
||
304,
|
||
134,
|
||
318,
|
||
134,
|
||
333,
|
||
134,
|
||
347,
|
||
165,
|
||
347,
|
||
197,
|
||
347,
|
||
228,
|
||
347,
|
||
228,
|
||
333,
|
||
228,
|
||
318,
|
||
228,
|
||
304,
|
||
197,
|
||
304,
|
||
165,
|
||
304,
|
||
134,
|
||
304
|
||
],
|
||
"row_size": 24,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "C1区"
|
||
},
|
||
{
|
||
"areacode": "02apw92gt618",
|
||
"areaname": "N1区",
|
||
"polygon": [
|
||
581,
|
||
276,
|
||
581,
|
||
296,
|
||
581,
|
||
316,
|
||
604,
|
||
321,
|
||
606,
|
||
335,
|
||
607,
|
||
336,
|
||
620,
|
||
335,
|
||
620,
|
||
316,
|
||
620,
|
||
296,
|
||
620,
|
||
276,
|
||
607,
|
||
276,
|
||
594,
|
||
276,
|
||
581,
|
||
276
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N1区"
|
||
},
|
||
{
|
||
"areacode": "sgatj4jukqdb",
|
||
"areaname": "N5区",
|
||
"polygon": [
|
||
334,
|
||
75,
|
||
334,
|
||
92,
|
||
334,
|
||
109,
|
||
334,
|
||
126,
|
||
367,
|
||
126,
|
||
399,
|
||
126,
|
||
432,
|
||
126,
|
||
432,
|
||
109,
|
||
432,
|
||
92,
|
||
432,
|
||
75,
|
||
399,
|
||
75,
|
||
367,
|
||
75,
|
||
334,
|
||
75
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 35,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N5区"
|
||
},
|
||
{
|
||
"areacode": "c4m1arjukqdc",
|
||
"areaname": "B4区",
|
||
"polygon": [
|
||
216,
|
||
193,
|
||
216,
|
||
215,
|
||
216,
|
||
239,
|
||
216,
|
||
261,
|
||
236,
|
||
261,
|
||
256,
|
||
261,
|
||
276,
|
||
261,
|
||
276,
|
||
239,
|
||
276,
|
||
215,
|
||
276,
|
||
193,
|
||
256,
|
||
193,
|
||
236,
|
||
193,
|
||
216,
|
||
193
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 30,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "B4区"
|
||
},
|
||
{
|
||
"areacode": "fsp4282gt61b",
|
||
"areaname": "N6区",
|
||
"polygon": [
|
||
246,
|
||
74,
|
||
246,
|
||
91,
|
||
246,
|
||
109,
|
||
246,
|
||
126,
|
||
273,
|
||
126,
|
||
299,
|
||
126,
|
||
326,
|
||
126,
|
||
326,
|
||
109,
|
||
326,
|
||
91,
|
||
326,
|
||
74,
|
||
299,
|
||
74,
|
||
273,
|
||
74,
|
||
246,
|
||
74
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 35,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N6区"
|
||
},
|
||
{
|
||
"areacode": "9hw55eej0jlx",
|
||
"areaname": "A1区",
|
||
"polygon": [
|
||
454,
|
||
306,
|
||
454,
|
||
320,
|
||
454,
|
||
336,
|
||
454,
|
||
350,
|
||
484,
|
||
350,
|
||
513,
|
||
350,
|
||
543,
|
||
350,
|
||
543,
|
||
336,
|
||
543,
|
||
320,
|
||
543,
|
||
306,
|
||
513,
|
||
306,
|
||
484,
|
||
306,
|
||
454,
|
||
306
|
||
],
|
||
"row_size": 25,
|
||
"col_size": 50,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "A1区"
|
||
},
|
||
{
|
||
"areacode": "cddsjlsa8097",
|
||
"areaname": "N16区",
|
||
"polygon": [
|
||
335,
|
||
534,
|
||
335,
|
||
550,
|
||
335,
|
||
565,
|
||
335,
|
||
581,
|
||
369,
|
||
581,
|
||
404,
|
||
581,
|
||
438,
|
||
581,
|
||
438,
|
||
565,
|
||
438,
|
||
550,
|
||
438,
|
||
534,
|
||
404,
|
||
534,
|
||
369,
|
||
534,
|
||
335,
|
||
534
|
||
],
|
||
"row_size": 20,
|
||
"col_size": 40,
|
||
"stage": "2",
|
||
"amount": 0,
|
||
"hint": "N16区"
|
||
}
|
||
]
|
||
);
|
||
async function draw() {
|
||
const ctx = uni.createCanvasContext('canvas', instance);
|
||
ctx.save(); // 保存当前状态
|
||
ctx.translate(offsetX.value, offsetY.value); // 应用偏移
|
||
ctx.scale(scale.value, scale.value); // 应用缩放
|
||
const res = await uni.getImageInfo({
|
||
src: imgUrl.value
|
||
});
|
||
ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
|
||
ctx.restore(); // 恢复之前保存的状态
|
||
// 绘制每个图形
|
||
blocks.value.forEach((block) => {
|
||
ctx.beginPath();
|
||
// ctx.fillStyle = block.color;
|
||
// 应用缩放
|
||
ctx.scale(scale.value, scale.value); // 应用缩放
|
||
switch (block.hint) {
|
||
case block.hint: // 四边形
|
||
for (let i = 0; i < block.polygon.length; i += 2) {
|
||
const x = block.polygon[i];
|
||
const y = block.polygon[i + 1];
|
||
if (i === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
}
|
||
ctx.closePath();
|
||
break;
|
||
}
|
||
|
||
ctx.restore(); // 恢复缩放前的状态，避免影响其他绘制
|
||
|
||
ctx.stroke(); // 绘制边框
|
||
if (block.color) ctx.fill(); // 如果有填充色就填充
|
||
});
|
||
|
||
ctx.draw()
|
||
}
|
||
|
||
|
||
|
||
// 处理canvas触摸事件
|
||
function handleCanvasTouch(event) {
|
||
// 获取触摸点的坐标
|
||
const x = event.touches[0].x;
|
||
const y = event.touches[0].y;
|
||
console.log(x, y, '12');
|
||
|
||
}
|
||
|
||
|
||
// 触摸开始
|
||
const handleTouchStart = (e) => {
|
||
tempFlag.value = true
|
||
console.log('handleTouchStart')
|
||
// 获取触摸点的坐标
|
||
tempX.value = e.touches[0].x;
|
||
tempY.value = e.touches[0].y;
|
||
|
||
// 判断点击位置
|
||
|
||
if (e.touches.length === 1) {
|
||
// 单指拖动
|
||
startX.value = e.touches[0].clientX - offsetX.value
|
||
startY.value = e.touches[0].clientY - offsetY.value
|
||
isDragging.value = true
|
||
} else if (e.touches.length === 2) {
|
||
// 双指缩放
|
||
const x1 = e.touches[0].clientX
|
||
const y1 = e.touches[0].clientY
|
||
const x2 = e.touches[1].clientX
|
||
const y2 = e.touches[1].clientY
|
||
lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
|
||
}
|
||
}
|
||
|
||
// 触摸移动
|
||
const handleTouchMove = (e) => {
|
||
console.log('11111');
|
||
tempFlag.value = false
|
||
if (e.touches.length === 1 && isDragging.value) {
|
||
// 单指移动逻辑...
|
||
offsetX.value = e.touches[0].clientX - startX.value;
|
||
offsetY.value = e.touches[0].clientY - startY.value;
|
||
} else if (e.touches.length === 2) {
|
||
// 双指缩放逻辑...
|
||
const x1 = e.touches[0].clientX,
|
||
y1 = e.touches[0].clientY;
|
||
const x2 = e.touches[1].clientX,
|
||
y2 = e.touches[1].clientY;
|
||
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||
|
||
if (lastDistance.value > 0) {
|
||
scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
|
||
draw(); // 重新绘制Canvas内容
|
||
}
|
||
lastDistance.value = distance;
|
||
}
|
||
};
|
||
|
||
|
||
// 触摸结束
|
||
const handleTouchEnd = () => {
|
||
console.log('handleTouchEnd')
|
||
lastDistance.value = -1
|
||
isDragging.value = false
|
||
if(!tempFlag.value){
|
||
return
|
||
}
|
||
blocks.value.forEach((block) => {
|
||
if (isPointInQuadrilateral(tempX.value, tempY.value, block.polygon)) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: block.hint,
|
||
showCancel: true, // 显示取消按钮
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('用户点击了“确定”按钮');
|
||
} else if (res.cancel) {
|
||
console.log('用户点击了“取消”按钮');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 按钮点击事件处理函数
|
||
const handleDraw = () => {
|
||
draw(); // 调用绘图函数
|
||
}
|
||
|
||
// onMounted(() => {
|
||
// setInterval(()=>{
|
||
// draw()
|
||
// },300)
|
||
// // 确保在组件挂载后可以获取到Canvas元素
|
||
// })
|
||
// useRafFn(() => {
|
||
// draw()
|
||
// })
|
||
onReady(() => {
|
||
console.log('onReadyonReady');
|
||
uni.downloadFile({
|
||
url: imgUrl.value,
|
||
success: function(sres) {
|
||
console.log(sres, 'sres');
|
||
imgUrl.value = sres.tempFilePath || sres.path
|
||
// setInterval(()=>{
|
||
draw()
|
||
// },16)
|
||
},
|
||
fail: function(fres) {
|
||
console.log('fres', fres)
|
||
}
|
||
})
|
||
})
|
||
function isPointInQuadrilateral(px, py, polygon) {
|
||
let inside = false;
|
||
const n = polygon.length / 2; // 因为每两个数表示一个点(x,y)
|
||
for (let i = 0; i < n; i++) {
|
||
let p1_x = polygon[2 * i];
|
||
let p1_y = polygon[2 * i + 1];
|
||
let p2_x, p2_y;
|
||
if (i === n - 1) { // 最后一个点与第一个点相连形成闭合
|
||
p2_x = polygon[0];
|
||
p2_y = polygon[1];
|
||
} else {
|
||
p2_x = polygon[2 * i + 2];
|
||
p2_y = polygon[2 * i + 3];
|
||
}
|
||
|
||
if (py > Math.min(p1_y, p2_y) && py <= Math.max(p1_y, p2_y) && px <= Math.max(p1_x, p2_x)) {
|
||
if (p1_y !== p2_y) {
|
||
let xinters = (py - p1_y) * (p2_x - p1_x) / (p2_y - p1_y) + p1_x;
|
||
if (p1_x === p2_x || px <= xinters) {
|
||
inside = !inside;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return inside;
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
button {
|
||
margin-top: 10px;
|
||
}
|
||
</style> |