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

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

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

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

@ -45,15 +45,17 @@ export default {
watch: { watch: {
selectedCodes:{ selectedCodes:{
handler(newVal) { handler(newVal) {
this.nowSelectedCodes = newVal this.nowSelectedCodes = new Set(newVal);
}, },
immediate: true immediate: true,
deep: true // 添加深度监听
}, },
imgUrl: { imgUrl: {
handler(newUrl) { handler(newUrl) {
if (newUrl) this.loadImage(newUrl); if (newUrl) this.loadImage(newUrl);
}, },
immediate: true immediate: true,
}, },
width: { width: {
handler() { handler() {
@ -104,7 +106,7 @@ export default {
// 转换坐标到原始画布空间 // 转换坐标到原始画布空间
const inverted = this.matrix.invertPoint(x, y, this.dpr); const inverted = this.matrix.invertPoint(x, y, this.dpr);
console.log('checkHitArea',inverted) // console.log('checkHitArea',inverted)
// 遍历所有区域检测 // 遍历所有区域检测
for (const area of this.areaData) { for (const area of this.areaData) {
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) { if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
@ -317,62 +319,74 @@ export default {
}); });
}, },
drawSeats() { drawSeats() {
this.ctx.save(); this.ctx.save();
// 应用变换矩阵 // 应用变换矩阵
const { a, b, c, d, tx, ty } = this.matrix; const { a, b, c, d, tx, ty } = this.matrix;
this.ctx.setTransform(a, b, c, d, tx, ty); this.ctx.setTransform(a, b, c, d, tx, ty);
// 获取当前缩放比例 // 获取当前缩放比例
const scale = Math.sqrt(a * a + b * b); const scale = Math.sqrt(a * a + b * b);
this.seatData.forEach(seat => { // 确保 nowSelectedCodes 是 Set 类型
const x = seat.x; const selectedSet = this.nowSelectedCodes instanceof Set
const y = seat.y; ? this.nowSelectedCodes
: new Set(this.nowSelectedCodes || []);
// 根据缩放调整座位大小
const radius = 8 / scale;
this.seatData.forEach(seat => {
console.log(this.nowSelectedCodes,'nowSelectedCodesnowSelectedCodesnowSelectedCodes') const x = seat.x;
// 修改1：为选中座位添加特殊样式 const y = seat.y;
if (this.nowSelectedCodes.has(seat.code) && seat.status === 1) {
// 1. 绘制金色边框 // 根据缩放调整座位大小
this.ctx.beginPath(); const radius = 8 / scale;
this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2); // console.
this.ctx.strokeStyle = '#FFD700'; // 金色 // 检查座位是否被选中
this.ctx.lineWidth = 2 / scale; const isSelected = selectedSet.has(seat.id) && seat.status === 1;
this.ctx.stroke(); // console.log('selectedSet',selectedSet)
// console.log('seat',seat)
// 2. 绘制半透明金色背景 if (isSelected) {
this.ctx.beginPath(); // 绘制选中样式
this.ctx.arc(x, y, radius, 0, Math.PI * 2); this.ctx.beginPath();
this.ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'; this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2);
this.ctx.fill(); this.ctx.strokeStyle = '#FFD700'; // 金色边框
this.ctx.lineWidth = 2 / scale;
// 3. 绘制白色对勾（缩小版） this.ctx.stroke();
this.ctx.strokeStyle = '#fff';
this.ctx.lineWidth = 1 / scale; this.ctx.beginPath();
this.ctx.lineCap = 'round'; this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.beginPath(); this.ctx.fillStyle = 'rgba(255, 215, 0, 0.3)'; // 半透明金色背景
this.ctx.moveTo(x - 2.5, y); this.ctx.fill();
this.ctx.lineTo(x - 0.5, y + 1.5);
this.ctx.lineTo(x + 2.5, y - 2); // 绘制对勾
this.ctx.stroke(); this.ctx.strokeStyle = '#fff';
} else { this.ctx.lineWidth = 1 / scale;
// 普通座位的绘制保持不变 this.ctx.lineCap = 'round';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2); this.ctx.moveTo(x - 2.5, y);
this.ctx.fillStyle = seat.status === 1 ? '#4cd964' : '#dd524d'; this.ctx.lineTo(x - 0.5, y + 1.5);
this.ctx.fill(); 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.restore(); 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> </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() { function initRuntimeSocketService() {
const hosts = "127.0.0.1,172.10.0.127"; const hosts = "127.0.0.1,172.10.0.127";
const port = "8090"; const port = "8090";
const id = "mp-weixin_3NWJxu"; const id = "mp-weixin_05amPE";
const lazy = typeof swan !== "undefined"; const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => { let restoreError = lazy ? () => {
} : initOnError(); } : 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 dpr = this.$refs.canvasRef.dpr || 1;
const x = (e.detail.x - this.containerRect.left) * dpr; const x = (e.detail.x - this.containerRect.left) * dpr;
const y = (e.detail.y - this.containerRect.top) * 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") { if (this.currentView === "area") {
const hitArea = this.$refs.canvasRef.checkHitArea(x, y); 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) { if (hitArea) {
common_vendor.index.showModal({ common_vendor.index.showModal({
title: "请确认", title: "请确认",
@ -73,19 +71,23 @@ const _sfc_main = {
toggleSeatSelection(seat) { toggleSeatSelection(seat) {
if (seat.status !== 1) if (seat.status !== 1)
return; return;
if (this.selectedCodes.has(seat.code)) { const newSet = new Set(this.selectedCodes);
this.selectedCodes.delete(seat.code); if (newSet.has(seat.id)) {
newSet.delete(seat.id);
} else { } else {
if (this.selectedCodes.size < 4) { if (newSet.size < 6) {
this.selectedCodes.add(seat.code); newSet.add(seat.id);
} else { } else {
common_vendor.index.showToast({ common_vendor.index.showToast({
title: "最多只能选择4个座位", title: "最多只能选择6个座位",
icon: "none" icon: "none"
}); });
} }
} }
this.$refs.canvasRef.redraw(); this.selectedCodes = newSet;
this.$nextTick(() => {
this.$refs.canvasRef.redraw();
});
}, },
async getContainerPosition() { async getContainerPosition() {
let retryCount = 0; let retryCount = 0;
@ -108,7 +110,7 @@ const _sfc_main = {
return; return;
} }
} catch (e) { } 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)); await new Promise((r) => setTimeout(r, 100));
retryCount++; retryCount++;
@ -119,9 +121,8 @@ const _sfc_main = {
this.gestureHandler = new pages_index_gestureHandler.GestureHandler(this, this.transformMatrix, { this.gestureHandler = new pages_index_gestureHandler.GestureHandler(this, this.transformMatrix, {
container: this.containerRect container: this.containerRect
}); });
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:176", "initGestureHandler", this.gestureHandler);
} catch (e) { } 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 = { this.gestureHandler = {
catchEvent: this.createGestureFallback(), catchEvent: this.createGestureFallback(),
setScale: (scale) => { setScale: (scale) => {
@ -177,7 +178,6 @@ const _sfc_main = {
}, },
async handleTouchEvent(event) { async handleTouchEvent(event) {
var _a; var _a;
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:251", event, "handleTouchEvent");
this.touchPoints = event.touches.length; this.touchPoints = event.touches.length;
if (event.type === "touchstart") { if (event.type === "touchstart") {
this.gestureStatus = event.touches.length > 1 ? "双指开始" : "单指开始"; this.gestureStatus = event.touches.length > 1 ? "双指开始" : "单指开始";
@ -528,7 +528,7 @@ const _sfc_main = {
}; };
this.seatAreas = response.data; this.seatAreas = response.data;
} catch (e) { } 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) { async loadSeatData(areaCode) {
@ -567,7 +567,7 @@ const _sfc_main = {
} }
}); });
} catch (e) { } 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" }); 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") { if (event.type === "panstart") {
this.panStarted = false; this.panStarted = false;
} else if (event.type === "panmove") { } 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); const distance = Math.sqrt(event.deltaX ** 2 + event.deltaY ** 2);
if (!this.panStarted && distance < this.panThreshold) if (!this.panStarted && distance < this.panThreshold)
return; return;
@ -135,7 +136,7 @@ class GestureHandler {
this.catchEvent(event); this.catchEvent(event);
} }
} catch (e) { } 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: { watch: {
selectedCodes: { selectedCodes: {
handler(newVal) { handler(newVal) {
this.nowSelectedCodes = newVal; this.nowSelectedCodes = new Set(newVal);
}, },
immediate: true immediate: true,
deep: true
// 添加深度监听
}, },
imgUrl: { imgUrl: {
handler(newUrl) { handler(newUrl) {
@ -98,7 +100,6 @@ const _sfc_main = {
if (!this.areaData) if (!this.areaData)
return null; return null;
const inverted = this.matrix.invertPoint(x, y, this.dpr); 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) { for (const area of this.areaData) {
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) { if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
return area; return area;
@ -185,7 +186,7 @@ const _sfc_main = {
}); });
this.redraw(); this.redraw();
} catch (e) { } 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; this.image = null;
} }
}, },
@ -258,11 +259,13 @@ const _sfc_main = {
const { a, b, c, d, tx, ty } = this.matrix; const { a, b, c, d, tx, ty } = this.matrix;
this.ctx.setTransform(a, b, c, d, tx, ty); this.ctx.setTransform(a, b, c, d, tx, ty);
const scale = Math.sqrt(a * a + b * b); const scale = Math.sqrt(a * a + b * b);
const selectedSet = this.nowSelectedCodes instanceof Set ? this.nowSelectedCodes : new Set(this.nowSelectedCodes || []);
this.seatData.forEach((seat) => { this.seatData.forEach((seat) => {
const x = seat.x; const x = seat.x;
const y = seat.y; const y = seat.y;
const radius = 8 / scale; 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.beginPath();
this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2); this.ctx.arc(x, y, radius + 1, 0, Math.PI * 2);
this.ctx.strokeStyle = "#FFD700"; this.ctx.strokeStyle = "#FFD700";