renyt/canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拖拽

Browse Source
This commit is contained in:
sunmeng 2025-05-09 14:58:19 +08:00
parent 9495c40a9d
commit 153628ddb9
1 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
pages/index/index.vue
View File

@ -33,6 +33,10 @@
const startX = ref(0) const startX = ref(0)
const startY = ref(0) const startY = ref(0)
const isDragging = ref(false) const isDragging = ref(false)
const tempX = ref()
const tempY = ref()
const tempFlag = ref(true)
const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
const blocks = ref( const blocks = ref(
[ [
@ -1942,27 +1946,14 @@
// 触摸开始 // 触摸开始
const handleTouchStart = (e) => { const handleTouchStart = (e) => {
tempFlag.value = true
console.log('handleTouchStart') console.log('handleTouchStart')
// 获取触摸点的坐标 // 获取触摸点的坐标
const x = e.touches[0].x; tempX.value = e.touches[0].x;
const y = e.touches[0].y; tempY.value = e.touches[0].y;
// 判断点击位置 // 判断点击位置
blocks.value.forEach((block) => {
if (isPointInQuadrilateral(x, y, block.polygon)) {
uni.showModal({
title: '提示',
content: block.hint,
showCancel: true, // 显示取消按钮
success: (res) => {
if (res.confirm) {
console.log('用户点击了“确定”按钮');
} else if (res.cancel) {
console.log('用户点击了“取消”按钮');
}
},
});
}
});
if (e.touches.length === 1) { if (e.touches.length === 1) {
// 单指拖动 // 单指拖动
startX.value = e.touches[0].clientX - offsetX.value startX.value = e.touches[0].clientX - offsetX.value
@ -1981,6 +1972,7 @@
// 触摸移动 // 触摸移动
const handleTouchMove = (e) => { const handleTouchMove = (e) => {
console.log('11111'); console.log('11111');
tempFlag.value = false
if (e.touches.length === 1 && isDragging.value) { if (e.touches.length === 1 && isDragging.value) {
// 单指移动逻辑... // 单指移动逻辑...
offsetX.value = e.touches[0].clientX - startX.value; offsetX.value = e.touches[0].clientX - startX.value;
@ -2007,6 +1999,25 @@
console.log('handleTouchEnd') console.log('handleTouchEnd')
lastDistance.value = -1 lastDistance.value = -1
isDragging.value = false isDragging.value = false
if(!tempFlag.value){
return
}
blocks.value.forEach((block) => {
if (isPointInQuadrilateral(tempX.value, tempY.value, block.polygon)) {
uni.showModal({
title: '提示',
content: block.hint,
showCancel: true, // 显示取消按钮
success: (res) => {
if (res.confirm) {
console.log('用户点击了“确定”按钮');
} else if (res.cancel) {
console.log('用户点击了“取消”按钮');
}
},
});
}
});
} }
// 按钮点击事件处理函数 // 按钮点击事件处理函数