1

pages.json

@@ -1,17 +0,0 @@
-{
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {}
-}

pages/index/index.vue

@@ -1,46 +0,0 @@
-<template>
-	<view>
-		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
-		<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;"></canvas>
-
-		<!-- 添加一个按钮，用于触发绘图 -->
-		<button @click="handleDraw()">点击绘制圆形</button>
-	</view>
-</template>
-
-<script setup>
-	import {
-		ref
-	} from 'vue'
-
-	// 定义绘图函数
-	function draw() {
-		const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
-
-		// 绘制外圆
-		ctx.beginPath() // 开始路径
-		ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
-		ctx.setFillStyle('rgba(0, 0, 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() // 将上述所有操作提交到canvas进行渲染
-	}
-
-	// 按钮点击事件处理函数
-	const handleDraw = () => {
-		draw(); // 调用绘图函数
-	}
-</script>
-
-<style scoped>
-	/* 样式部分 */
-	button {
-		margin-top: 10px;
-		/* 给按钮设置一些上边距以避免过于紧凑 */
-	}
-</style>

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

@@ -0,0 +1 @@
+{"version":3,"names":["canvasWidth","common_vendor","ref","canvasHeight","draw","ctx","index","createCanvasContext","__f__","beginPath","arc","Math","PI","setFillStyle","fill","setTimeout","handleDraw","onMounted"],"sources":["index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',this) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw(false, setTimeout(()=>{\r\n\t\t    console.log(3)\r\n\t\t},300))\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"mappings":";;;;;;;IAaC,IAAMA,WAAA,GAAcC,aAAA,CAAGC,GAAA,CAAC,GAAG;IAC3B,IAAMC,YAAA,GAAeF,aAAA,CAAGC,GAAA,CAAC,GAAG;IAG5B,SAASE,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMJ,aAAA,CAAGK,KAAA,CAACC,mBAAA,CAAoB,UAAS,IAAI;MACjDN,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAYH,GAAA,EAAI,IAAI;MAEpBA,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,kBAAkB;MACnCR,GAAA,CAAIS,IAAA,EAAM;MAGVT,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,IAAA,EAAM;MACVT,GAAA,CAAID,IAAA,CAAK,OAAOW,UAAA,CAAW,YAAI;QAC3Bd,aAAA,CAAAK,KAAA,CAAYE,KAAA,wCAAC;MAChB,GAAC,GAAG,CAAC;IACN;IAGD,IAAMQ,UAAA,GAAa,SAAbA,WAAA,EAAmB;MACxBf,aAAA,CAAAK,KAAA,CAAYE,KAAA,+CAAQ;MACpBJ,IAAA;MACAH,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAY,WAAW;IACvB;IAEDP,aAAA,CAAAgB,SAAA,CAAU,YAAM,CAEjB,CAAE","ignoreList":[]}

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["wx","createPage","index","MiniProgramPage"],"sources":["cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;AACAA,EAAA,CAAGC,UAAA,CAAWC,KAAA,CAAeC,eAAA","ignoreList":[]}

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

@@ -1 +1 @@
-{"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;;"}
+{"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/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance()  \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\n\t\tdraw(); // 调用绘图函数\n\t}\n\n\tonMounted(() => {\r\n\t\t// draw()\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,+BAAY,KAAI,IAAI;AAEpB,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;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAGjB,CAAE;;;;;;;;;;;;"}

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index.js","sources":["../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,MAAe,eAAA;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":["../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/QzovVXNlcnMvaHAvRGVza3RvcC9hcHAvY2FudmFzL3BhZ2VzL2luZGV4L2luZGV4LnZ1ZQ"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,MAAe,eAAA;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"indexFu.js","sources":["pages/index/indexFu.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXhGdS52dWU"],"sourcesContent":["<template>\r\n\t<view>\r\n\t<indexZi></indexZi>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport indexZi from \"./index.vue\" \r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/indexFu.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;;;;AAOC,MAAM,UAAU,MAAW;;;;;;;;;ACN5B,GAAG,WAAWA,SAAe;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index_step4.js","sources":["pages/index/index_step4.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXhfc3RlcDQudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">跳转step2</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200)  // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance()  \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(100, 220, 0, 1)') // 设置填充颜色为黑色，无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tuni.navigateTo({\r\n\t\t\turl:'/pages/index/step2'\r\n\t\t})\n\t\tdraw(); // 调用绘图函数\n\t}\n\n\tonMounted(() => {\r\n\t\tdraw()\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index_step4.vue'\nwx.createPage(MiniProgramPage)"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,qCAAY,KAAI,IAAI;AAEpB,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,sBAAsB;AACvC,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;AACxBA,oBAAAA,MAAI,WAAW;AAAA,QACd,KAAI;AAAA,MACP,CAAG;AACD;IACA;AAEDC,kBAAAA,UAAU,MAAM;AACf,WAAM;AAAA,IAER,CAAE;;;;;;;;;;;AC5CF,GAAG,WAAW,eAAe;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"step2.js","sources":["pages/index/step2.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvc3RlcDIudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t<indexstep2></indexstep2>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport indexstep2 from \"./index.vue\" \r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/step2.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;;;;AAOC,MAAM,aAAa,MAAW;;;;;;;;;ACN/B,GAAG,WAAWA,SAAe;"}

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

@@ -3,6 +3,8 @@ 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";
 }
 const _sfc_main = {
   onLaunch: function() {

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

@@ -1,6 +1,8 @@
 {
   "pages": [
-    "pages/index/index"
+    "pages/index/index",
+    "pages/index/index_step4",
+    "pages/index/step2"
   ],
   "window": {
     "navigationBarTextStyle": "black",

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

@@ -7787,6 +7787,9 @@ const createSubpackageApp = initCreateSubpackageApp();
 }
 exports._export_sfc = _export_sfc;
 exports.createSSRApp = createSSRApp;
+exports.getCurrentInstance = getCurrentInstance;
 exports.index = index;
 exports.o = o;
+exports.onMounted = onMounted;
+exports.ref = ref;
 //# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

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

@@ -0,0 +1,141 @@
+"use strict";
+const common_vendor = require("./common/vendor.js");
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    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();
+    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);
+      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: common_vendor.o(handleCanvasTouch),
+        b: common_vendor.o(handleCanvasTouchMove),
+        c: common_vendor.o(handleCanvasTouchEnd),
+        d: common_vendor.o(handleDraw)
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
+exports.MiniProgramPage = MiniProgramPage;
+//# sourceMappingURL=../.sourcemap/mp-weixin/index.js.map

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

@@ -1,30 +1,4 @@
 "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);
+const index = require("../../index.js");
+wx.createPage(index.MiniProgramPage);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

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

@@ -1 +1 @@
-<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>
+<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px;border:1px solid red" width="{{a}}" height="{{b}}"></canvas><button class="data-v-1cf27b2a" bindtap="{{c}}">点击绘制圆形</button></view>

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+const index = require("../../index.js");
+wx.createPage(index.MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index2.js.map

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

@@ -0,0 +1,16 @@
+"use strict";
+require("../../common/vendor.js");
+if (!Math) {
+  indexZi();
+}
+const indexZi = () => "./index2.js";
+const _sfc_main = {
+  __name: "indexFu",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return {};
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/indexFu.js.map

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

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "fu",
+  "usingComponents": {
+    "index-zi": "./index"
+  }
+}

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

@@ -0,0 +1 @@
+<view><index-zi u-i="51b35b8e-0" bind:__l="__l"></index-zi></view>

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

@@ -0,0 +1,42 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  __name: "index_step4",
+  setup(__props) {
+    const canvasWidth = common_vendor.ref(200);
+    const canvasHeight = common_vendor.ref(200);
+    const instance = common_vendor.getCurrentInstance();
+    function draw() {
+      const ctx = common_vendor.index.createCanvasContext("canvas", instance);
+      common_vendor.index.__f__("log", "at pages/index/index_step4.vue:20", ctx, "12");
+      ctx.beginPath();
+      ctx.arc(100, 100, 80, 0, Math.PI * 2);
+      ctx.setFillStyle("rgba(100, 220, 0, 1)");
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(100, 100, 75, 0, Math.PI * 2);
+      ctx.setFillStyle("white");
+      ctx.fill();
+      ctx.draw();
+    }
+    const handleDraw = () => {
+      common_vendor.index.navigateTo({
+        url: "/pages/index/step2"
+      });
+      draw();
+    };
+    common_vendor.onMounted(() => {
+      draw();
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: canvasWidth.value,
+        b: canvasHeight.value,
+        c: common_vendor.o(handleDraw)
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-7e4ca425"]]);
+wx.createPage(MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index_step4.js.map

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

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

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

@@ -0,0 +1 @@
+<view class="data-v-7e4ca425"><canvas class="data-v-7e4ca425" canvas-id="canvas" id="canvas" style="width:200px;height:200px;border:1px solid red" width="{{a}}" height="{{b}}"></canvas><button class="data-v-7e4ca425" bindtap="{{c}}">跳转step2</button></view>

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

@@ -0,0 +1,4 @@
+
+button.data-v-7e4ca425 {
+		margin-top: 10px;
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+require("../../common/vendor.js");
+if (!Math) {
+  indexstep2();
+}
+const indexstep2 = () => "./index2.js";
+const _sfc_main = {
+  __name: "step2",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return {};
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/step2.js.map

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

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "fu",
+  "usingComponents": {
+    "indexstep2": "./index"
+  }
+}

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

@@ -0,0 +1 @@
+<view><indexstep2 u-i="41bebd5e-0" bind:__l="__l"></indexstep2></view>

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": {