1

pages/index/index.vue

@@ -2,17 +2,12 @@
 	<view>
 		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
 		<!-- // @touchstart="handleCanvasTouch" -->
-		<canvas
+		<canvas @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{
-			  @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>
-		 canvas-id="canvas" id="canvas" ></canvas>
+		<!-- style="border: 1px solid red;height: 600px;width: 100vw;" -->
-		 <!-- 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>
@@ -25,7 +20,9 @@
 		onMounted,
 		getCurrentInstance
 	} from 'vue'
-	import {  onReady } from '@dcloudio/uni-app'
+	import {
+		onReady
+	} from '@dcloudio/uni-app'
 
 	const canvasWidth = ref(375) // 动态设置Canvas宽度
 	const canvasHeight = ref(400) // 动态设置Canvas高度
@@ -38,7 +35,28 @@
 	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([{
+		points: [{
+				x: 50,
+				y: 50
+			}, // 左下角点
+			{
+				x: 150,
+				y: 50
+			}, // 右下角点
+			{
+				x: 200,
+				y: 100
+			}, // 右上角点
+			{
+				x: 100,
+				y: 100
+			}, // 左上角点
+		],
+		message: '点击了四边形',
+		type: 'quadrilateral'
+	}]);
 	async function draw() {
 		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
 		ctx.scale(scale.value, scale.value);
@@ -46,7 +64,26 @@
 			src: imgUrl.value,
 		})
 		ctx.drawImage(res.path, 0, 0);
-		
+
+		// 绘制每个图形
+		blocks.value.forEach((block) => {
+			ctx.beginPath();
+			ctx.fillStyle = block.color;
+
+			switch (block.type) {
+				case 'quadrilateral': // 四边形
+					ctx.moveTo(block.points[0].x, block.points[0].y);
+					for (let i = 1; i < block.points.length; i++) {
+						ctx.lineTo(block.points[i].x, block.points[i].y);
+					}
+					ctx.closePath();
+					break;
+
+			}
+
+			ctx.stroke(); // 绘制边框
+		});
+
 		// ctx.beginPath();
 		// ctx.moveTo(50, 50); // 左下角点
 		// ctx.lineTo(150, 50); // 右下角点
@@ -54,7 +91,7 @@
 		// ctx.lineTo(100, 100); // 左上角点
 		// ctx.closePath(); // 闭合路径
 		// ctx.stroke(); // 绘制边框
-		
+
 		// 先不删
 		// let xoffset = 0, yoffset = 0, flag = false;
 		// polygonList.forEach((level, index) => {
@@ -77,67 +114,98 @@
 		// })
 		ctx.draw()
 	}
-	
-		// 处理canvas触摸事件
-		function handleCanvasTouch(event) {
-			// 获取触摸点的坐标
-			const x = event.touches[0].x;
-			const y = event.touches[0].y;
-			console.log(x,y,'12');
-		
-		}
 
-	
+	// 处理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;
-	  if (e.touches.length === 1) {
+		const y = e.touches[0].y;
-	    // 单指拖动
+
-	    startX.value = e.touches[0].clientX - offsetX.value
+		// 判断点击位置
-	    startY.value = e.touches[0].clientY - offsetY.value
+		blocks.value.forEach((block) => {
-	    isDragging.value = true
+			if (isPointInQuadrilateral(x, y, block.points)) {
-	  } else if (e.touches.length === 2) {
+				uni.showModal({
-	    // 双指缩放
+					title: '提示',
-	    const x1 = e.touches[0].clientX
+					content: block.message,
-	    const y1 = e.touches[0].clientY
+					showCancel: true, // 显示取消按钮
-	    const x2 = e.touches[1].clientX
+					success: (res) => {
-	    const y2 = e.touches[1].clientY
+						if (res.confirm) {
-	    lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+							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 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内容
+			}
+		}
 	}
-	
+
 	// 触摸移动
 	const handleTouchMove = (e) => {
 		console.log('handleTouchMove')
-	  if (e.touches.length === 1 && isDragging.value) {
+		if (e.touches.length === 1 && isDragging.value) {
-	    // 单指移动
+			// 单指移动
-	    const currentX = e.touches[0].clientX - startX.value
+			const currentX = e.touches[0].clientX - startX.value
-	    const currentY = e.touches[0].clientY - startY.value
+			const currentY = e.touches[0].clientY - startY.value
-	    offsetX.value = currentX
+			offsetX.value = currentX
-	    offsetY.value = currentY
+			offsetY.value = currentY
-	  } else if (e.touches.length === 2) {
+		} else if (e.touches.length === 2) {
-	    // 双指缩放
+			// 双指缩放
-	    const x1 = e.touches[0].clientX
+			const x1 = e.touches[0].clientX
-	    const y1 = e.touches[0].clientY
+			const y1 = e.touches[0].clientY
-	    const x2 = e.touches[1].clientX
+			const x2 = e.touches[1].clientX
-	    const y2 = e.touches[1].clientY
+			const y2 = e.touches[1].clientY
-	    const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+			const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
-	    
+
-	    if (lastDistance.value > 0) {
+			if (lastDistance.value > 0) {
-	      const newScale = scale.value * (distance / lastDistance.value)
+				const newScale = scale.value * (distance / lastDistance.value)
-	      scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围
+				scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围
-	    }
+			}
-	    lastDistance.value = distance
+			lastDistance.value = distance
-	  }
+		}
 	}
-	
+
 	// 触摸结束
 	const handleTouchEnd = () => {
 		console.log('handleTouchEnd')
-	  lastDistance.value = -1
+		lastDistance.value = -1
-	  isDragging.value = false
+		isDragging.value = false
 	}
-	
+
 	// 按钮点击事件处理函数
 	const handleDraw = () => {
 		draw(); // 调用绘图函数
@@ -152,16 +220,36 @@
 	onReady(() => {
 		console.log('onReadyonReady');
 		uni.downloadFile({
-			url:imgUrl.value,
+			url: imgUrl.value,
-			success: function (sres) {
+			success: function(sres) {
-				console.log(sres,'sres');
+				console.log(sres, 'sres');
 				imgUrl.value = sres.tempFilePath || sres.path
 				draw()
-			},fail:function(fres){
+			},
-				console.log('fres',fres)
+			fail: function(fres) {
-      }
+				console.log('fres', fres)
+			}
 		})
 	})
+	// 判断点是否在四边形内
+	function isPointInQuadrilateral(px, py, points) {
+		let inside = false;
+		const n = points.length;
+		let p1 = points[0];
+		for (let i = 1; i <= n; i++) {
+			let p2 = points[i % n];
+			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;
+					}
+				}
+			}
+			p1 = p2;
+		}
+		return inside;
+	}
 </script>
 
 <style scoped>