canvas/pages/index/index.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>
		 <!-- style="border: 1px solid red;height: 600px;width: 100vw;" -->
		<image src="https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"></image>
		<!-- 添加一个按钮，用于触发绘图 -->
		<button @click="handleDraw">点击绘制圆形</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {  onReady } from '@dcloudio/uni-app'

	const canvasWidth = ref(375) // 动态设置Canvas宽度
	const canvasHeight = ref(400) // 动态设置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

	async function draw() {
		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
		ctx.scale(scale.value, scale.value);
		const res = await uni.getImageInfo({
			src: imgUrl.value,
		})
		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(); // 绘制边框
		
		// 先不删
		// let xoffset = 0, yoffset = 0, flag = false;
		// polygonList.forEach((level, index) => {
		// 	// console.log('level',level)
		// 	ctx.moveTo(level.polygon[0] + xoffset, level.polygon[0] + yoffset)
		// 	level.polygon.forEach((level2,level2Index)=>{
		// 		ctx.beginPath()
		// 		if(level2Index != level.polygon.length ){
		// 			ctx.lineTo(level2 + xoffset, level.polygon[level2Index+1])
		// 			console.log(level2 + xoffset, level.polygon[level2Index+1])
		// 		}else{
		// 			ctx.lineTo(level2 + xoffset, level.polygon[0])
		// 			console.log(level2 + xoffset, level.polygon[0])
		// 		}
		// 		ctx.closePath()
		// 	})
		// 	if(polygonList.length == index){
		// 		flag = true
		// 	}
		// })
		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')
	  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('handleTouchMove')
	  if (e.touches.length === 1 && isDragging.value) {
	    // 单指移动
	    const currentX = e.touches[0].clientX - startX.value
	    const currentY = e.touches[0].clientY - startY.value
	    offsetX.value = currentX
	    offsetY.value = currentY
	  } 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
	    const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
	    
	    if (lastDistance.value > 0) {
	      const newScale = scale.value * (distance / lastDistance.value)
	      scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围
	    }
	    lastDistance.value = distance
	  }
	}
	
	// 触摸结束
	const handleTouchEnd = () => {
		console.log('handleTouchEnd')
	  lastDistance.value = -1
	  isDragging.value = false
	}
	
	// 按钮点击事件处理函数
	const handleDraw = () => {
		draw(); // 调用绘图函数
	}

	// onMounted(() => {
	// 	setInterval(()=>{
	// 		draw()
	// 	},300)
	// 	// 确保在组件挂载后可以获取到Canvas元素
	// })
	onReady(() => {
		console.log('onReadyonReady');
		uni.downloadFile({
			url:imgUrl.value,
			success: function (sres) {
				console.log(sres,'sres');
				imgUrl.value = sres.tempFilePath || sres.path
				draw()
			},fail:function(fres){
				console.log('fres',fres)
      }
		})
	})
</script>

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