193 lines
7.3 KiB
JavaScript
193 lines
7.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: 300,
|
||
canvasHeight: 300,
|
||
transformMatrix: new pages_index_transformMatrix.TransformMatrix(),
|
||
gestureHandler: null,
|
||
containerRect: null,
|
||
gestureStatus: "等待手势...",
|
||
scaleValue: 1,
|
||
touchPoints: 0,
|
||
lastGestureTime: 0
|
||
};
|
||
},
|
||
async mounted() {
|
||
await this.getContainerPosition();
|
||
this.initGestureHandler();
|
||
this.$nextTick(() => {
|
||
this.updateCanvas();
|
||
});
|
||
},
|
||
methods: {
|
||
// 独立的手势初始化方法
|
||
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:77", "手势处理器初始化失败:", e);
|
||
this.gestureHandler = {
|
||
catchEvent: (event) => {
|
||
const touches = event.touches || [];
|
||
if (touches.length > 0) {
|
||
const point = touches[0];
|
||
const x = point.clientX - this.containerRect.left;
|
||
const y = point.clientY - this.containerRect.top;
|
||
this.transformMatrix.tx = x - 50;
|
||
this.transformMatrix.ty = y - 50;
|
||
this.updateCanvas();
|
||
}
|
||
}
|
||
};
|
||
}
|
||
},
|
||
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
|
||
};
|
||
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:119", "成功获取容器位置:", this.containerRect);
|
||
return;
|
||
}
|
||
} catch (e) {
|
||
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:123", "获取容器位置失败:", e);
|
||
}
|
||
await new Promise((r) => setTimeout(r, 100));
|
||
retryCount++;
|
||
}
|
||
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:131", `容器位置获取失败，已重试${maxRetries}次`);
|
||
},
|
||
// 事件处理（完整修复）
|
||
async handleTouchEvent(event) {
|
||
if (!this.gestureHandler || !this.containerRect) {
|
||
common_vendor.index.__f__("warn", "at pages/index/gesture-canvas-page.vue:137", "手势处理器未就绪，尝试重新初始化...");
|
||
await this.getContainerPosition();
|
||
this.initGestureHandler();
|
||
if (this.gestureHandler) {
|
||
return this.handleTouchEvent(event);
|
||
}
|
||
return;
|
||
}
|
||
const currentTime = Date.now();
|
||
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;
|
||
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:160", `原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`);
|
||
return {
|
||
...touch,
|
||
x,
|
||
y
|
||
};
|
||
});
|
||
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(() => {
|
||
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
|
||
);
|
||
}
|
||
});
|
||
},
|
||
// 重置画布
|
||
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();
|
||
},
|
||
// 调试输出
|
||
logMatrix() {
|
||
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:235", "当前变换矩阵:", this.transformMatrix.toArray());
|
||
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:236", "容器位置:", this.containerRect);
|
||
if (this.$refs.canvasRef) {
|
||
this.$refs.canvasRef.drawDebugGrid();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
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
|
||
}),
|
||
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.resetCanvas && $options.resetCanvas(...args)),
|
||
m: common_vendor.o((...args) => $options.zoomIn && $options.zoomIn(...args)),
|
||
n: common_vendor.o((...args) => $options.zoomOut && $options.zoomOut(...args)),
|
||
o: common_vendor.o((...args) => $options.logMatrix && $options.logMatrix(...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
|