<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 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) => {
		console.log('handleTouchStart')
		// 获取触摸点的坐标
		const x = e.touches[0].x;
		const y = e.touches[0].y;
		// 判断点击位置
		blocks.value.forEach((block) => {
			if (isPointInQuadrilateral(x, y, block.polygon)) {
				uni.showModal({
					title: '提示',
					content: block.hint,
					showCancel: true, // 显示取消按钮
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击了“确定”按钮');
						} else if (res.cancel) {
							console.log('用户点击了“取消”按钮');
						}
					},
				});
			}
		});
		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');
		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
	}

	// 按钮点击事件处理函数
	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>