<template>
	<view>
		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
		<canvas
			 @touchstart="handleCanvasTouch"
		 canvas-id="canvas" id="canvas" style="border: 1px solid red;height: 600px;width: 100vw;"></canvas>

		<!-- 添加一个按钮，用于触发绘图 -->
		<button @click="handleDraw">点击绘制圆形</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const canvasWidth = ref(375) // 动态设置Canvas宽度
	const canvasHeight = ref(400) // 动态设置Canvas高度
	const instance = getCurrentInstance()


	async function draw() {
		const imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"
		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
		const res = await uni.getImageInfo({
			src: imgUrl,
		})

		ctx.drawImage(res.path, 0, 0);
		ctx.beginPath();
		ctx.moveTo(50, 50); // 左下角点
		ctx.lineTo(150, 50); // 右下角点
		ctx.lineTo(200, 100); // 右上角点
		ctx.lineTo(100, 100); // 左上角点
		ctx.closePath(); // 闭合路径
		ctx.stroke(); // 绘制边框

		ctx.draw()
	}
	
		// 处理canvas触摸事件
		function handleCanvasTouch(event) {
			// 获取触摸点的坐标
			const x = event.touches[0].x;
			const y = event.touches[0].y;
			console.log(x,y,'12');
		
		}

	
	
	// 按钮点击事件处理函数
	const handleDraw = () => {
		draw(); // 调用绘图函数
	}

	onMounted(() => {
		draw()
		// 确保在组件挂载后可以获取到Canvas元素
	})
</script>

<style scoped>
	button {
		margin-top: 10px;
	}
</style>