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-14 17:12:12 +08:00
parent ed07181a5e
commit c019bc9470
9 changed files with 131 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,10 +86,10 @@ export default {
// 计算点击坐标（考虑dpr）
const x = (e.detail.x - this.containerRect.left) * dpr;
const y = (e.detail.y - this.containerRect.top) * dpr;
console.log('handleCanvasClick',x,y)
// console.log('handleCanvasClick',x,y)
if (this.currentView === 'area') {
const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
console.log('handleCanvasClick',hitArea)
// console.log('handleCanvasClick',hitArea)
if (hitArea) {
uni.showModal({
title: '请确认',
@ -117,22 +117,31 @@ export default {
toggleSeatSelection(seat) {
if (seat.status !== 1) return; // 只允许选择可用座位
if (this.selectedCodes.has(seat.code)) {
this.selectedCodes.delete(seat.code);
} else {
// 限制最多选择4个座位
if (this.selectedCodes.size < 4) {
this.selectedCodes.add(seat.code);
} else {
uni.showToast({
title: '最多只能选择4个座位',
icon: 'none'
});
}
}
this.$refs.canvasRef.redraw(); // 触发重绘
if (seat.status !== 1) return; // 只允许选择可用座位
// 创建新的 Set 实例，确保响应式更新
const newSet = new Set(this.selectedCodes);
if (newSet.has(seat.id)) {
newSet.delete(seat.id);
} else {
if (newSet.size < 6) {
newSet.add(seat.id);
} else {
uni.showToast({
title: '最多只能选择6个座位',
icon: 'none'
});
}
}
// 更新选中状态
this.selectedCodes = newSet;
// 强制更新视图
this.$nextTick(() => {
this.$refs.canvasRef.redraw();
});
},
async getContainerPosition() {
@ -173,7 +182,7 @@ export default {
this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
container: this.containerRect
});
console.log( 'initGestureHandler', this.gestureHandler )
// console.log( 'initGestureHandler', this.gestureHandler )
} catch (e) {
console.error('手势处理器初始化失败:', e);
// 简化降级方案
@ -248,7 +257,7 @@ export default {
},
async handleTouchEvent(event) {
console.log(event,'handleTouchEvent')
// console.log(event,'handleTouchEvent')
// 更新触点数量
this.touchPoints = event.touches.length;

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

@ -118,6 +118,7 @@ class GestureHandler {
this.panStarted = false;
}
else if (event.type === 'panmove') {
console.log('移动')
const distance = Math.sqrt(event.deltaX**2 + event.deltaY**2);
if (!this.panStarted && distance < this.panThreshold) return;

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

@ -45,15 +45,17 @@ export default {
watch: {
selectedCodes:{
handler(newVal) {
this.nowSelectedCodes = newVal
this.nowSelectedCodes = new Set(newVal);
},
immediate: true
immediate: true,
deep: true // 添加深度监听
},
imgUrl: {
handler(newUrl) {
if (newUrl) this.loadImage(newUrl);
},
immediate: true
immediate: true,
},
width: {
handler() {
@ -104,7 +106,7 @@ export default {
// 转换坐标到原始画布空间
const inverted = this.matrix.invertPoint(x, y, this.dpr);
console.log('checkHitArea',inverted)
// console.log('checkHitArea',inverted)
// 遍历所有区域检测
for (const area of this.areaData) {
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
@ -317,62 +319,74 @@ export default {
});
},
drawSeats() {
this.ctx.save();
// 应用变换矩阵
const { a, b, c, d, tx, ty } = this.matrix;
this.ctx.setTransform(a, b, c, d, tx, ty);
// 获取当前缩放比例
const scale = Math.sqrt(a * a + b * b);
this.seatData.forEach(seat => {
const x = seat.x;
const y = seat.y;
// 根据缩放调整座位大小
const radius = 8 / scale;
console.log(this.nowSelectedCodes,'nowSelectedCodesnowSelectedCodesnowSelectedCodes')
// 修改1：为选中座位添加特殊样式
if (this.nowSelectedCodes.has(seat.code) && seat.status === 1) {
// 1. 绘制金色边框
this.ctx.beginPath();
this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2);
this.ctx.strokeStyle = '#FFD700'; // 金色
this.ctx.lineWidth = 2 / scale;
this.ctx.stroke();
// 2. 绘制半透明金色背景
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fillStyle = 'rgba(255, 215, 0, 0.3)';
this.ctx.fill();
// 3. 绘制白色对勾（缩小版）
this.ctx.strokeStyle = '#fff';
this.ctx.lineWidth = 1 / scale;
this.ctx.lineCap = 'round';
this.ctx.beginPath();
this.ctx.moveTo(x - 2.5, y);
this.ctx.lineTo(x - 0.5, y + 1.5);
this.ctx.lineTo(x + 2.5, y - 2);
this.ctx.stroke();
} else {
// 普通座位的绘制保持不变
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fillStyle = seat.status === 1 ? '#4cd964' : '#dd524d';
this.ctx.fill();
}
// 仅在缩放足够大时显示文字
});
this.ctx.restore();
}
this.ctx.save();
// 应用变换矩阵
const { a, b, c, d, tx, ty } = this.matrix;
this.ctx.setTransform(a, b, c, d, tx, ty);
// 获取当前缩放比例
const scale = Math.sqrt(a * a + b * b);
// 确保 nowSelectedCodes 是 Set 类型
const selectedSet = this.nowSelectedCodes instanceof Set
? this.nowSelectedCodes
: new Set(this.nowSelectedCodes || []);
this.seatData.forEach(seat => {
const x = seat.x;
const y = seat.y;
// 根据缩放调整座位大小
const radius = 8 / scale;
// console.
// 检查座位是否被选中
const isSelected = selectedSet.has(seat.id) && seat.status === 1;
// console.log('selectedSet',selectedSet)
// console.log('seat',seat)
if (isSelected) {
// 绘制选中样式
this.ctx.beginPath();
this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2);
this.ctx.strokeStyle = '#FFD700'; // 金色边框
this.ctx.lineWidth = 2 / scale;
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'; // 半透明金色背景
this.ctx.fill();
// 绘制对勾
this.ctx.strokeStyle = '#fff';
this.ctx.lineWidth = 1 / scale;
this.ctx.lineCap = 'round';
this.ctx.beginPath();
this.ctx.moveTo(x - 2.5, y);
this.ctx.lineTo(x - 0.5, y + 1.5);
this.ctx.lineTo(x + 2.5, y - 2);
this.ctx.stroke();
} else {
// 绘制普通座位
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fillStyle = seat.status === 1 ? '#4cd964' : '#dd524d';
this.ctx.fill();
}
// 不需要此段代码了
// if (scale > 0.5) {
// this.ctx.fillStyle = '#fff';
// this.ctx.font = `bold ${Math.max(10 / scale, 8)}px sans-serif`;
// this.ctx.textAlign = 'center';
// this.ctx.textBaseline = 'middle';
// this.ctx.fillText(seat.name, x, y);
// }
});
this.ctx.restore();
}
}
}
</script>

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_3NWJxu";
const id = "mp-weixin_05amPE";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();

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

@ -44,10 +44,8 @@ const _sfc_main = {
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;
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:89", "handleCanvasClick", x, y);
if (this.currentView === "area") {
const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:92", "handleCanvasClick", hitArea);
if (hitArea) {
common_vendor.index.showModal({
title: "请确认",
@ -73,19 +71,23 @@ const _sfc_main = {
toggleSeatSelection(seat) {
if (seat.status !== 1)
return;
if (this.selectedCodes.has(seat.code)) {
this.selectedCodes.delete(seat.code);
const newSet = new Set(this.selectedCodes);
if (newSet.has(seat.id)) {
newSet.delete(seat.id);
} else {
if (this.selectedCodes.size < 4) {
this.selectedCodes.add(seat.code);
if (newSet.size < 6) {
newSet.add(seat.id);
} else {
common_vendor.index.showToast({
title: "最多只能选择4个座位",
title: "最多只能选择6个座位",
icon: "none"
});
}
}
this.$refs.canvasRef.redraw();
this.selectedCodes = newSet;
this.$nextTick(() => {
this.$refs.canvasRef.redraw();
});
},
async getContainerPosition() {
let retryCount = 0;
@ -108,7 +110,7 @@ const _sfc_main = {
return;
}
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:162", "获取容器位置失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:171", "获取容器位置失败:", e);
}
await new Promise((r) => setTimeout(r, 100));
retryCount++;
@ -119,9 +121,8 @@ const _sfc_main = {
this.gestureHandler = new pages_index_gestureHandler.GestureHandler(this, this.transformMatrix, {
container: this.containerRect
});
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:176", "initGestureHandler", this.gestureHandler);
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:178", "手势处理器初始化失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:187", "手势处理器初始化失败:", e);
this.gestureHandler = {
catchEvent: this.createGestureFallback(),
setScale: (scale) => {
@ -177,7 +178,6 @@ const _sfc_main = {
},
async handleTouchEvent(event) {
var _a;
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:251", event, "handleTouchEvent");
this.touchPoints = event.touches.length;
if (event.type === "touchstart") {
this.gestureStatus = event.touches.length > 1 ? "双指开始" : "单指开始";
@ -528,7 +528,7 @@ const _sfc_main = {
};
this.seatAreas = response.data;
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:618", "加载区域数据失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:627", "加载区域数据失败:", e);
}
},
async loadSeatData(areaCode) {
@ -567,7 +567,7 @@ const _sfc_main = {
}
});
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:676", "加载座位数据失败:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:685", "加载座位数据失败:", e);
common_vendor.index.showToast({ title: "加载座位失败", icon: "none" });
}
}

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

@ -93,6 +93,7 @@ class GestureHandler {
if (event.type === "panstart") {
this.panStarted = false;
} else if (event.type === "panmove") {
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:121", "移动");
const distance = Math.sqrt(event.deltaX ** 2 + event.deltaY ** 2);
if (!this.panStarted && distance < this.panThreshold)
return;
@ -135,7 +136,7 @@ class GestureHandler {
this.catchEvent(event);
}
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:176", "手势处理错误:", e);
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:177", "手势处理错误:", e);
}
}
// 基础平移手势处理

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

@ -41,9 +41,11 @@ const _sfc_main = {
watch: {
selectedCodes: {
handler(newVal) {
this.nowSelectedCodes = newVal;
this.nowSelectedCodes = new Set(newVal);
},
immediate: true
immediate: true,
deep: true
// 添加深度监听
},
imgUrl: {
handler(newUrl) {
@ -98,7 +100,6 @@ const _sfc_main = {
if (!this.areaData)
return null;
const inverted = this.matrix.invertPoint(x, y, this.dpr);
common_vendor.index.__f__("log", "at pages/index/transform-canvas.vue:107", "checkHitArea", inverted);
for (const area of this.areaData) {
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
return area;
@ -185,7 +186,7 @@ const _sfc_main = {
});
this.redraw();
} catch (e) {
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:238", "图片加载失败:", e);
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:240", "图片加载失败:", e);
this.image = null;
}
},
@ -258,11 +259,13 @@ const _sfc_main = {
const { a, b, c, d, tx, ty } = this.matrix;
this.ctx.setTransform(a, b, c, d, tx, ty);
const scale = Math.sqrt(a * a + b * b);
const selectedSet = this.nowSelectedCodes instanceof Set ? this.nowSelectedCodes : new Set(this.nowSelectedCodes || []);
this.seatData.forEach((seat) => {
const x = seat.x;
const y = seat.y;
const radius = 8 / scale;
if (this.nowSelectedCodes.has(seat.code) && seat.status === 1) {
const isSelected = selectedSet.has(seat.id) && seat.status === 1;
if (isSelected) {
this.ctx.beginPath();
this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2);
this.ctx.strokeStyle = "#FFD700";