204 lines
8.3 KiB
JavaScript
204 lines
8.3 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const pages_index_transformMatrix = require("./transform-matrix.js");
|
|
const pages_index_gestureHandler = require("./gesture-handler.js");
|
|
const TransformCanvas = () => "./transform-canvas.js";
|
|
const _sfc_main = {
|
|
components: {
|
|
TransformCanvas
|
|
},
|
|
data() {
|
|
return {
|
|
canvasWidth: 800,
|
|
canvasHeight: 600,
|
|
transformMatrix: new pages_index_transformMatrix.TransformMatrix(),
|
|
gestureHandler: null,
|
|
containerRect: null,
|
|
gestureStatus: "等待手势...",
|
|
scaleValue: 1,
|
|
touchPoints: 0,
|
|
lastGestureTime: 0,
|
|
seatAreas: []
|
|
// 座位区域数据
|
|
};
|
|
},
|
|
async mounted() {
|
|
await this.getContainerPosition();
|
|
this.initGestureHandler();
|
|
await this.loadSeatAreas();
|
|
this.$nextTick(() => {
|
|
this.updateCanvas();
|
|
});
|
|
},
|
|
methods: {
|
|
handleCanvasClick(e) {
|
|
if (!this.containerRect)
|
|
return;
|
|
const x = e.detail.x - this.containerRect.left;
|
|
const y = e.detail.y - this.containerRect.top;
|
|
const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
|
|
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:82", "hitArea", hitArea);
|
|
if (hitArea) {
|
|
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:84", "点击区域:", hitArea);
|
|
}
|
|
},
|
|
async getContainerPosition() {
|
|
let retryCount = 0;
|
|
const maxRetries = 3;
|
|
while (retryCount < maxRetries) {
|
|
try {
|
|
const rect = await new Promise((resolve) => {
|
|
const query = common_vendor.index.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) {
|
|
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:113", "获取容器位置失败:", e);
|
|
}
|
|
await new Promise((r) => setTimeout(r, 100));
|
|
retryCount++;
|
|
}
|
|
},
|
|
initGestureHandler() {
|
|
try {
|
|
this.gestureHandler = new pages_index_gestureHandler.GestureHandler(this, this.transformMatrix, {
|
|
container: this.containerRect
|
|
});
|
|
} catch (e) {
|
|
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:128", "手势处理器初始化失败:", 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) {
|
|
await this.getContainerPosition();
|
|
this.initGestureHandler();
|
|
if (event.type === "touchend" || event.type === "touchcancel") {
|
|
this.gestureStatus = "结束";
|
|
this.updateCanvas();
|
|
return;
|
|
}
|
|
}
|
|
const currentTime = Date.now();
|
|
this.touchPoints = event.touches.length;
|
|
const correctedTouches = Array.from(event.touches).map((touch) => {
|
|
return {
|
|
...touch,
|
|
x: touch.clientX - this.containerRect.left,
|
|
y: touch.clientY - this.containerRect.top
|
|
};
|
|
});
|
|
const correctedEvent = {
|
|
...event,
|
|
touches: correctedTouches,
|
|
changedTouches: correctedTouches
|
|
};
|
|
this.gestureHandler.catchEvent(correctedEvent);
|
|
if (event.type === "touchstart") {
|
|
this.gestureStatus = event.touches.length > 1 ? "双指开始" : "单指开始";
|
|
} else if (event.type === "touchmove") {
|
|
this.gestureStatus = event.touches.length > 1 ? "双指缩放/移动" : "单指移动";
|
|
} else {
|
|
this.gestureStatus = "结束";
|
|
}
|
|
if (currentTime - this.lastGestureTime > 50) {
|
|
this.lastGestureTime = currentTime;
|
|
this.updateCanvas();
|
|
}
|
|
},
|
|
// 更新Canvas
|
|
updateCanvas() {
|
|
this.$nextTick(() => {
|
|
this.scaleValue = Math.sqrt(
|
|
this.transformMatrix.a * this.transformMatrix.a + this.transformMatrix.b * this.transformMatrix.b
|
|
);
|
|
});
|
|
},
|
|
// 重置画布
|
|
resetCanvas() {
|
|
this.transformMatrix.reset();
|
|
this.scaleValue = 1;
|
|
this.gestureStatus = "画布已重置";
|
|
this.updateCanvas();
|
|
},
|
|
// 放大
|
|
zoomIn() {
|
|
this.transformMatrix.scale(1.2, 1.2, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
this.updateCanvas();
|
|
},
|
|
// 缩小
|
|
zoomOut() {
|
|
this.transformMatrix.scale(0.8, 0.8, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
this.updateCanvas();
|
|
},
|
|
// 加载座位区域数据
|
|
async loadSeatAreas() {
|
|
try {
|
|
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": 1e3, "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": 1e3, "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": 1e3, "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": 1e3, "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) {
|
|
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:248", "加载区域数据失败:", e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
if (!Array) {
|
|
const _component_transform_canvas = common_vendor.resolveComponent("transform-canvas");
|
|
_component_transform_canvas();
|
|
}
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {
|
|
a: common_vendor.t($data.scaleValue.toFixed(2)),
|
|
b: common_vendor.t($data.transformMatrix.tx.toFixed(1)),
|
|
c: common_vendor.t($data.transformMatrix.ty.toFixed(1)),
|
|
d: common_vendor.t($data.gestureStatus),
|
|
e: common_vendor.t($data.touchPoints),
|
|
f: common_vendor.sr("canvasRef", "2e633000-0"),
|
|
g: common_vendor.p({
|
|
width: $data.canvasWidth,
|
|
height: $data.canvasHeight,
|
|
matrix: $data.transformMatrix,
|
|
imgUrl: "https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg",
|
|
areaData: $data.seatAreas
|
|
}),
|
|
h: common_vendor.o((...args) => $options.handleTouchEvent && $options.handleTouchEvent(...args)),
|
|
i: common_vendor.o((...args) => $options.handleTouchEvent && $options.handleTouchEvent(...args)),
|
|
j: common_vendor.o((...args) => $options.handleTouchEvent && $options.handleTouchEvent(...args)),
|
|
k: common_vendor.o((...args) => $options.handleTouchEvent && $options.handleTouchEvent(...args)),
|
|
l: common_vendor.o((...args) => $options.handleCanvasClick && $options.handleCanvasClick(...args))
|
|
};
|
|
}
|
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2e633000"]]);
|
|
wx.createPage(MiniProgramPage);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/gesture-canvas-page.js.map
|