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);
+ }
+ }
}
};