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