From 0a3db138624b09082cace4eddc371718fb9cac63 Mon Sep 17 00:00:00 2001
From: renyt <renyt@troyrc.com>
Date: Thu, 8 May 2025 17:36:20 +0800
Subject: [PATCH] 1

---
 pages.json                                    |  28 ---
 pages/index/index.vue                         | 173 ------------------
 pages/index/index_step4.vue                   |  53 ------
 pages/index/indexclick.vue                    | 125 -------------
 pages/index/step2.vue                         |  17 --
 unpackage/dist/dev/mp-weixin/app.js           |   2 +-
 unpackage/dist/dev/mp-weixin/app.json         |   4 +-
 unpackage/dist/dev/mp-weixin/index.js         | 133 ++++++++++++--
 .../dist/dev/mp-weixin/project.config.json    |   2 +-
 9 files changed, 122 insertions(+), 415 deletions(-)
 delete mode 100644 pages.json
 delete mode 100644 pages/index/index.vue
 delete mode 100644 pages/index/index_step4.vue
 delete mode 100644 pages/index/indexclick.vue
 delete mode 100644 pages/index/step2.vue

diff --git a/pages.json b/pages.json
deleted file mode 100644
index aed7ae0..0000000
--- a/pages.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index_step4",
-			"style": {
-				"navigationBarTitleText": "step"
-			}
-		},{
-			"path": "pages/index/step2",
-			"style": {
-				"navigationBarTitleText": "fu"
-			}
-		},{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		}
-	
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {}
-}
diff --git a/pages/index/index.vue b/pages/index/index.vue
deleted file mode 100644
index 4111f59..0000000
--- a/pages/index/index.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-	<view>
-		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
-		<canvas @touchstart="handleCanvasTouch" @touchmove="handleCanvasTouchMove" @touchend="handleCanvasTouchEnd"
-			canvas-id="canvas" id="canvas" style="border: 1px solid red;height: 600px;width: 1000px;"></canvas>
-
-		<!-- 添加一个按钮,用于触发绘图 -->
-		<button @click="handleDraw">点击绘制圆形</button>
-	</view>
-</template>
-
-<script setup>
-	import {
-		ref,
-		onMounted,
-		getCurrentInstance
-	} from 'vue'
-	// 平移和缩放状态
-	const translateX = ref(0);
-	const translateY = ref(0);
-	const scale = ref(1);
-
-	const canvasWidth = ref(375) // 动态设置Canvas宽度
-	const canvasHeight = ref(400) // 动态设置Canvas高度
-	const instance = getCurrentInstance()
-	// 定义图形数组
-	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 imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"
-		const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
-		ctx.translate(translateX.value, translateY.value );
-		ctx.scale(scale.value, scale.value);
-		const res = await uni.getImageInfo({
-			src: imgUrl,
-		})
-
-		ctx.drawImage(res.path, 0, 0,canvasWidth.value ,canvasHeight.value);
-	
-		// 绘制每个图形
-		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.draw()
-	}
-	// 处理canvas触摸移动事件
-	function handleCanvasTouchMove(event) {
-		if (event.touches.length === 1) {
-			// 单指平移
-			translateX.value += event.touches[0].x - event.touches[0].startX;
-			translateY.value += event.touches[0].y - event.touches[0].startY;
-		} else if (event.touches.length === 2) {
-			// 双指缩放
-			const distance1 = Math.sqrt(
-				(event.touches[0].x - event.touches[1].x) ** 2 +
-				(event.touches[0].y - event.touches[1].y) ** 2
-			);
-			const distance2 = Math.sqrt(
-				(event.touches[0].startX - event.touches[1].startX) ** 2 +
-				(event.touches[0].startY - event.touches[1].startY) ** 2
-			);
-			scale.value *= distance1 / distance2;
-		}
-
-		draw(); // 重新绘制
-	}
-
-	// 处理canvas触摸结束事件
-	function handleCanvasTouchEnd(event) {
-		// 保存当前触摸点的初始位置
-		event.touches.forEach((touch) => {
-			touch.startX = touch.x;
-			touch.startY = touch.y;
-		});
-	}
-	// 处理canvas触摸事件
-	function handleCanvasTouch(event) {
-		// 获取触摸点的坐标
-		const x = event.touches[0].x;
-		const y = event.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('用户点击了“取消”按钮');
-						}
-					},
-				});
-			}
-		});
-	}
-
-
-	// 按钮点击事件处理函数
-	const handleDraw = () => {
-		draw(); // 调用绘图函数
-	}
-
-	onMounted(() => {
-		draw()
-		// 确保在组件挂载后可以获取到Canvas元素
-	})
-	// 判断点是否在四边形内
-	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>
-	button {
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
diff --git a/pages/index/index_step4.vue b/pages/index/index_step4.vue
deleted file mode 100644
index bdc7819..0000000
--- a/pages/index/index_step4.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-	<view>
-		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
-		<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;border: 1px solid red;" :width="canvasWidth" :height="canvasHeight"></canvas>
-
-		<!-- 添加一个按钮,用于触发绘图 -->
-		<button @click="handleDraw">跳转step2</button>
-	</view>
-</template>
-
-<script setup>
-	import { ref, onMounted ,getCurrentInstance } from 'vue'
-
-	const canvasWidth = ref(200)  // 动态设置Canvas宽度
-	const canvasHeight = ref(200) // 动态设置Canvas高度
-	const instance = getCurrentInstance()  
-	// 定义绘图函数
-	function draw() {
-		const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
-		console.log(ctx,'12');
-		// 绘制外圆
-		ctx.beginPath() // 开始路径
-		ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
-		ctx.setFillStyle('rgba(100, 220, 0, 1)') // 设置填充颜色为黑色,无透明度
-		ctx.fill() // 填充所创建的路径
-		
-		// 绘制内圆以形成环形效果
-		ctx.beginPath() // 开始新的路径
-		ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100),但半径为60的圆形
-		ctx.setFillStyle('white') // 设置填充颜色为白色
-		ctx.fill() // 填充以“清除”内部区域,形成环形
-		ctx.draw()
-	}
-
-	// 按钮点击事件处理函数
-	const handleDraw = () => {
-		uni.navigateTo({
-			url:'/pages/index/step2'
-		})
-		draw(); // 调用绘图函数
-	}
-
-	onMounted(() => {
-		draw()
-		// 确保在组件挂载后可以获取到Canvas元素
-	})
-</script>
-
-<style scoped>
-	button {
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
diff --git a/pages/index/indexclick.vue b/pages/index/indexclick.vue
deleted file mode 100644
index daea555..0000000
--- a/pages/index/indexclick.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<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()
-	// 定义绘图函数
-	const blocks = ref([{
-			x: 50,
-			y: 50,
-			width: 100,
-			height: 100,
-			color: 'red',
-			message: '点击了红色方块'
-		},
-		{
-			x: 200,
-			y: 50,
-			width: 100,
-			height: 100,
-			color: 'blue',
-			message: '点击了蓝色方块'
-		},
-		{
-			x: 50,
-			y: 200,
-			width: 100,
-			height: 100,
-			color: 'green',
-			message: '点击了绿色方块'
-		},
-		{
-			x: 200,
-			y: 200,
-			width: 100,
-			height: 100,
-			color: 'yellow',
-			message: '点击了黄色方块'
-		},
-		{
-			x: 350,
-			y: 50,
-			width: 100,
-			height: 100,
-			color: 'purple',
-			message: '点击了紫色方块'
-		},
-	])
-
-	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,
-		})
-		console.log(res, 'res');
-		ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
-
-		// 定义5个方块的颜色和位置
-
-		// 绘制每个方块
-		blocks.value.forEach((block) => {
-			ctx.beginPath();
-			ctx.fillStyle = block.color;
-			ctx.rect(block.x, block.y, block.width, block.height);
-			ctx.fill();
-		});
-		ctx.draw()
-	}
-	// 处理canvas触摸事件
-	function handleCanvasTouch(event) {
-		// 获取触摸点的坐标
-		const x = event.touches[0].x;
-		const y = event.touches[0].y;
-		// 定义5个方块的颜色和位置
-
-		// 判断点击位置
-		blocks.value.forEach((block) => {
-			if (x >= block.x && x <= block.x + block.width && y >= block.y && y <= block.y + block.height) {
-				uni.showModal({
-					title: '提示',
-					content: block.message,
-					showCancel: true, // 显示取消按钮
-					success: (res) => {
-						if (res.confirm) {
-							console.log('用户点击了“确定”按钮');
-						} else if (res.cancel) {
-							console.log('用户点击了“取消”按钮');
-						}
-					},
-				});
-			}
-		});
-	}
-	// 按钮点击事件处理函数
-	const handleDraw = () => {
-		draw(); // 调用绘图函数
-	}
-
-	onMounted(() => {
-		draw()
-		// 确保在组件挂载后可以获取到Canvas元素
-	})
-</script>
-
-<style scoped>
-	button {
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
diff --git a/pages/index/step2.vue b/pages/index/step2.vue
deleted file mode 100644
index 7c9894b..0000000
--- a/pages/index/step2.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-	<view>
-	<indexstep2></indexstep2>
-	</view>
-</template>
-
-<script setup>
-	import indexstep2 from "./index.vue" 
-	import {
-		ref
-	} from 'vue'
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/app.js b/unpackage/dist/dev/mp-weixin/app.js
index 38a674c..0d76920 100644
--- a/unpackage/dist/dev/mp-weixin/app.js
+++ b/unpackage/dist/dev/mp-weixin/app.js
@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const common_vendor = require("./common/vendor.js");
 if (!Math) {
+  "./pages/index/index.js";
   "./pages/index/index_step4.js";
   "./pages/index/step2.js";
-  "./pages/index/index.js";
 }
 const _sfc_main = {
   onLaunch: function() {
diff --git a/unpackage/dist/dev/mp-weixin/app.json b/unpackage/dist/dev/mp-weixin/app.json
index d4646dd..adbd472 100644
--- a/unpackage/dist/dev/mp-weixin/app.json
+++ b/unpackage/dist/dev/mp-weixin/app.json
@@ -1,8 +1,8 @@
 {
   "pages": [
+    "pages/index/index",
     "pages/index/index_step4",
-    "pages/index/step2",
-    "pages/index/index"
+    "pages/index/step2"
   ],
   "window": {
     "navigationBarTextStyle": "black",
diff --git a/unpackage/dist/dev/mp-weixin/index.js b/unpackage/dist/dev/mp-weixin/index.js
index 756d3d3..987710f 100644
--- a/unpackage/dist/dev/mp-weixin/index.js
+++ b/unpackage/dist/dev/mp-weixin/index.js
@@ -3,32 +3,135 @@ const common_vendor = require("./common/vendor.js");
 const _sfc_main = {
   __name: "index",
   setup(__props) {
-    const canvasWidth = common_vendor.ref(200);
-    const canvasHeight = common_vendor.ref(200);
+    const translateX = common_vendor.ref(0);
+    const translateY = common_vendor.ref(0);
+    const scale = common_vendor.ref(1);
+    const canvasWidth = common_vendor.ref(375);
+    const canvasHeight = common_vendor.ref(400);
     const instance = common_vendor.getCurrentInstance();
-    function draw() {
+    const blocks = common_vendor.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 imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg";
       const ctx = common_vendor.index.createCanvasContext("canvas", instance);
-      common_vendor.index.__f__("log", "at pages/index/index.vue:20", ctx, "12");
-      ctx.beginPath();
-      ctx.arc(100, 100, 80, 0, Math.PI * 2);
-      ctx.setFillStyle("rgba(0, 0, 0, 1)");
-      ctx.fill();
-      ctx.beginPath();
-      ctx.arc(100, 100, 75, 0, Math.PI * 2);
-      ctx.setFillStyle("white");
-      ctx.fill();
+      ctx.translate(translateX.value, translateY.value);
+      ctx.scale(scale.value, scale.value);
+      const res = await common_vendor.index.getImageInfo({
+        src: imgUrl
+      });
+      ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
+      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.draw();
     }
+    function handleCanvasTouchMove(event) {
+      if (event.touches.length === 1) {
+        translateX.value += event.touches[0].x - event.touches[0].startX;
+        translateY.value += event.touches[0].y - event.touches[0].startY;
+      } else if (event.touches.length === 2) {
+        const distance1 = Math.sqrt(
+          (event.touches[0].x - event.touches[1].x) ** 2 + (event.touches[0].y - event.touches[1].y) ** 2
+        );
+        const distance2 = Math.sqrt(
+          (event.touches[0].startX - event.touches[1].startX) ** 2 + (event.touches[0].startY - event.touches[1].startY) ** 2
+        );
+        scale.value *= distance1 / distance2;
+      }
+      draw();
+    }
+    function handleCanvasTouchEnd(event) {
+      event.touches.forEach((touch) => {
+        touch.startX = touch.x;
+        touch.startY = touch.y;
+      });
+    }
+    function handleCanvasTouch(event) {
+      const x = event.touches[0].x;
+      const y = event.touches[0].y;
+      blocks.value.forEach((block) => {
+        if (isPointInQuadrilateral(x, y, block.points)) {
+          common_vendor.index.showModal({
+            title: "提示",
+            content: block.message,
+            showCancel: true,
+            // 显示取消按钮
+            success: (res) => {
+              if (res.confirm) {
+                common_vendor.index.__f__("log", "at pages/index/index.vue:128", "用户点击了“确定”按钮");
+              } else if (res.cancel) {
+                common_vendor.index.__f__("log", "at pages/index/index.vue:130", "用户点击了“取消”按钮");
+              }
+            }
+          });
+        }
+      });
+    }
     const handleDraw = () => {
       draw();
     };
     common_vendor.onMounted(() => {
+      draw();
     });
+    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;
+    }
     return (_ctx, _cache) => {
       return {
-        a: canvasWidth.value,
-        b: canvasHeight.value,
-        c: common_vendor.o(handleDraw)
+        a: common_vendor.o(handleCanvasTouch),
+        b: common_vendor.o(handleCanvasTouchMove),
+        c: common_vendor.o(handleCanvasTouchEnd),
+        d: common_vendor.o(handleDraw)
       };
     };
   }
diff --git a/unpackage/dist/dev/mp-weixin/project.config.json b/unpackage/dist/dev/mp-weixin/project.config.json
index 1a75e49..cd73585 100644
--- a/unpackage/dist/dev/mp-weixin/project.config.json
+++ b/unpackage/dist/dev/mp-weixin/project.config.json
@@ -19,7 +19,7 @@
     },
     "compileType": "miniprogram",
     "libVersion": "3.8.3",
-    "appid": "touristappid",
+    "appid": "wx5c9edf82da6032c4",
     "projectname": "canvas",
     "condition": {},
     "editorSetting": {