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

fix

Browse Source
This commit is contained in:
sunmeng 2025-08-21 09:11:09 +08:00
parent c019bc9470
commit af3d727a64
10 changed files with 172 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/index/gesture-canvas-page.vue
View File

@ -79,7 +79,8 @@ export default {
methods: {
handleCanvasClick(e) {
if (!this.containerRect) return;
// 如果是移动操作则忽略点击
if (this.isMoving) return;
// 获取dpr
const dpr = this.$refs.canvasRef.dpr || 1;
@ -260,11 +261,30 @@ export default {
// console.log(event,'handleTouchEvent')
// 更新触点数量
this.touchPoints = event.touches.length;
// 增加移动状态检测
if (event.type === 'touchstart') {
this.lastTouchTime = Date.now();
this.touchStartPoint = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
this.isMoving = false; // 重置移动状态
}
else if (event.type === 'touchmove') {
// 检测移动距离是否超过阈值
if (this.touchStartPoint) {
const dx = Math.abs(event.touches[0].clientX - this.touchStartPoint.x);
const dy = Math.abs(event.touches[0].clientY - this.touchStartPoint.y);
if (dx > 5 || dy > 5) {
this.isMoving = true;
}
}
}
// 仅在触摸开始时重置状态
if (event.type === 'touchstart') {
this.gestureStatus = event.touches.length > 1 ? '双指开始' : '单指开始';
}
// if (event.type === 'touchstart') {
// this.gestureStatus = event.touches.length > 1 ? '双指开始' : '单指开始';
// }
// 处理事件传递
this.gestureHandler?.catchEvent(event);

78
pages/index/gesture-handler.js
View File

@ -199,40 +199,66 @@ class GestureHandler {
}
// 基础缩放手势处理
_handlePinch(touches) {
const point1 = touches[0];
const point2 = touches[1];
// _handlePinch(touches) {
// const point1 = touches[0];
// const point2 = touches[1];
const getPoint = (touch) => ({
x: touch.x || (touch.clientX - this.containerRect.left),
y: touch.y || (t.clientY - this.containerRect.top)
});
// const getPoint = (touch) => ({
// x: touch.x || (touch.clientX - this.containerRect.left),
// y: touch.y || (t.clientY - this.containerRect.top)
// });
const currentPoints = [getPoint(point1), getPoint(point2)];
// const currentPoints = [getPoint(point1), getPoint(point2)];
if (this.lastPoints) {
const currentDistance = Math.sqrt(
Math.pow(currentPoints[1].x - currentPoints[0].x, 2) +
Math.pow(currentPoints[1].y - currentPoints[0].y, 2)
);
// if (this.lastPoints) {
// const currentDistance = Math.sqrt(
// Math.pow(currentPoints[1].x - currentPoints[0].x, 2) +
// Math.pow(currentPoints[1].y - currentPoints[0].y, 2)
// );
const prevDistance = Math.sqrt(
Math.pow(this.lastPoints[1].x - this.lastPoints[0].x, 2) +
Math.pow(this.lastPoints[1].y - this.lastPoints[0].y, 2)
);
// const prevDistance = Math.sqrt(
// Math.pow(this.lastPoints[1].x - this.lastPoints[0].x, 2) +
// Math.pow(this.lastPoints[1].y - this.lastPoints[0].y, 2)
// );
if (prevDistance > 0 && currentDistance > 0) {
const scaleChange = currentDistance / prevDistance;
// if (prevDistance > 0 && currentDistance > 0) {
// const scaleChange = currentDistance / prevDistance;
const centerX = (currentPoints[0].x + currentPoints[1].x) / 2;
const centerY = (currentPoints[0].y + currentPoints[1].y) / 2;
// const centerX = (currentPoints[0].x + currentPoints[1].x) / 2;
// const centerY = (currentPoints[0].y + currentPoints[1].y) / 2;
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
}
}
// this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
// }
// }
this.lastPoints = currentPoints;
}
// this.lastPoints = currentPoints;
// }
_handlePinch(touches) {
if (touches.length < 2) return;
// 获取当前两点位置
const currentDistance = this.calculateDistance(touches);
if (this.lastPinchDistance && currentDistance) {
const scaleChange = currentDistance / this.lastPinchDistance;
// 计算中心点
const centerX = (touches[0].clientX + touches[1].clientX) / 2;
const centerY = (touches[0].clientY + touches[1].clientY) / 2;
// 应用缩放
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
}
this.lastPinchDistance = currentDistance;
}
calculateDistance(touches) {
const dx = touches[0].clientX - touches[1].clientX;
const dy = touches[0].clientY - touches[1].clientY;
return Math.sqrt(dx * dx + dy * dy);
}
}
export default GestureHandler;

16
pages/index/transform-canvas.vue
View File

@ -94,10 +94,20 @@ export default {
},
methods: {
// 修正坐标转换方法
invertPoint(x, y) {
// 注意：直接使用矩阵的逆转换，不需要除以dpr
const inverted = this.matrix.invertPoint(x, y);
return inverted;
const det = this.matrix.a * this.matrix.d - this.matrix.b * this.matrix.c;
return {
x: (this.matrix.d * x - this.matrix.c * y -
this.matrix.d * this.matrix.tx + this.matrix.c * this.matrix.ty) / det,
y: (-this.matrix.b * x + this.matrix.a * y +
this.matrix.b * this.matrix.tx - this.matrix.a * this.matrix.ty) / det
};
},
// 添加移动速度检查
shouldIgnoreClick() {
return Date.now() - this.lastTouchTime < 300;
},
// 添加点击检测方法

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/gesture-canvas-page.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"gesture-canvas-page.js","sources":["pages/index/gesture-canvas-page.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/gesture-canvas-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"}
{"version":3,"file":"gesture-canvas-page.js","sources":["pages/index/gesture-canvas-page.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/gesture-canvas-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"}

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/gesture-handler.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/transform-canvas.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"transform-canvas.js","sources":["/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue?type=component"],"sourcesContent":["import Component from '/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue'\nwx.createComponent(Component)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,gBAAgB,SAAS;"}
{"version":3,"file":"transform-canvas.js","sources":["/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue?type=component"],"sourcesContent":["import Component from '/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue'\nwx.createComponent(Component)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,gBAAgB,SAAS;"}

2
unpackage/dist/dev/mp-weixin/common/vendor.js vendored
View File

@ -6882,7 +6882,7 @@ function initOnError() {
function initRuntimeSocketService() {
const hosts = "127.0.0.1,172.10.0.127";
const port = "8090";
const id = "mp-weixin_05amPE";
const id = "mp-weixin_Z8uiV9";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();

27
unpackage/dist/dev/mp-weixin/pages/index/gesture-canvas-page.js vendored
View File

@ -41,6 +41,8 @@ const _sfc_main = {
handleCanvasClick(e) {
if (!this.containerRect)
return;
if (this.isMoving)
return;
const dpr = this.$refs.canvasRef.dpr || 1;
const x = (e.detail.x - this.containerRect.left) * dpr;
const y = (e.detail.y - this.containerRect.top) * dpr;
@ -63,7 +65,7 @@ const _sfc_main = {
} else if (this.currentView === "seat") {
const hitSeat = this.$refs.canvasRef.checkSeatHit(x, y);
if (hitSeat) {
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:111", "选中座位:", hitSeat);
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:112", "选中座位:", hitSeat);
this.toggleSeatSelection(hitSeat);
}
}
@ -110,7 +112,7 @@ const _sfc_main = {
return;
}
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:171", "获取容器位置失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:172", "获取容器位置失败:", e);
}
await new Promise((r) => setTimeout(r, 100));
retryCount++;
@ -122,7 +124,7 @@ const _sfc_main = {
container: this.containerRect
});
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:187", "手势处理器初始化失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:188", "手势处理器初始化失败:", e);
this.gestureHandler = {
catchEvent: this.createGestureFallback(),
setScale: (scale) => {
@ -180,7 +182,20 @@ const _sfc_main = {
var _a;
this.touchPoints = event.touches.length;
if (event.type === "touchstart") {
this.gestureStatus = event.touches.length > 1 ? "双指开始" : "单指开始";
this.lastTouchTime = Date.now();
this.touchStartPoint = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
this.isMoving = false;
} else if (event.type === "touchmove") {
if (this.touchStartPoint) {
const dx = Math.abs(event.touches[0].clientX - this.touchStartPoint.x);
const dy = Math.abs(event.touches[0].clientY - this.touchStartPoint.y);
if (dx > 5 || dy > 5) {
this.isMoving = true;
}
}
}
(_a = this.gestureHandler) == null ? void 0 : _a.catchEvent(event);
if (event.type === "touchend" || event.type === "touchcancel") {
@ -528,7 +543,7 @@ const _sfc_main = {
};
this.seatAreas = response.data;
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:627", "加载区域数据失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:647", "加载区域数据失败:", e);
}
},
async loadSeatData(areaCode) {
@ -567,7 +582,7 @@ const _sfc_main = {
}
});
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:685", "加载座位数据失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:705", "加载座位数据失败:", e);
common_vendor.index.showToast({ title: "加载座位失败", icon: "none" });
}
}

73
unpackage/dist/dev/mp-weixin/pages/index/gesture-handler.js vendored
View File

@ -54,9 +54,9 @@ class GestureHandler {
return (event) => {
const touches = event.touches || [];
if (touches.length === 1) {
const getPoint = (t2) => ({
x: t2.x || t2.clientX - this.containerRect.left,
y: t2.y || t2.clientY - this.containerRect.top
const getPoint = (t) => ({
x: t.x || t.clientX - this.containerRect.left,
y: t.y || t.clientY - this.containerRect.top
});
const currentPoint = getPoint(touches[0]);
if (!startPoint) {
@ -141,9 +141,9 @@ class GestureHandler {
}
// 基础平移手势处理
_handlePan(touch) {
const getPoint = (t2) => ({
x: t2.x || t2.clientX - this.containerRect.left,
y: t2.y || t2.clientY - this.containerRect.top
const getPoint = (t) => ({
x: t.x || t.clientX - this.containerRect.left,
y: t.y || t.clientY - this.containerRect.top
});
const currentPoint = getPoint(touch);
if (this.lastPoint) {
@ -155,29 +155,48 @@ class GestureHandler {
this.lastPoint = currentPoint;
}
// 基础缩放手势处理
// _handlePinch(touches) {
// const point1 = touches[0];
// const point2 = touches[1];
// const getPoint = (touch) => ({
// x: touch.x || (touch.clientX - this.containerRect.left),
// y: touch.y || (t.clientY - this.containerRect.top)
// });
// const currentPoints = [getPoint(point1), getPoint(point2)];
// if (this.lastPoints) {
// const currentDistance = Math.sqrt(
// Math.pow(currentPoints[1].x - currentPoints[0].x, 2) +
// Math.pow(currentPoints[1].y - currentPoints[0].y, 2)
// );
// const prevDistance = Math.sqrt(
// Math.pow(this.lastPoints[1].x - this.lastPoints[0].x, 2) +
// Math.pow(this.lastPoints[1].y - this.lastPoints[0].y, 2)
// );
// if (prevDistance > 0 && currentDistance > 0) {
// const scaleChange = currentDistance / prevDistance;
// const centerX = (currentPoints[0].x + currentPoints[1].x) / 2;
// const centerY = (currentPoints[0].y + currentPoints[1].y) / 2;
// this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
// }
// }
// this.lastPoints = currentPoints;
// }
_handlePinch(touches) {
const point1 = touches[0];
const point2 = touches[1];
const getPoint = (touch) => ({
x: touch.x || touch.clientX - this.containerRect.left,
y: touch.y || t.clientY - this.containerRect.top
});
const currentPoints = [getPoint(point1), getPoint(point2)];
if (this.lastPoints) {
const currentDistance = Math.sqrt(
Math.pow(currentPoints[1].x - currentPoints[0].x, 2) + Math.pow(currentPoints[1].y - currentPoints[0].y, 2)
);
const prevDistance = Math.sqrt(
Math.pow(this.lastPoints[1].x - this.lastPoints[0].x, 2) + Math.pow(this.lastPoints[1].y - this.lastPoints[0].y, 2)
);
if (prevDistance > 0 && currentDistance > 0) {
const scaleChange = currentDistance / prevDistance;
const centerX = (currentPoints[0].x + currentPoints[1].x) / 2;
const centerY = (currentPoints[0].y + currentPoints[1].y) / 2;
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
}
if (touches.length < 2)
return;
const currentDistance = this.calculateDistance(touches);
if (this.lastPinchDistance && currentDistance) {
const scaleChange = currentDistance / this.lastPinchDistance;
const centerX = (touches[0].clientX + touches[1].clientX) / 2;
const centerY = (touches[0].clientY + touches[1].clientY) / 2;
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
}
this.lastPoints = currentPoints;
this.lastPinchDistance = currentDistance;
}
calculateDistance(touches) {
const dx = touches[0].clientX - touches[1].clientX;
const dy = touches[0].clientY - touches[1].clientY;
return Math.sqrt(dx * dx + dy * dy);
}
}
exports.GestureHandler = GestureHandler;

14
unpackage/dist/dev/mp-weixin/pages/index/transform-canvas.js vendored
View File

@ -91,9 +91,17 @@ const _sfc_main = {
this.initCanvas();
},
methods: {
// 修正坐标转换方法
invertPoint(x, y) {
const inverted = this.matrix.invertPoint(x, y);
return inverted;
const det = this.matrix.a * this.matrix.d - this.matrix.b * this.matrix.c;
return {
x: (this.matrix.d * x - this.matrix.c * y - this.matrix.d * this.matrix.tx + this.matrix.c * this.matrix.ty) / det,
y: (-this.matrix.b * x + this.matrix.a * y + this.matrix.b * this.matrix.tx - this.matrix.a * this.matrix.ty) / det
};
},
// 添加移动速度检查
shouldIgnoreClick() {
return Date.now() - this.lastTouchTime < 300;
},
// 添加点击检测方法
checkHitArea(x, y) {
@ -186,7 +194,7 @@ const _sfc_main = {
});
this.redraw();
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:240", "图片加载失败:", e);
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:250", "图片加载失败:", e);
this.image = null;
}
},