diff --git a/pages/index/gesture-canvas-page.vue b/pages/index/gesture-canvas-page.vue index 206fb7a..dcb20ce 100644 --- a/pages/index/gesture-canvas-page.vue +++ b/pages/index/gesture-canvas-page.vue @@ -1,5 +1,5 @@ @@ -50,122 +51,114 @@ export default { gestureStatus: '等待手势...', scaleValue: 1, touchPoints: 0, - lastGestureTime: 0 + lastGestureTime: 0, + seatAreas: [] // 座位区域数据 }; }, async mounted() { await this.getContainerPosition(); - - // 2. 初始化手势处理器(传入容器位置信息) - this.initGestureHandler(); - - // 3. 初始绘制 - this.$nextTick(() => { - this.updateCanvas(); - }); + this.initGestureHandler(); + + // 加载座位区域数据 + await this.loadSeatAreas(); + + // 初始绘制 + this.$nextTick(() => { + this.updateCanvas(); + }); }, methods: { - // 独立的手势初始化方法 - initGestureHandler() { - try { - this.gestureHandler = new GestureHandler(this, this.transformMatrix, { - container: this.containerRect - }); - } catch (e) { - console.error('手势处理器初始化失败:', e); - // 简化降级方案 - this.gestureHandler = { - catchEvent: (event) => { - // 只处理最基本的行为 - if (event.touches.length > 0) { - const firstTouch = event.touches[0]; - const x = firstTouch.clientX - this.containerRect.left; - const y = firstTouch.clientY - this.containerRect.top; - - // 仅更新调试信息显示 - this.gestureStatus = "降级模式: 单指拖动"; - this.touchPoints = event.touches.length; - - // 简单变换 - if (event.type === 'touchmove') { - this.transformMatrix.tx = x; - this.transformMatrix.ty = y; - this.updateCanvas(); - } - } - } - } - } - }, - - async getContainerPosition() { - // 添加重试机制 - let retryCount = 0; - const maxRetries = 3; + handleCanvasClick(e) { + if (!this.containerRect) return; - while (retryCount < maxRetries) { - try { - const rect = await new Promise(resolve => { - const query = uni.createSelectorQuery().in(this); - query.select('.gesture-container').boundingClientRect(res => { - resolve(res); - }).exec(); - }); - - if (rect) { - this.containerRect = { - left: rect.left, - top: rect.top, - width: rect.width, - height: rect.height - }; - console.log('成功获取容器位置:', this.containerRect); - return; // 成功获取则退出 - } - } catch (e) { - console.error('获取容器位置失败:', e); - } + // 计算相对坐标 + const x = e.detail.x - this.containerRect.left; + const y = e.detail.y - this.containerRect.top; + + // 检测点击区域 + const hitArea = this.$refs.canvasRef.checkHitArea(x, y); + console.log('hitArea',hitArea) + if (hitArea) { + console.log('点击区域:', hitArea); - // 等待后重试 - await new Promise(r => setTimeout(r, 100)); - retryCount++; } - - console.error(`容器位置获取失败,已重试${maxRetries}次`); }, + + async getContainerPosition() { + // 添加重试机制 + let retryCount = 0; + const maxRetries = 3; + + while (retryCount < maxRetries) { + try { + const rect = await new Promise(resolve => { + const query = uni.createSelectorQuery().in(this); + query.select('.gesture-container').boundingClientRect(res => { + resolve(res); + }).exec(); + }); + + if (rect) { + this.containerRect = { + left: rect.left, + top: rect.top, + width: rect.width, + height: rect.height + }; + return; + } + } catch (e) { + console.error('获取容器位置失败:', e); + } + + // 等待后重试 + await new Promise(r => setTimeout(r, 100)); + retryCount++; + } + }, + + initGestureHandler() { + try { + this.gestureHandler = new GestureHandler(this, this.transformMatrix, { + container: this.containerRect + }); + } catch (e) { + console.error('手势处理器初始化失败:', e); + // 简化降级方案 + this.gestureHandler = { + catchEvent: (event) => { + if (event.touches.length > 0) { + this.gestureStatus = "降级模式"; + this.touchPoints = event.touches.length; + + if (event.type === 'touchmove') { + const firstTouch = event.touches[0]; + const x = firstTouch.clientX - this.containerRect.left; + const y = firstTouch.clientY - this.containerRect.top; + + this.transformMatrix.tx = x; + this.transformMatrix.ty = y; + this.updateCanvas(); + } + } + } + } + } + }, + // 事件处理 async handleTouchEvent(event) { - - if (!this.gestureHandler || !this.containerRect) { - console.warn('手势处理器未就绪,尝试重新初始化...'); - await this.getContainerPosition(); - this.initGestureHandler(); - if (event.type === 'touchend' || event.type === 'touchcancel') { - this.lastPoint = null; - this.lastPoints = null; - this.gestureStatus = '结束'; - - // 更新一次画面 - this.updateCanvas(); - return; - } - // 直接传递原始事件,手势处理器会处理坐标转换 - this.gestureHandler.catchEvent(event); - - // 如果是简单处理器,使用下面优化的基础处理方法 - if (!this.at) { - // 使用优化后的基础处理方法 - if (correctedEvent.touches.length === 1) { - this.handlePan(correctedEvent.touches[0]); - } else if (correctedEvent.touches.length > 1) { - this.handlePinch(correctedEvent.touches); - } - } - return; - } - + if (!this.gestureHandler || !this.containerRect) { + await this.getContainerPosition(); + this.initGestureHandler(); + if (event.type === 'touchend' || event.type === 'touchcancel') { + this.gestureStatus = '结束'; + this.updateCanvas(); + return; + } + } // 记录时间戳 const currentTime = Date.now(); @@ -173,17 +166,12 @@ export default { // 更新触点数量 this.touchPoints = event.touches.length; - // 修正坐标(核心修复点) + // 修正坐标 const correctedTouches = Array.from(event.touches).map(touch => { - const x = touch.clientX - this.containerRect.left; - const y = touch.clientY - this.containerRect.top; - - console.log(`原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`); - return { ...touch, - x: x, - y: y + x: touch.clientX - this.containerRect.left, + y: touch.clientY - this.containerRect.top }; }); @@ -208,26 +196,20 @@ export default { this.gestureStatus = '结束'; } - // 限制更新频率:至少每50ms更新一次 + // 限制更新频率 if (currentTime - this.lastGestureTime > 50) { this.lastGestureTime = currentTime; this.updateCanvas(); } }, - // 更新Canvas(性能优化版) + // 更新Canvas updateCanvas() { this.$nextTick(() => { - const canvas = this.$refs.canvasRef; - if (canvas) { - // canvas.draw(); - - // 计算当前缩放值 - this.scaleValue = Math.sqrt( - this.transformMatrix.a * this.transformMatrix.a + - this.transformMatrix.b * this.transformMatrix.b - ); - } + this.scaleValue = Math.sqrt( + this.transformMatrix.a * this.transformMatrix.a + + this.transformMatrix.b * this.transformMatrix.b + ); }); }, @@ -251,20 +233,34 @@ export default { this.updateCanvas(); }, + // 加载座位区域数据 + async loadSeatAreas() { + try { + // 模拟API请求 + const response = { + "code":200, + "message":"", + "data":[{"areacode":"03tkrrjukrgu","areaname":"主席台","description":"主席台","remain":100,"polygon":[262,154,262,165,262,177,262,188,314,188,365,188,417,188,417,177,417,165,417,154,365,154,314,154,262,154]},{"areacode":"ea0jg3jukrgw","areaname":"A区","description":"A区","remain":1000,"polygon":[105,94,105,125,105,158,105,189,183,189,251,189,250,147,336,147,337,125,337,94,259,94,183,94,105,94]},{"areacode":"832fe6ej0kqc","areaname":"C区","description":"C区","remain":1000,"polygon":[106,418,106,452,106,487,106,521,183,521,261,521,338,521,338,487,338,452,338,418,261,418,183,418,106,418]},{"areacode":"p5naxqej0kqd","areaname":"B区","description":"B区","remain":1000,"polygon":[345,93,345,125,344,147,425,148,425,188,499,190,576,190,576,158,576,125,576,93,499,93,422,93,345,93]},{"areacode":"uknpk3sa819j","areaname":"D区","description":"D区","remain":1000,"polygon":[347,419,347,453,347,487,347,521,423,521,499,521,575,521,575,487,575,453,575,419,499,419,423,419,347,419]}] + } + + this.seatAreas = response.data; + } catch (e) { + console.error('加载区域数据失败:', e); + } + } } };