diff --git a/pages/index/.DS_Store b/pages/index/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/pages/index/.DS_Store and /dev/null differ diff --git a/pages/index/index.vue b/pages/index/index.vue index 43ae4de..9fff1df 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -2,17 +2,12 @@ - - + }" canvas-id="canvas" id="canvas"> + @@ -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); @@ -46,7 +64,26 @@ src: imgUrl.value, }) 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); // 右下角点 @@ -54,7 +91,7 @@ // ctx.lineTo(100, 100); // 左上角点 // ctx.closePath(); // 闭合路径 // ctx.stroke(); // 绘制边框 - + // 先不删 // let xoffset = 0, yoffset = 0, flag = false; // polygonList.forEach((level, index) => { @@ -77,67 +114,98 @@ // }) ctx.draw() } - - // 处理canvas触摸事件 - function handleCanvasTouch(event) { - // 获取触摸点的坐标 - const x = event.touches[0].x; - const y = event.touches[0].y; - console.log(x,y,'12'); - - } - + // 处理canvas触摸事件 + function handleCanvasTouch(event) { + // 获取触摸点的坐标 + const x = event.touches[0].x; + const y = event.touches[0].y; + console.log(x, y, '12'); + + } + + // 触摸开始 const handleTouchStart = (e) => { - console.log('handleTouchStart') - if (e.touches.length === 1) { - // 单指拖动 - startX.value = e.touches[0].clientX - offsetX.value - startY.value = e.touches[0].clientY - offsetY.value - isDragging.value = true - } else if (e.touches.length === 2) { - // 双指缩放 - const x1 = e.touches[0].clientX - const y1 = e.touches[0].clientY - const x2 = e.touches[1].clientX - const y2 = e.touches[1].clientY - lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) - } + 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 + startY.value = e.touches[0].clientY - offsetY.value + isDragging.value = true + } else if (e.touches.length === 2) { + // 双指缩放 + // const x1 = e.touches[0].clientX + // const y1 = e.touches[0].clientY + // const x2 = e.touches[1].clientX + // const y2 = e.touches[1].clientY + // 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内容 + } + } } - + // 触摸移动 const handleTouchMove = (e) => { console.log('handleTouchMove') - if (e.touches.length === 1 && isDragging.value) { - // 单指移动 - const currentX = e.touches[0].clientX - startX.value - const currentY = e.touches[0].clientY - startY.value - offsetX.value = currentX - offsetY.value = currentY - } else if (e.touches.length === 2) { - // 双指缩放 - const x1 = e.touches[0].clientX - const y1 = e.touches[0].clientY - const x2 = e.touches[1].clientX - const y2 = e.touches[1].clientY - const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) - - if (lastDistance.value > 0) { - const newScale = scale.value * (distance / lastDistance.value) - scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围 - } - lastDistance.value = distance - } + if (e.touches.length === 1 && isDragging.value) { + // 单指移动 + const currentX = e.touches[0].clientX - startX.value + const currentY = e.touches[0].clientY - startY.value + offsetX.value = currentX + offsetY.value = currentY + } else if (e.touches.length === 2) { + // 双指缩放 + const x1 = e.touches[0].clientX + const y1 = e.touches[0].clientY + const x2 = e.touches[1].clientX + const y2 = e.touches[1].clientY + const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) + + if (lastDistance.value > 0) { + const newScale = scale.value * (distance / lastDistance.value) + scale.value = Math.min(Math.max(newScale, 0.5), 4) // 限制缩放范围 + } + lastDistance.value = distance + } } - + // 触摸结束 const handleTouchEnd = () => { console.log('handleTouchEnd') - lastDistance.value = -1 - isDragging.value = false + lastDistance.value = -1 + isDragging.value = false } - + // 按钮点击事件处理函数 const handleDraw = () => { draw(); // 调用绘图函数 @@ -152,16 +220,36 @@ onReady(() => { console.log('onReadyonReady'); uni.downloadFile({ - url:imgUrl.value, - success: function (sres) { - console.log(sres,'sres'); + url: imgUrl.value, + success: function(sres) { + console.log(sres, 'sres'); imgUrl.value = sres.tempFilePath || sres.path draw() - },fail:function(fres){ - console.log('fres',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; + }