1

pages/index/index.vue

@@ -2,16 +2,11 @@
 	<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;" -->
 		<image src="https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"></image>
 		<!-- 添加一个按钮，用于触发绘图 -->
@@ -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);
@@ -47,6 +65,25 @@
 		})
 		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); // 右下角点
@@ -90,7 +127,26 @@
 
 	// 触摸开始
 	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.points)) {
+				uni.showModal({
+					title: '提示',
+					content: block.message,
+					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
@@ -98,11 +154,23 @@
 			isDragging.value = true
 		} 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
-	    lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+			// 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内容
+			}
 		}
 	}
 
@@ -157,11 +225,31 @@
 				console.log(sres, 'sres');
 				imgUrl.value = sres.tempFilePath || sres.path
 				draw()
-			},fail:function(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>