拖拽

.gitignore

@@ -0,0 +1,19 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules*
+.DS_Store
+*.local
+dist
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx5c9edf82da6032c4",
         "setting" : {
             "urlCheck" : false
         },

pages.json

@@ -1,11 +1,22 @@
 {
 	"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",

pages/index/index_step4.vue

@@ -0,0 +1,53 @@
+<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>

pages/index/indexclick.vue

@@ -0,0 +1,125 @@
+<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>

pages/index/step2.vue

@@ -0,0 +1,17 @@
+<template>
+	<view>
+	<indexstep2></indexstep2>
+	</view>
+</template>
+
+<script setup>
+	import indexstep2 from "./index.vue" 
+	import {
+		ref
+	} from 'vue'
+
+</script>
+
+<style scoped>
+
+</style>

pages/index/utils.js

@@ -0,0 +1,79 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useElementSize(targetSelector) {
+  const width = ref(0)
+  const height = ref(0)
+  let observer = null
+
+  const updateSize = () => {
+    const query = uni.createSelectorQuery()
+    query.select(targetSelector).boundingClientRect(rect => {
+      if (rect) {
+        width.value = rect.width
+        height.value = rect.height
+      }
+    }).exec()
+  }
+
+  onMounted(() => {
+    updateSize()
+    // 尝试使用 ResizeObserver（部分小程序基础库支持）
+    if (uni.createIntersectionObserver) {
+      observer = uni.createIntersectionObserver(this, {
+        observeAll: true
+      })
+      observer.relativeToViewport().observe(targetSelector, updateSize)
+    }
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  return { width, height, updateSize }
+}
+
+export function useEventListener(target, event, handler) {
+  // 组件内事件
+  if (target.$on) {
+    target.$on(event, handler)
+    const stop = () => target.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+  // 全局事件（需配合 uni.$emit 使用）
+  else {
+    uni.$on(event, handler)
+    const stop = () => uni.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+}
+
+
+export function useRafFn(fn, { immediate = true } = {}) {
+  let isActive = false
+  let timerId = null
+
+  const loop = () => {
+    if (!isActive) return
+    fn()
+    timerId = setTimeout(loop, 16) // 模拟 60fps
+  }
+
+  const start = () => {
+    if (isActive) return
+    isActive = true
+    loop()
+  }
+
+  const stop = () => {
+    isActive = false
+    clearTimeout(timerId)
+  }
+
+  onUnmounted(stop)
+  immediate && start()
+
+  return { start, stop }
+}

unpackage/dist/dev/.sourcemap/mp-weixin-devtools/pages/index/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["draw","ctx","common_vendor","index","createCanvasContext","beginPath","arc","Math","PI","setFillStyle","setFillRule","fill","onMounted","wx","createPage","_sfc_main"],"sources":["index.vue","cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<canvas \n\t\t\tcanvas-id=\"canvas\" \n\t\t\tstyle=\"width: 100px; height: 100px;\"\n\t\t></canvas>\n\t</view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n\tconst ctx = uni.createCanvasContext('canvas')\n\n\tctx.beginPath()\n\tctx.arc(50, 50, 30, 0, Math.PI * 2, true)\n\tctx.arc(50, 50, 15, 0, Math.PI * 2, true)\n\tctx.setFillStyle('black')\n\tctx.setFillRule('evenodd') // 设置填充规则\n\tctx.fill()\n\n\tctx.draw()\n}\n\nonMounted(() => {\n\tdraw()\n})\n</script>\n\n<style scoped>\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;;;;IAYA,SAASA,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMC,aAAA,CAAAC,KAAA,CAAIC,mBAAA,CAAoB,QAAQ;MAE5CH,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,WAAA,CAAY,SAAS;MACzBT,GAAA,CAAIU,IAAA,EAAM;MAEVV,GAAA,CAAID,IAAA,EAAM;IACX;IAEAE,aAAA,CAAAU,SAAA,CAAU,YAAM;MACfZ,IAAA,EAAM;IACP,CAAC;;;;;;AC1BDa,EAAA,CAAGC,UAAA,CAAWC,SAAe","ignoreList":[]}

unpackage/dist/dev/.sourcemap/mp-weixin/app.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n  ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n  const app = createSSRApp(App)\n  return {\n    app\n  }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;AACC,YAAO,IAAA,MAAA,MAAA;;"}

unpackage/dist/dev/.sourcemap/mp-weixin/common/assets.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"assets.js","sources":["static/logo.png"],"sourcesContent":["export default \"__VITE_ASSET__46719607__\""],"names":[],"mappings":";AAAA,MAAe,aAAA;;"}

unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\r\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;\"></canvas>\r\n\r\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\r\n\t\t<button @click=\"handleDraw()\">点击绘制圆形</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n\t// 定义绘图函数\r\n\tfunction draw() {\r\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\r\n\r\n\t\t// 绘制外圆\r\n\t\tctx.beginPath() // 开始路径\r\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\r\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\r\n\t\tctx.fill() // 填充所创建的路径\r\n\t\t\r\n\t\t// 绘制内圆以形成环形效果\r\n\t\tctx.beginPath() // 开始新的路径\r\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\r\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\r\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw() // 将上述所有操作提交到canvas进行渲染\r\n\t}\r\n\r\n\t// 按钮点击事件处理函数\r\n\tconst handleDraw = () => {\r\n\t\tdraw(); // 调用绘图函数\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t/* 样式部分 */\r\n\tbutton {\r\n\t\tmargin-top: 10px;\r\n\t\t/* 给按钮设置一些上边距以避免过于紧凑 */\r\n\t}\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;;;AAgBC,aAAS,OAAO;AACf,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxB;IACA;;;;;;;;;ACnCF,GAAG,WAAW,eAAe;"}

unpackage/dist/dev/mp-weixin/app.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const common_vendor = require("./common/vendor.js");
-if (!Math) {
-  "./pages/index/index.js";
-}
-const _sfc_main = {
-  onLaunch: function() {
-    common_vendor.index.__f__("log", "at App.vue:4", "App Launch");
-  },
-  onShow: function() {
-    common_vendor.index.__f__("log", "at App.vue:7", "App Show");
-  },
-  onHide: function() {
-    common_vendor.index.__f__("log", "at App.vue:10", "App Hide");
-  }
-};
-function createApp() {
-  const app = common_vendor.createSSRApp(_sfc_main);
-  return {
-    app
-  };
-}
-createApp().app.mount("#app");
-exports.createApp = createApp;
-//# sourceMappingURL=../.sourcemap/mp-weixin/app.js.map

unpackage/dist/dev/mp-weixin/app.json

@@ -1,12 +0,0 @@
-{
-  "pages": [
-    "pages/index/index"
-  ],
-  "window": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
-  },
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/app.wxss

@@ -1,3 +0,0 @@
-
-	/*每个页面公共css */
-page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}

unpackage/dist/dev/mp-weixin/common/assets.js

@@ -1,4 +0,0 @@
-"use strict";
-const _imports_0 = "/static/logo.png";
-exports._imports_0 = _imports_0;
-//# sourceMappingURL=../../.sourcemap/mp-weixin/common/assets.js.map

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -1,30 +0,0 @@
-"use strict";
-const common_vendor = require("../../common/vendor.js");
-const _sfc_main = {
-  __name: "index",
-  setup(__props) {
-    function draw() {
-      const ctx = common_vendor.index.createCanvasContext("canvas");
-      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.draw();
-    }
-    const handleDraw = () => {
-      draw();
-    };
-    return (_ctx, _cache) => {
-      return {
-        a: common_vendor.o(($event) => handleDraw())
-      };
-    };
-  }
-};
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
-wx.createPage(MiniProgramPage);
-//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

unpackage/dist/dev/mp-weixin/pages/index/index.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "uni-app",
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +0,0 @@
-<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas><button class="data-v-1cf27b2a" bindtap="{{a}}">点击绘制圆形</button></view>

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -1,6 +0,0 @@
-
-	/* 样式部分 */
-button.data-v-1cf27b2a {
-		margin-top: 10px;
-		/* 给按钮设置一些上边距以避免过于紧凑 */
-}

unpackage/dist/dev/mp-weixin/project.config.json

@@ -1,29 +0,0 @@
-{
-    "description": "项目配置文件。",
-    "packOptions": {
-        "ignore": [],
-        "include": []
-    },
-    "setting": {
-        "urlCheck": false,
-        "es6": true,
-        "postcss": false,
-        "minified": false,
-        "newFeature": true,
-        "bigPackageSizeSupport": true,
-        "babelSetting": {
-            "ignore": [],
-            "disablePlugins": [],
-            "outputPath": ""
-        }
-    },
-    "compileType": "miniprogram",
-    "libVersion": "3.8.3",
-    "appid": "touristappid",
-    "projectname": "canvas",
-    "condition": {},
-    "editorSetting": {
-        "tabIndent": "insertSpaces",
-        "tabSize": 4
-    }
-}

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -1,7 +0,0 @@
-{
-    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "projectname": "canvas",
-    "setting": {
-        "compileHotReLoad": true
-    }
-}