图片绘制 多边形绘制
This commit is contained in:
parent
4aa49ccbde
commit
40437fd728
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="container" @click="handleCanvasClick">
|
||||
<view class="gesture-container"
|
||||
@touchstart="handleTouchEvent"
|
||||
@touchmove="handleTouchEvent"
|
||||
@ -18,15 +18,16 @@
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:matrix="transformMatrix"
|
||||
:imgUrl="'https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg'"
|
||||
:imgUrl="'https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg'"
|
||||
:areaData="seatAreas"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="controls">
|
||||
<!-- <view class="controls">
|
||||
<button @click="resetCanvas">重置</button>
|
||||
<button @click="zoomIn">放大</button>
|
||||
<button @click="zoomIn">放大</button>
|
||||
<button @click="zoomOut">缩小</button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -50,122 +51,114 @@ export default {
|
||||
gestureStatus: '等待手势...',
|
||||
scaleValue: 1,
|
||||
touchPoints: 0,
|
||||
lastGestureTime: 0
|
||||
lastGestureTime: 0,
|
||||
seatAreas: [] // 座位区域数据
|
||||
};
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.getContainerPosition();
|
||||
|
||||
// 2. 初始化手势处理器（传入容器位置信息）
|
||||
this.initGestureHandler();
|
||||
|
||||
// 3. 初始绘制
|
||||
this.$nextTick(() => {
|
||||
this.updateCanvas();
|
||||
});
|
||||
this.initGestureHandler();
|
||||
|
||||
// 加载座位区域数据
|
||||
await this.loadSeatAreas();
|
||||
|
||||
// 初始绘制
|
||||
this.$nextTick(() => {
|
||||
this.updateCanvas();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 独立的手势初始化方法
|
||||
initGestureHandler() {
|
||||
try {
|
||||
this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
|
||||
container: this.containerRect
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('手势处理器初始化失败:', e);
|
||||
// 简化降级方案
|
||||
this.gestureHandler = {
|
||||
catchEvent: (event) => {
|
||||
// 只处理最基本的行为
|
||||
if (event.touches.length > 0) {
|
||||
const firstTouch = event.touches[0];
|
||||
const x = firstTouch.clientX - this.containerRect.left;
|
||||
const y = firstTouch.clientY - this.containerRect.top;
|
||||
|
||||
// 仅更新调试信息显示
|
||||
this.gestureStatus = "降级模式: 单指拖动";
|
||||
this.touchPoints = event.touches.length;
|
||||
|
||||
// 简单变换
|
||||
if (event.type === 'touchmove') {
|
||||
this.transformMatrix.tx = x;
|
||||
this.transformMatrix.ty = y;
|
||||
this.updateCanvas();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async getContainerPosition() {
|
||||
// 添加重试机制
|
||||
let retryCount = 0;
|
||||
const maxRetries = 3;
|
||||
handleCanvasClick(e) {
|
||||
if (!this.containerRect) return;
|
||||
|
||||
while (retryCount < maxRetries) {
|
||||
try {
|
||||
const rect = await new Promise(resolve => {
|
||||
const query = uni.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
|
||||
};
|
||||
console.log('成功获取容器位置:', this.containerRect);
|
||||
return; // 成功获取则退出
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取容器位置失败:', e);
|
||||
}
|
||||
// 计算相对坐标
|
||||
const x = e.detail.x - this.containerRect.left;
|
||||
const y = e.detail.y - this.containerRect.top;
|
||||
|
||||
// 检测点击区域
|
||||
const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
|
||||
console.log('hitArea',hitArea)
|
||||
if (hitArea) {
|
||||
console.log('点击区域:', hitArea);
|
||||
|
||||
// 等待后重试
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
retryCount++;
|
||||
}
|
||||
|
||||
console.error(`容器位置获取失败，已重试${maxRetries}次`);
|
||||
},
|
||||
|
||||
async getContainerPosition() {
|
||||
// 添加重试机制
|
||||
let retryCount = 0;
|
||||
const maxRetries = 3;
|
||||
|
||||
while (retryCount < maxRetries) {
|
||||
try {
|
||||
const rect = await new Promise(resolve => {
|
||||
const query = uni.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) {
|
||||
console.error('获取容器位置失败:', e);
|
||||
}
|
||||
|
||||
// 等待后重试
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
retryCount++;
|
||||
}
|
||||
},
|
||||
|
||||
initGestureHandler() {
|
||||
try {
|
||||
this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
|
||||
container: this.containerRect
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('手势处理器初始化失败:', 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) {
|
||||
console.warn('手势处理器未就绪，尝试重新初始化...');
|
||||
await this.getContainerPosition();
|
||||
this.initGestureHandler();
|
||||
if (event.type === 'touchend' || event.type === 'touchcancel') {
|
||||
this.lastPoint = null;
|
||||
this.lastPoints = null;
|
||||
this.gestureStatus = '结束';
|
||||
|
||||
// 更新一次画面
|
||||
this.updateCanvas();
|
||||
return;
|
||||
}
|
||||
// 直接传递原始事件，手势处理器会处理坐标转换
|
||||
this.gestureHandler.catchEvent(event);
|
||||
|
||||
// 如果是简单处理器，使用下面优化的基础处理方法
|
||||
if (!this.at) {
|
||||
// 使用优化后的基础处理方法
|
||||
if (correctedEvent.touches.length === 1) {
|
||||
this.handlePan(correctedEvent.touches[0]);
|
||||
} else if (correctedEvent.touches.length > 1) {
|
||||
this.handlePinch(correctedEvent.touches);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
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();
|
||||
@ -173,17 +166,12 @@ export default {
|
||||
// 更新触点数量
|
||||
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;
|
||||
|
||||
console.log(`原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`);
|
||||
|
||||
return {
|
||||
...touch,
|
||||
x: x,
|
||||
y: y
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
};
|
||||
});
|
||||
|
||||
@ -208,26 +196,20 @@ export default {
|
||||
this.gestureStatus = '结束';
|
||||
}
|
||||
|
||||
// 限制更新频率：至少每50ms更新一次
|
||||
// 限制更新频率
|
||||
if (currentTime - this.lastGestureTime > 50) {
|
||||
this.lastGestureTime = currentTime;
|
||||
this.updateCanvas();
|
||||
}
|
||||
},
|
||||
|
||||
// 更新Canvas（性能优化版）
|
||||
// 更新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
|
||||
);
|
||||
}
|
||||
this.scaleValue = Math.sqrt(
|
||||
this.transformMatrix.a * this.transformMatrix.a +
|
||||
this.transformMatrix.b * this.transformMatrix.b
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
@ -251,20 +233,34 @@ export default {
|
||||
this.updateCanvas();
|
||||
},
|
||||
|
||||
// 加载座位区域数据
|
||||
async loadSeatAreas() {
|
||||
try {
|
||||
// 模拟API请求
|
||||
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":1000,"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":1000,"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":1000,"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":1000,"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) {
|
||||
console.error('加载区域数据失败:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
/* padding: 20px; */
|
||||
}
|
||||
|
||||
.gesture-container {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
/* height: 70vh; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -1,169 +1,179 @@
|
||||
import AnyTouch from 'any-touch'
|
||||
|
||||
class GestureHandler {
|
||||
constructor(context, transformMatrix, { container }) {
|
||||
this.transformMatrix = transformMatrix;
|
||||
this.containerRect = container;
|
||||
this.panThreshold = 5; // 移动5像素以上才认为是拖动
|
||||
this.panStarted = false;
|
||||
this.panThreshold = 5;
|
||||
this.panStarted = false;
|
||||
|
||||
// 小程序环境兼容处理
|
||||
const atOptions = {
|
||||
getPoint: touch => ({
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
}),
|
||||
preventDefault: false
|
||||
};
|
||||
// 判断是否是小程序环境
|
||||
this.isMiniProgram = typeof wx !== 'undefined' || typeof uni !== 'undefined';
|
||||
|
||||
// 小程序特化处理 - 跳过DOM相关操作
|
||||
if (typeof window === 'undefined' || typeof HTMLElement === 'undefined') {
|
||||
// 小程序环境下不需要设置DOM属性
|
||||
atOptions._element = {
|
||||
// 小程序环境下直接使用降级方案
|
||||
if (this.isMiniProgram) {
|
||||
console.log('小程序环境，使用降级手势处理器');
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
return;
|
||||
}
|
||||
|
||||
// 非小程序环境尝试使用AnyTouch
|
||||
try {
|
||||
const atOptions = {
|
||||
getPoint: touch => ({
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
}),
|
||||
preventDefault: false
|
||||
};
|
||||
|
||||
// 提供兼容小程序的虚拟元素
|
||||
atOptions.element = {
|
||||
style: {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {}
|
||||
removeEventListener: () => {},
|
||||
ownerDocument: {
|
||||
documentElement: {
|
||||
style: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
this.at = new AnyTouch(atOptions);
|
||||
|
||||
// 动态导入AnyTouch避免小程序环境问题
|
||||
import('any-touch').then(AnyTouch => {
|
||||
this.at = new AnyTouch.default(atOptions);
|
||||
this.setupGestures();
|
||||
console.log('AnyTouch手势处理器已初始化');
|
||||
}).catch(e => {
|
||||
console.error('AnyTouch加载失败:', e);
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('AnyTouch初始化失败:', e);
|
||||
// 降级方案：在小程序环境实现基本手势
|
||||
this.handleGesture = this.createSimpleGestureHandler();
|
||||
}
|
||||
|
||||
if (this.at) {
|
||||
this.setupGestures();
|
||||
console.log('AnyTouch手势处理器已初始化');
|
||||
} else {
|
||||
console.warn('使用简化手势处理器');
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建小程序专用的简化手势处理器
|
||||
createSimpleGestureHandler() {
|
||||
return {
|
||||
run: (event) => {
|
||||
// 小程序环境下的基本手势实现
|
||||
const touches = event.touches || [];
|
||||
let isClick = true;
|
||||
let startPoint = null;
|
||||
let startTime = null;
|
||||
let lastPoint = null;
|
||||
|
||||
return (event) => {
|
||||
const touches = event.touches || [];
|
||||
|
||||
if (touches.length === 1) {
|
||||
const getPoint = (t) => ({
|
||||
x: t.x || (t.clientX - this.containerRect.left),
|
||||
y: t.y || (t.clientY - this.containerRect.top)
|
||||
});
|
||||
|
||||
if (touches.length === 1) {
|
||||
// 单指移动
|
||||
this._handlePan(touches[0]);
|
||||
} else if (touches.length > 1) {
|
||||
// 双指缩放
|
||||
this._handlePinch(touches);
|
||||
const currentPoint = getPoint(touches[0]);
|
||||
|
||||
// 第一次触摸
|
||||
if (!startPoint) {
|
||||
startPoint = currentPoint;
|
||||
startTime = Date.now();
|
||||
}
|
||||
|
||||
// 计算移动距离
|
||||
const dx = currentPoint.x - startPoint.x;
|
||||
const dy = currentPoint.y - startPoint.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// 如果是点击（移动距离小于阈值且时间短）
|
||||
if (isClick && distance < 5 && Date.now() - startTime < 200) {
|
||||
return; // 不执行移动操作
|
||||
}
|
||||
|
||||
// 标记为非点击操作
|
||||
isClick = false;
|
||||
|
||||
// 执行移动操作
|
||||
if (lastPoint) {
|
||||
const moveDx = currentPoint.x - lastPoint.x;
|
||||
const moveDy = currentPoint.y - lastPoint.y;
|
||||
|
||||
this.transformMatrix.tx += moveDx;
|
||||
this.transformMatrix.ty += moveDy;
|
||||
}
|
||||
|
||||
lastPoint = currentPoint;
|
||||
} else if (touches.length > 1) {
|
||||
this._handlePinch(touches);
|
||||
}
|
||||
|
||||
// 在触摸结束时重置状态
|
||||
if (event.type === 'touchend' || event.type === 'touchcancel') {
|
||||
isClick = true;
|
||||
startPoint = null;
|
||||
startTime = null;
|
||||
lastPoint = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
setupGestures() {
|
||||
// 平移手势 - 修复版本
|
||||
// 平移手势
|
||||
this.at.on('pan', (event) => {
|
||||
if (event.type === 'panstart') {
|
||||
console.log('panstart', event);
|
||||
// 重置移动开始状态
|
||||
this.panStarted = false;
|
||||
this.panStarted = false;
|
||||
}
|
||||
else if (event.type === 'panmove') {
|
||||
// 检查是否超过阈值
|
||||
const distance = Math.sqrt(event.deltaX**2 + event.deltaY**2);
|
||||
|
||||
if (!this.panStarted && distance < this.panThreshold) {
|
||||
return; // 小于阈值不处理
|
||||
}
|
||||
|
||||
if (!this.panStarted) {
|
||||
console.log('拖动手势开始');
|
||||
this.panStarted = true;
|
||||
}
|
||||
|
||||
// 基于当前缩放比例修正移动量
|
||||
const distance = Math.sqrt(event.deltaX**2 + event.deltaY**2);
|
||||
|
||||
if (!this.panStarted && distance < this.panThreshold) return;
|
||||
|
||||
if (!this.panStarted) {
|
||||
this.panStarted = true;
|
||||
}
|
||||
|
||||
const currentScale = Math.sqrt(
|
||||
this.transformMatrix.a * this.transformMatrix.a +
|
||||
this.transformMatrix.b * this.transformMatrix.b
|
||||
);
|
||||
|
||||
// 逆缩放移动量
|
||||
const dx = event.deltaX / currentScale;
|
||||
const dy = event.deltaY / currentScale;
|
||||
|
||||
|
||||
console.log(`平移: deltaX=${event.deltaX}, deltaY=${event.deltaY} | 修正后: dx=${dx}, dy=${dy}`);
|
||||
|
||||
this.transformMatrix.translate(dx, dy);
|
||||
} else if (event.type === 'panend') {
|
||||
} else if (event.type === 'panend') {
|
||||
this.panStarted = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 缩放手势 - 修复版本
|
||||
// 缩放手势
|
||||
this.at.on('pinch', (event) => {
|
||||
if (event.type === 'pinchstart') {
|
||||
this.lastScale = 1;
|
||||
}
|
||||
else if (event.type === 'pinchmove') {
|
||||
// 计算缩放变化量
|
||||
const scaleChange = event.scale / this.lastScale;
|
||||
this.lastScale = event.scale;
|
||||
|
||||
// 使用两指中心点
|
||||
const centerX = event.center.x;
|
||||
const centerY = event.center.y;
|
||||
|
||||
console.log(`缩放: scale=${event.scale} | 变化=${scaleChange} | 中心点: (${centerX}, ${centerY})`);
|
||||
|
||||
// 应用缩放
|
||||
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
|
||||
}
|
||||
});
|
||||
|
||||
// 点击手势
|
||||
this.at.on('tap', (event) => {
|
||||
console.log('点击事件', event);
|
||||
});
|
||||
|
||||
// 长按手势
|
||||
this.at.on('press', (event) => {
|
||||
console.log('长按事件', event);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 公共接口保持不变
|
||||
catchEvent(event) {
|
||||
try {
|
||||
if (this.at) {
|
||||
this.at.run(event);
|
||||
} else {
|
||||
// 内部处理降级方案
|
||||
const touches = event.touches || [];
|
||||
const eventType = event.type;
|
||||
|
||||
// 在事件开始时重置状态
|
||||
if (eventType === 'touchstart') {
|
||||
this.lastPoint = null;
|
||||
this.lastPoints = null;
|
||||
this.lastDistance = null;
|
||||
}
|
||||
|
||||
// 处理不同数量的手指
|
||||
if (touches.length === 1) {
|
||||
this._handlePan(touches[0]);
|
||||
} else if (touches.length > 1) {
|
||||
this._handlePinch(touches);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('手势处理错误:', e);
|
||||
// 公共接口
|
||||
catchEvent(event) {
|
||||
try {
|
||||
if (this.at) {
|
||||
this.at.run(event);
|
||||
} else if (this.catchEvent) {
|
||||
this.catchEvent(event);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('手势处理错误:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 基础平移手势处理
|
||||
_handlePan(touch) {
|
||||
// 获取容器坐标系坐标（统一计算方法）
|
||||
const getPoint = (t) => ({
|
||||
x: t.x || (t.clientX - this.containerRect.left),
|
||||
y: t.y || (t.clientY - this.containerRect.top)
|
||||
@ -172,59 +182,50 @@ class GestureHandler {
|
||||
const currentPoint = getPoint(touch);
|
||||
|
||||
if (this.lastPoint) {
|
||||
// 计算增量（使用容器坐标系）
|
||||
const dx = currentPoint.x - this.lastPoint.x;
|
||||
const dy = currentPoint.y - this.lastPoint.y;
|
||||
|
||||
// 应用平移变换
|
||||
this.transformMatrix.tx += dx;
|
||||
this.transformMatrix.ty += dy;
|
||||
}
|
||||
|
||||
// 存储当前点
|
||||
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 || (touch.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,8 @@ export default {
|
||||
default: () => ({
|
||||
a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
areaData:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -69,6 +70,121 @@ export default {
|
||||
this.initCanvas();
|
||||
},
|
||||
methods: {
|
||||
// 添加点击检测方法
|
||||
checkHitArea(x, y) {
|
||||
if (!this.areaData) return null;
|
||||
|
||||
// 转换坐标到原始画布空间
|
||||
const inverted = this.matrix.invertPoint(x, y);
|
||||
console.log('checkHitArea',inverted)
|
||||
// 遍历所有区域检测
|
||||
for (const area of this.areaData) {
|
||||
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
|
||||
return area.areacode;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 射线法判断点是否在多边形内
|
||||
// pointInPolygon(x, y, polygon) {
|
||||
// // console.log('pointInPolygon',x, y, polygon)
|
||||
// // 确保多边形有足够的点构成
|
||||
// if (!polygon || polygon.length < 6) return false;
|
||||
|
||||
// let inside = false;
|
||||
// const length = polygon.length;
|
||||
|
||||
// // 不需要遍历最后一个点，因为它是闭合点（与第一个点相同）
|
||||
// for (let i = 0, j = length - 2; i < length; j = i, i += 2) {
|
||||
// const xi = polygon[i], yi = polygon[i + 1];
|
||||
// const xj = polygon[j], yj = polygon[j + 1];
|
||||
|
||||
// // 检查点是否在边的y值范围内
|
||||
// const intersect = ((yi > y) !== (yj > y));
|
||||
|
||||
// // 检查点是否在边的左侧
|
||||
// if (intersect) {
|
||||
// const slope = (xj - xi) / (yj - yi); // 边的斜率
|
||||
// const intersectX = xi + (y - yi) * slope;
|
||||
|
||||
// if (x < intersectX) {
|
||||
// inside = !inside;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return inside;
|
||||
// },
|
||||
|
||||
// 在 transform-canvas.vue 中替换 pointInPolygon 方法
|
||||
pointInPolygon(x, y, polygon) {
|
||||
// 确保多边形的点数是偶数且至少有3个顶点
|
||||
if (!polygon || polygon.length < 6 || polygon.length % 2 !== 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let inside = false;
|
||||
// 转换多边形点数为顶点数
|
||||
const vertexCount = polygon.length / 2;
|
||||
let j = vertexCount - 1;
|
||||
|
||||
for (let i = 0; i < vertexCount; j = i++) {
|
||||
// 获取当前顶点和上一个顶点
|
||||
const xi = polygon[i * 2];
|
||||
const yi = polygon[i * 2 + 1];
|
||||
const xj = polygon[j * 2];
|
||||
const yj = polygon[j * 2 + 1];
|
||||
|
||||
// 检查点是否在边界上 - 提高精度避免浮点数误差
|
||||
const onLine = this.pointOnLineSegment(x, y, xi, yi, xj, yj);
|
||||
if (onLine) return true;
|
||||
|
||||
// 检查点是否在两个顶点之间（射线法）
|
||||
if ((yi < y && yj >= y) || (yj < y && yi >= y)) {
|
||||
// 计算射线与边界的交点
|
||||
const slope = (xj - xi) / (yj - yi);
|
||||
const intersectX = xi + (y - yi) * slope;
|
||||
|
||||
// 如果交点在点右侧，标记为穿越
|
||||
if (x < intersectX) {
|
||||
inside = !inside;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return inside;
|
||||
},
|
||||
|
||||
// 添加点是否在线段上的检查
|
||||
pointOnLineSegment(x, y, x1, y1, x2, y2) {
|
||||
// 线段的长度
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
const segmentLength = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// 点到线段起点的向量
|
||||
const vx = x - x1;
|
||||
const vy = y - y1;
|
||||
|
||||
// 向量在方向上的投影
|
||||
const dotProduct = vx * dx + vy * dy;
|
||||
|
||||
// 计算参数t (0-1之间表示在线段上)
|
||||
const t = dotProduct / (segmentLength * segmentLength);
|
||||
|
||||
// 点在线段上
|
||||
if (t >= 0 && t <= 1) {
|
||||
// 计算点在线段上的位置
|
||||
const projX = x1 + t * dx;
|
||||
const projY = y1 + t * dy;
|
||||
|
||||
// 检查点与投影点的距离（容差5px）
|
||||
const distance = Math.sqrt((x - projX) ** 2 + (y - projY) ** 2);
|
||||
return distance < 5;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
initCanvas() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#myCanvas')
|
||||
@ -108,10 +224,19 @@ export default {
|
||||
this.redraw();
|
||||
}
|
||||
},
|
||||
|
||||
async loadImage(src) {
|
||||
try {
|
||||
// 等待canvas初始化
|
||||
if (!this.canvas) {
|
||||
await this.initCanvas();
|
||||
}
|
||||
|
||||
this.image = await new Promise((resolve, reject) => {
|
||||
if (!this.canvas) {
|
||||
// reject(new Error("Canvas not initialized"));
|
||||
return;
|
||||
}
|
||||
|
||||
const image = this.canvas.createImage();
|
||||
image.src = src;
|
||||
image.onload = () => resolve(image);
|
||||
@ -121,9 +246,24 @@ export default {
|
||||
} catch (e) {
|
||||
console.error("图片加载失败:", e);
|
||||
this.image = null;
|
||||
this.redraw(); // 加载失败时也需要重绘画布
|
||||
}
|
||||
},
|
||||
|
||||
// async loadImage(src) {
|
||||
// try {
|
||||
// this.image = await new Promise((resolve, reject) => {
|
||||
// const image = this.canvas.createImage();
|
||||
// image.src = src;
|
||||
// image.onload = () => resolve(image);
|
||||
// image.onerror = reject;
|
||||
// });
|
||||
// this.redraw();
|
||||
// } catch (e) {
|
||||
// console.error("图片加载失败:", e);
|
||||
// this.image = null;
|
||||
// this.redraw(); // 加载失败时也需要重绘画布
|
||||
// }
|
||||
// },
|
||||
|
||||
redraw() {
|
||||
if (!this.ctx) return;
|
||||
@ -133,7 +273,6 @@ export default {
|
||||
|
||||
// 重置为初始状态
|
||||
this.ctx.resetTransform();
|
||||
console.log(this.canvasActualWidth, this.canvasActualHeight,'123123123123')
|
||||
this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight);
|
||||
|
||||
// 应用设备像素比缩放
|
||||
@ -152,18 +291,34 @@ export default {
|
||||
this.canvasDisplayWidth,
|
||||
this.canvasDisplayHeight
|
||||
);
|
||||
} else {
|
||||
// 图片加载失败的占位图
|
||||
// this.ctx.fillStyle = '#f0f0f0';
|
||||
// this.ctx.fillRect(0, 0, this.width, this.height);
|
||||
// this.ctx.fillStyle = '#999';
|
||||
// this.ctx.textAlign = 'center';
|
||||
// this.ctx.textBaseline = 'middle';
|
||||
// this.ctx.fillText('图片加载失败', this.width / 2, this.height / 2);
|
||||
}
|
||||
}
|
||||
// this.ctx.restore();
|
||||
|
||||
// 恢复上下文状态
|
||||
this.ctx.restore();
|
||||
if (this.areaData && this.areaData.length > 0) {
|
||||
this.areaData.forEach(area => {
|
||||
// if (!area.polygon || area.polygon.length < 6) return;
|
||||
|
||||
this.ctx.beginPath();
|
||||
|
||||
for (let i = 0; i < area.polygon.length; i += 2) {
|
||||
// 使用标准API
|
||||
if (i === 0) {
|
||||
this.ctx.moveTo(area.polygon[i], area.polygon[i + 1]);
|
||||
} else {
|
||||
this.ctx.lineTo(area.polygon[i], area.polygon[i + 1]);
|
||||
}
|
||||
}
|
||||
|
||||
this.ctx.closePath();
|
||||
this.ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
|
||||
this.ctx.lineWidth = 2;
|
||||
this.ctx.stroke();
|
||||
this.ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
|
||||
this.ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,6 +52,29 @@ class TransformMatrix {
|
||||
clone.ty = this.ty;
|
||||
return clone;
|
||||
}
|
||||
// 添加点坐标转换方法
|
||||
transformPoint(x, y) {
|
||||
return {
|
||||
x: this.a * x + this.c * y + this.tx,
|
||||
y: this.b * x + this.d * y + this.ty
|
||||
};
|
||||
}
|
||||
|
||||
// 添加逆矩阵转换方法
|
||||
invertPoint(x, y) {
|
||||
const det = this.a * this.d - this.b * this.c;
|
||||
|
||||
// 确保行列式不为零
|
||||
if (Math.abs(det) < 0.0001) {
|
||||
return {x, y}; // 避免除以零的错误
|
||||
}
|
||||
|
||||
// 使用正确的逆变换公式
|
||||
return {
|
||||
x: (this.d * (x - this.tx) - this.c * (y - this.ty)) / det,
|
||||
y: (this.a * (y - this.ty) - this.b * (x - this.tx)) / det
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default TransformMatrix;
|
||||
File diff suppressed because one or more lines are too long
@ -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;"}
|
||||
File diff suppressed because one or more lines are too long
@ -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;"}
|
||||
@ -1 +1 @@
|
||||
{"version":3,"file":"transform-matrix.js","sources":["pages/index/transform-matrix.js"],"sourcesContent":["class TransformMatrix {\n constructor() {\n this.reset();\n }\n \n reset() {\n this.a = 1; // 水平缩放\n this.b = 0; // 垂直倾斜\n this.c = 0; // 水平倾斜\n this.d = 1; // 垂直缩放\n this.tx = 0; // 水平移动\n this.ty = 0; // 垂直移动\n this.stack = [];\n }\n \n translate(dx, dy) {\n this.tx += this.a * dx + this.c * dy;\n this.ty += this.b * dx + this.d * dy;\n }\n \n scale(sx, sy, cx = 0, cy = 0) {\n // 移动到中心点\n this.translate(cx, cy);\n \n // 应用缩放\n this.a *= sx;\n this.b *= sx;\n this.c *= sy;\n this.d *= sy;\n \n // 移回原位置\n this.translate(-cx, -cy);\n }\n \n toArray() {\n return [this.a, this.b, this.c, this.d, this.tx, this.ty];\n }\n \n // 用于调试的字符串表示\n toString() {\n return `[${this.a.toFixed(2)}, ${this.b.toFixed(2)}, ${this.c.toFixed(2)}, ${this.d.toFixed(2)}, ${this.tx.toFixed(1)}, ${this.ty.toFixed(1)}]`;\n }\n \n // 克隆方法\n clone() {\n const clone = new TransformMatrix();\n clone.a = this.a;\n clone.b = this.b;\n clone.c = this.c;\n clone.d = this.d;\n clone.tx = this.tx;\n clone.ty = this.ty;\n return clone;\n }\n}\n\nexport default TransformMatrix;"],"names":[],"mappings":";AAAA,MAAM,gBAAgB;AAAA,EACpB,cAAc;AACZ,SAAK,MAAK;AAAA,EACX;AAAA,EAED,QAAQ;AACN,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,QAAQ;EACd;AAAA,EAED,UAAU,IAAI,IAAI;AAChB,SAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAClC,SAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,EACnC;AAAA,EAED,MAAM,IAAI,IAAI,KAAK,GAAG,KAAK,GAAG;AAE5B,SAAK,UAAU,IAAI,EAAE;AAGrB,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK;AAGV,SAAK,UAAU,CAAC,IAAI,CAAC,EAAE;AAAA,EACxB;AAAA,EAED,UAAU;AACR,WAAO,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,IAAI,KAAK,EAAE;AAAA,EACzD;AAAA;AAAA,EAGD,WAAW;AACT,WAAO,IAAI,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,GAAG,QAAQ,CAAC,CAAC,KAAK,KAAK,GAAG,QAAQ,CAAC,CAAC;AAAA,EAC7I;AAAA;AAAA,EAGD,QAAQ;AACN,UAAM,QAAQ,IAAI;AAClB,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,KAAK,KAAK;AAChB,UAAM,KAAK,KAAK;AAChB,WAAO;AAAA,EACR;AACH;;"}
|
||||
{"version":3,"file":"transform-matrix.js","sources":["pages/index/transform-matrix.js"],"sourcesContent":["class TransformMatrix {\n constructor() {\n this.reset();\n }\n \n reset() {\n this.a = 1; // 水平缩放\n this.b = 0; // 垂直倾斜\n this.c = 0; // 水平倾斜\n this.d = 1; // 垂直缩放\n this.tx = 0; // 水平移动\n this.ty = 0; // 垂直移动\n this.stack = [];\n }\n \n translate(dx, dy) {\n this.tx += this.a * dx + this.c * dy;\n this.ty += this.b * dx + this.d * dy;\n }\n \n scale(sx, sy, cx = 0, cy = 0) {\n // 移动到中心点\n this.translate(cx, cy);\n \n // 应用缩放\n this.a *= sx;\n this.b *= sx;\n this.c *= sy;\n this.d *= sy;\n \n // 移回原位置\n this.translate(-cx, -cy);\n }\n \n toArray() {\n return [this.a, this.b, this.c, this.d, this.tx, this.ty];\n }\n \n // 用于调试的字符串表示\n toString() {\n return `[${this.a.toFixed(2)}, ${this.b.toFixed(2)}, ${this.c.toFixed(2)}, ${this.d.toFixed(2)}, ${this.tx.toFixed(1)}, ${this.ty.toFixed(1)}]`;\n }\n \n // 克隆方法\n clone() {\n const clone = new TransformMatrix();\n clone.a = this.a;\n clone.b = this.b;\n clone.c = this.c;\n clone.d = this.d;\n clone.tx = this.tx;\n clone.ty = this.ty;\n return clone;\n }\n\t// 添加点坐标转换方法\n\ttransformPoint(x, y) {\n\t\treturn {\n\t\t\tx: this.a * x + this.c * y + this.tx,\n\t\t\ty: this.b * x + this.d * y + this.ty\n\t\t};\n\t}\n\t\n\t// 添加逆矩阵转换方法\n\tinvertPoint(x, y) {\n\t\tconst det = this.a * this.d - this.b * this.c;\n\t\t\n\t\t// 确保行列式不为零\n\t\tif (Math.abs(det) < 0.0001) {\n\t\t\treturn {x, y}; // 避免除以零的错误\n\t\t}\n\t\t\n\t\t// 使用正确的逆变换公式\n\t\treturn {\n\t\t\tx: (this.d * (x - this.tx) - this.c * (y - this.ty)) / det,\n\t\t\ty: (this.a * (y - this.ty) - this.b * (x - this.tx)) / det\n\t\t};\n\t}\n}\n\nexport default TransformMatrix;"],"names":[],"mappings":";AAAA,MAAM,gBAAgB;AAAA,EACpB,cAAc;AACZ,SAAK,MAAK;AAAA,EACX;AAAA,EAED,QAAQ;AACN,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,QAAQ;EACd;AAAA,EAED,UAAU,IAAI,IAAI;AAChB,SAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAClC,SAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,EACnC;AAAA,EAED,MAAM,IAAI,IAAI,KAAK,GAAG,KAAK,GAAG;AAE5B,SAAK,UAAU,IAAI,EAAE;AAGrB,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK;AAGV,SAAK,UAAU,CAAC,IAAI,CAAC,EAAE;AAAA,EACxB;AAAA,EAED,UAAU;AACR,WAAO,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,IAAI,KAAK,EAAE;AAAA,EACzD;AAAA;AAAA,EAGD,WAAW;AACT,WAAO,IAAI,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,GAAG,QAAQ,CAAC,CAAC,KAAK,KAAK,GAAG,QAAQ,CAAC,CAAC;AAAA,EAC7I;AAAA;AAAA,EAGD,QAAQ;AACN,UAAM,QAAQ,IAAI;AAClB,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,IAAI,KAAK;AACf,UAAM,KAAK,KAAK;AAChB,UAAM,KAAK,KAAK;AAChB,WAAO;AAAA,EACR;AAAA;AAAA,EAEF,eAAe,GAAG,GAAG;AACpB,WAAO;AAAA,MACN,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK;AAAA,MAClC,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK;AAAA,IACrC;AAAA,EACE;AAAA;AAAA,EAGD,YAAY,GAAG,GAAG;AACjB,UAAM,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK;AAG5C,QAAI,KAAK,IAAI,GAAG,IAAI,MAAQ;AAC3B,aAAO,EAAC,GAAG,EAAC;AAAA,IACZ;AAGD,WAAO;AAAA,MACN,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,OAAO;AAAA,MACvD,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,OAAO;AAAA,IAC1D;AAAA,EACE;AACF;;"}
|
||||
11
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
11
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
@ -6880,9 +6880,9 @@ function initOnError() {
|
||||
};
|
||||
}
|
||||
function initRuntimeSocketService() {
|
||||
const hosts = "127.0.0.1,172.10.0.226";
|
||||
const hosts = "127.0.0.1,172.10.0.127";
|
||||
const port = "8090";
|
||||
const id = "mp-weixin_YSvwpn";
|
||||
const id = "mp-weixin_IDV0HS";
|
||||
const lazy = typeof swan !== "undefined";
|
||||
let restoreError = lazy ? () => {
|
||||
} : initOnError();
|
||||
@ -8262,13 +8262,18 @@ class i extends l$1 {
|
||||
}
|
||||
}
|
||||
i.STATE_POSSIBLE = 0, i.STATE_START = 4, i.STATE_MOVE = 5, i.STATE_END = 1, i.STATE_CANCELLED = 3, i.STATE_FAILED = 2, i.STATE_RECOGNIZED = 1, i.tap = r$2, i.pan = u, i.swipe = a, i.press = c, i.rotate = i$1, i.pinch = r, i.doubletap = e;
|
||||
const index_es = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
||||
__proto__: null,
|
||||
default: i
|
||||
}, Symbol.toStringTag, { value: "Module" }));
|
||||
exports._export_sfc = _export_sfc;
|
||||
exports.createSSRApp = createSSRApp;
|
||||
exports.i = i;
|
||||
exports.index = index;
|
||||
exports.index_es = index_es;
|
||||
exports.o = o$2;
|
||||
exports.p = p$4;
|
||||
exports.resolveComponent = resolveComponent;
|
||||
exports.sr = sr;
|
||||
exports.t = t$2;
|
||||
exports.wx$1 = wx$1;
|
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map
|
||||
|
||||
@ -17,41 +17,29 @@ const _sfc_main = {
|
||||
gestureStatus: "等待手势...",
|
||||
scaleValue: 1,
|
||||
touchPoints: 0,
|
||||
lastGestureTime: 0
|
||||
lastGestureTime: 0,
|
||||
seatAreas: []
|
||||
// 座位区域数据
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.getContainerPosition();
|
||||
this.initGestureHandler();
|
||||
await this.loadSeatAreas();
|
||||
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) => {
|
||||
if (event.touches.length > 0) {
|
||||
const firstTouch = event.touches[0];
|
||||
const x = firstTouch.clientX - this.containerRect.left;
|
||||
const y = firstTouch.clientY - this.containerRect.top;
|
||||
this.gestureStatus = "降级模式: 单指拖动";
|
||||
this.touchPoints = event.touches.length;
|
||||
if (event.type === "touchmove") {
|
||||
this.transformMatrix.tx = x;
|
||||
this.transformMatrix.ty = y;
|
||||
this.updateCanvas();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
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() {
|
||||
@ -72,50 +60,58 @@ const _sfc_main = {
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:124", "成功获取容器位置:", this.containerRect);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:128", "获取容器位置失败:", e);
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:113", "获取容器位置失败:", e);
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 100));
|
||||
retryCount++;
|
||||
}
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-canvas-page.vue:136", `容器位置获取失败，已重试${maxRetries}次`);
|
||||
},
|
||||
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) {
|
||||
common_vendor.index.__f__("warn", "at pages/index/gesture-canvas-page.vue:142", "手势处理器未就绪，尝试重新初始化...");
|
||||
await this.getContainerPosition();
|
||||
this.initGestureHandler();
|
||||
if (event.type === "touchend" || event.type === "touchcancel") {
|
||||
this.lastPoint = null;
|
||||
this.lastPoints = null;
|
||||
this.gestureStatus = "结束";
|
||||
this.updateCanvas();
|
||||
return;
|
||||
}
|
||||
this.gestureHandler.catchEvent(event);
|
||||
if (!this.at) {
|
||||
if (correctedEvent.touches.length === 1) {
|
||||
this.handlePan(correctedEvent.touches[0]);
|
||||
} else if (correctedEvent.touches.length > 1) {
|
||||
this.handlePinch(correctedEvent.touches);
|
||||
}
|
||||
}
|
||||
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:181", `原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`);
|
||||
return {
|
||||
...touch,
|
||||
x,
|
||||
y
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
};
|
||||
});
|
||||
const correctedEvent = {
|
||||
@ -136,15 +132,12 @@ const _sfc_main = {
|
||||
this.updateCanvas();
|
||||
}
|
||||
},
|
||||
// 更新Canvas（性能优化版）
|
||||
// 更新Canvas
|
||||
updateCanvas() {
|
||||
this.$nextTick(() => {
|
||||
const canvas = this.$refs.canvasRef;
|
||||
if (canvas) {
|
||||
this.scaleValue = Math.sqrt(
|
||||
this.transformMatrix.a * this.transformMatrix.a + this.transformMatrix.b * this.transformMatrix.b
|
||||
);
|
||||
}
|
||||
this.scaleValue = Math.sqrt(
|
||||
this.transformMatrix.a * this.transformMatrix.a + this.transformMatrix.b * this.transformMatrix.b
|
||||
);
|
||||
});
|
||||
},
|
||||
// 重置画布
|
||||
@ -163,6 +156,19 @@ const _sfc_main = {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -182,15 +188,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
width: $data.canvasWidth,
|
||||
height: $data.canvasHeight,
|
||||
matrix: $data.transformMatrix,
|
||||
imgUrl: "https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg"
|
||||
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.resetCanvas && $options.resetCanvas(...args)),
|
||||
m: common_vendor.o((...args) => $options.zoomIn && $options.zoomIn(...args)),
|
||||
n: common_vendor.o((...args) => $options.zoomOut && $options.zoomOut(...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"]]);
|
||||
|
||||
@ -1 +1 @@
|
||||
<view class="container data-v-2e633000"><view class="gesture-container data-v-2e633000" bindtouchstart="{{h}}" bindtouchmove="{{i}}" bindtouchend="{{j}}" bindtouchcancel="{{k}}"><view class="debug-info data-v-2e633000"><text class="data-v-2e633000">缩放: {{a}} | X: {{b}} | Y: {{c}}</text><text class="data-v-2e633000">手势: {{d}}</text><text class="data-v-2e633000">触点: {{e}}</text></view><transform-canvas wx:if="{{g}}" class="r data-v-2e633000" u-r="canvasRef" u-i="2e633000-0" bind:__l="__l" u-p="{{g}}"/></view><view class="controls data-v-2e633000"><button class="data-v-2e633000" bindtap="{{l}}">重置</button><button class="data-v-2e633000" bindtap="{{m}}">放大</button><button class="data-v-2e633000" bindtap="{{n}}">缩小</button></view></view>
|
||||
<view class="container data-v-2e633000" bindtap="{{l}}"><view class="gesture-container data-v-2e633000" bindtouchstart="{{h}}" bindtouchmove="{{i}}" bindtouchend="{{j}}" bindtouchcancel="{{k}}"><view class="debug-info data-v-2e633000"><text class="data-v-2e633000">缩放: {{a}} | X: {{b}} | Y: {{c}}</text><text class="data-v-2e633000">手势: {{d}}</text><text class="data-v-2e633000">触点: {{e}}</text></view><transform-canvas wx:if="{{g}}" class="r data-v-2e633000" u-r="canvasRef" u-i="2e633000-0" bind:__l="__l" u-p="{{g}}"/></view></view>
|
||||
@ -1,12 +1,11 @@
|
||||
|
||||
.container.data-v-2e633000 {
|
||||
padding: 20px;
|
||||
/* padding: 20px; */
|
||||
}
|
||||
.gesture-container.data-v-2e633000 {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
/* height: 70vh; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
.debug-info.data-v-2e633000 {
|
||||
|
||||
@ -6,60 +6,97 @@ class GestureHandler {
|
||||
this.containerRect = container;
|
||||
this.panThreshold = 5;
|
||||
this.panStarted = false;
|
||||
const atOptions = {
|
||||
getPoint: (touch) => ({
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
}),
|
||||
preventDefault: false
|
||||
};
|
||||
if (typeof window === "undefined" || typeof HTMLElement === "undefined") {
|
||||
atOptions._element = {
|
||||
this.isMiniProgram = typeof common_vendor.wx$1 !== "undefined" || typeof common_vendor.index !== "undefined";
|
||||
if (this.isMiniProgram) {
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:13", "小程序环境，使用降级手势处理器");
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const atOptions = {
|
||||
getPoint: (touch) => ({
|
||||
x: touch.clientX - this.containerRect.left,
|
||||
y: touch.clientY - this.containerRect.top
|
||||
}),
|
||||
preventDefault: false
|
||||
};
|
||||
atOptions.element = {
|
||||
style: {},
|
||||
addEventListener: () => {
|
||||
},
|
||||
removeEventListener: () => {
|
||||
},
|
||||
ownerDocument: {
|
||||
documentElement: {
|
||||
style: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
try {
|
||||
this.at = new common_vendor.i(atOptions);
|
||||
"../../common/vendor.js".then((n) => n.index_es).then((AnyTouch) => {
|
||||
this.at = new AnyTouch.default(atOptions);
|
||||
this.setupGestures();
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:44", "AnyTouch手势处理器已初始化");
|
||||
}).catch((e) => {
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:46", "AnyTouch加载失败:", e);
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
});
|
||||
} catch (e) {
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:32", "AnyTouch初始化失败:", e);
|
||||
this.handleGesture = this.createSimpleGestureHandler();
|
||||
}
|
||||
if (this.at) {
|
||||
this.setupGestures();
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:39", "AnyTouch手势处理器已初始化");
|
||||
} else {
|
||||
common_vendor.index.__f__("warn", "at pages/index/gesture-handler.js:41", "使用简化手势处理器");
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:50", "AnyTouch初始化失败:", e);
|
||||
this.catchEvent = this.createSimpleGestureHandler();
|
||||
}
|
||||
}
|
||||
// 创建小程序专用的简化手势处理器
|
||||
createSimpleGestureHandler() {
|
||||
return {
|
||||
run: (event) => {
|
||||
const touches = event.touches || [];
|
||||
if (touches.length === 1) {
|
||||
this._handlePan(touches[0]);
|
||||
} else if (touches.length > 1) {
|
||||
this._handlePinch(touches);
|
||||
let isClick = true;
|
||||
let startPoint = null;
|
||||
let startTime = null;
|
||||
let lastPoint = null;
|
||||
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 currentPoint = getPoint(touches[0]);
|
||||
if (!startPoint) {
|
||||
startPoint = currentPoint;
|
||||
startTime = Date.now();
|
||||
}
|
||||
const dx = currentPoint.x - startPoint.x;
|
||||
const dy = currentPoint.y - startPoint.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (isClick && distance < 5 && Date.now() - startTime < 200) {
|
||||
return;
|
||||
}
|
||||
isClick = false;
|
||||
if (lastPoint) {
|
||||
const moveDx = currentPoint.x - lastPoint.x;
|
||||
const moveDy = currentPoint.y - lastPoint.y;
|
||||
this.transformMatrix.tx += moveDx;
|
||||
this.transformMatrix.ty += moveDy;
|
||||
}
|
||||
lastPoint = currentPoint;
|
||||
} else if (touches.length > 1) {
|
||||
this._handlePinch(touches);
|
||||
}
|
||||
if (event.type === "touchend" || event.type === "touchcancel") {
|
||||
isClick = true;
|
||||
startPoint = null;
|
||||
startTime = null;
|
||||
lastPoint = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
setupGestures() {
|
||||
this.at.on("pan", (event) => {
|
||||
if (event.type === "panstart") {
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:67", "panstart", event);
|
||||
this.panStarted = false;
|
||||
} else if (event.type === "panmove") {
|
||||
const distance = Math.sqrt(event.deltaX ** 2 + event.deltaY ** 2);
|
||||
if (!this.panStarted && distance < this.panThreshold) {
|
||||
if (!this.panStarted && distance < this.panThreshold)
|
||||
return;
|
||||
}
|
||||
if (!this.panStarted) {
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:80", "拖动手势开始");
|
||||
this.panStarted = true;
|
||||
}
|
||||
const currentScale = Math.sqrt(
|
||||
@ -67,7 +104,6 @@ class GestureHandler {
|
||||
);
|
||||
const dx = event.deltaX / currentScale;
|
||||
const dy = event.deltaY / currentScale;
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:95", `平移: deltaX=${event.deltaX}, deltaY=${event.deltaY} | 修正后: dx=${dx}, dy=${dy}`);
|
||||
this.transformMatrix.translate(dx, dy);
|
||||
} else if (event.type === "panend") {
|
||||
this.panStarted = false;
|
||||
@ -81,45 +117,27 @@ class GestureHandler {
|
||||
this.lastScale = event.scale;
|
||||
const centerX = event.center.x;
|
||||
const centerY = event.center.y;
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:117", `缩放: scale=${event.scale} | 变化=${scaleChange} | 中心点: (${centerX}, ${centerY})`);
|
||||
this.transformMatrix.scale(scaleChange, scaleChange, centerX, centerY);
|
||||
}
|
||||
});
|
||||
this.at.on("tap", (event) => {
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:126", "点击事件", event);
|
||||
});
|
||||
this.at.on("press", (event) => {
|
||||
common_vendor.index.__f__("log", "at pages/index/gesture-handler.js:131", "长按事件", event);
|
||||
});
|
||||
}
|
||||
// 公共接口保持不变
|
||||
// 公共接口
|
||||
catchEvent(event) {
|
||||
try {
|
||||
if (this.at) {
|
||||
this.at.run(event);
|
||||
} else {
|
||||
const touches = event.touches || [];
|
||||
const eventType = event.type;
|
||||
if (eventType === "touchstart") {
|
||||
this.lastPoint = null;
|
||||
this.lastPoints = null;
|
||||
this.lastDistance = null;
|
||||
}
|
||||
if (touches.length === 1) {
|
||||
this._handlePan(touches[0]);
|
||||
} else if (touches.length > 1) {
|
||||
this._handlePinch(touches);
|
||||
}
|
||||
} else if (this.catchEvent) {
|
||||
this.catchEvent(event);
|
||||
}
|
||||
} catch (e) {
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:161", "手势处理错误:", e);
|
||||
common_vendor.index.__f__("error", "at pages/index/gesture-handler.js:171", "手势处理错误:", e);
|
||||
}
|
||||
}
|
||||
// 基础平移手势处理
|
||||
_handlePan(touch) {
|
||||
const getPoint = (t) => ({
|
||||
x: t.x || t.clientX - this.containerRect.left,
|
||||
y: t.y || t.clientY - this.containerRect.top
|
||||
const getPoint = (t2) => ({
|
||||
x: t2.x || t2.clientX - this.containerRect.left,
|
||||
y: t2.y || t2.clientY - this.containerRect.top
|
||||
});
|
||||
const currentPoint = getPoint(touch);
|
||||
if (this.lastPoint) {
|
||||
@ -136,7 +154,7 @@ class GestureHandler {
|
||||
const point2 = touches[1];
|
||||
const getPoint = (touch) => ({
|
||||
x: touch.x || touch.clientX - this.containerRect.left,
|
||||
y: touch.y || touch.clientY - this.containerRect.top
|
||||
y: touch.y || t.clientY - this.containerRect.top
|
||||
});
|
||||
const currentPoints = [getPoint(point1), getPoint(point2)];
|
||||
if (this.lastPoints) {
|
||||
|
||||
@ -19,7 +19,8 @@ const _sfc_main = {
|
||||
tx: 0,
|
||||
ty: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
areaData: {}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -67,6 +68,86 @@ const _sfc_main = {
|
||||
this.initCanvas();
|
||||
},
|
||||
methods: {
|
||||
// 添加点击检测方法
|
||||
checkHitArea(x, y) {
|
||||
if (!this.areaData)
|
||||
return null;
|
||||
const inverted = this.matrix.invertPoint(x, y);
|
||||
common_vendor.index.__f__("log", "at pages/index/transform-canvas.vue:79", "checkHitArea", inverted);
|
||||
for (const area of this.areaData) {
|
||||
if (this.pointInPolygon(inverted.x, inverted.y, area.polygon)) {
|
||||
return area.areacode;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 射线法判断点是否在多边形内
|
||||
// pointInPolygon(x, y, polygon) {
|
||||
// // uni.__f__('log','at pages/index/transform-canvas.vue:90','pointInPolygon',x, y, polygon)
|
||||
// // 确保多边形有足够的点构成
|
||||
// if (!polygon || polygon.length < 6) return false;
|
||||
// let inside = false;
|
||||
// const length = polygon.length;
|
||||
// // 不需要遍历最后一个点，因为它是闭合点（与第一个点相同）
|
||||
// for (let i = 0, j = length - 2; i < length; j = i, i += 2) {
|
||||
// const xi = polygon[i], yi = polygon[i + 1];
|
||||
// const xj = polygon[j], yj = polygon[j + 1];
|
||||
// // 检查点是否在边的y值范围内
|
||||
// const intersect = ((yi > y) !== (yj > y));
|
||||
// // 检查点是否在边的左侧
|
||||
// if (intersect) {
|
||||
// const slope = (xj - xi) / (yj - yi); // 边的斜率
|
||||
// const intersectX = xi + (y - yi) * slope;
|
||||
// if (x < intersectX) {
|
||||
// inside = !inside;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return inside;
|
||||
// },
|
||||
// 在 transform-canvas.vue 中替换 pointInPolygon 方法
|
||||
pointInPolygon(x, y, polygon) {
|
||||
if (!polygon || polygon.length < 6 || polygon.length % 2 !== 0) {
|
||||
return false;
|
||||
}
|
||||
let inside = false;
|
||||
const vertexCount = polygon.length / 2;
|
||||
let j = vertexCount - 1;
|
||||
for (let i = 0; i < vertexCount; j = i++) {
|
||||
const xi = polygon[i * 2];
|
||||
const yi = polygon[i * 2 + 1];
|
||||
const xj = polygon[j * 2];
|
||||
const yj = polygon[j * 2 + 1];
|
||||
const onLine = this.pointOnLineSegment(x, y, xi, yi, xj, yj);
|
||||
if (onLine)
|
||||
return true;
|
||||
if (yi < y && yj >= y || yj < y && yi >= y) {
|
||||
const slope = (xj - xi) / (yj - yi);
|
||||
const intersectX = xi + (y - yi) * slope;
|
||||
if (x < intersectX) {
|
||||
inside = !inside;
|
||||
}
|
||||
}
|
||||
}
|
||||
return inside;
|
||||
},
|
||||
// 添加点是否在线段上的检查
|
||||
pointOnLineSegment(x, y, x1, y1, x2, y2) {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
const segmentLength = Math.sqrt(dx * dx + dy * dy);
|
||||
const vx = x - x1;
|
||||
const vy = y - y1;
|
||||
const dotProduct = vx * dx + vy * dy;
|
||||
const t = dotProduct / (segmentLength * segmentLength);
|
||||
if (t >= 0 && t <= 1) {
|
||||
const projX = x1 + t * dx;
|
||||
const projY = y1 + t * dy;
|
||||
const distance = Math.sqrt((x - projX) ** 2 + (y - projY) ** 2);
|
||||
return distance < 5;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
initCanvas() {
|
||||
const query = common_vendor.index.createSelectorQuery().in(this);
|
||||
query.select("#myCanvas").fields({ node: true, size: true }).exec(async (res) => {
|
||||
@ -95,7 +176,13 @@ const _sfc_main = {
|
||||
},
|
||||
async loadImage(src) {
|
||||
try {
|
||||
if (!this.canvas) {
|
||||
await this.initCanvas();
|
||||
}
|
||||
this.image = await new Promise((resolve, reject) => {
|
||||
if (!this.canvas) {
|
||||
return;
|
||||
}
|
||||
const image = this.canvas.createImage();
|
||||
image.src = src;
|
||||
image.onload = () => resolve(image);
|
||||
@ -103,17 +190,30 @@ const _sfc_main = {
|
||||
});
|
||||
this.redraw();
|
||||
} catch (e) {
|
||||
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:122", "图片加载失败:", e);
|
||||
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:247", "图片加载失败:", e);
|
||||
this.image = null;
|
||||
this.redraw();
|
||||
}
|
||||
},
|
||||
// async loadImage(src) {
|
||||
// try {
|
||||
// this.image = await new Promise((resolve, reject) => {
|
||||
// const image = this.canvas.createImage();
|
||||
// image.src = src;
|
||||
// image.onload = () => resolve(image);
|
||||
// image.onerror = reject;
|
||||
// });
|
||||
// this.redraw();
|
||||
// } catch (e) {
|
||||
// uni.__f__('error','at pages/index/transform-canvas.vue:262',"图片加载失败:", e);
|
||||
// this.image = null;
|
||||
// this.redraw(); // 加载失败时也需要重绘画布
|
||||
// }
|
||||
// },
|
||||
redraw() {
|
||||
if (!this.ctx)
|
||||
return;
|
||||
this.ctx.save();
|
||||
this.ctx.resetTransform();
|
||||
common_vendor.index.__f__("log", "at pages/index/transform-canvas.vue:136", this.canvasActualWidth, this.canvasActualHeight, "123123123123");
|
||||
this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight);
|
||||
this.ctx.scale(this.dpr, this.dpr);
|
||||
const { a, b, c, d, tx, ty } = this.matrix;
|
||||
@ -127,7 +227,24 @@ const _sfc_main = {
|
||||
this.canvasDisplayHeight
|
||||
);
|
||||
}
|
||||
this.ctx.restore();
|
||||
if (this.areaData && this.areaData.length > 0) {
|
||||
this.areaData.forEach((area) => {
|
||||
this.ctx.beginPath();
|
||||
for (let i = 0; i < area.polygon.length; i += 2) {
|
||||
if (i === 0) {
|
||||
this.ctx.moveTo(area.polygon[i], area.polygon[i + 1]);
|
||||
} else {
|
||||
this.ctx.lineTo(area.polygon[i], area.polygon[i + 1]);
|
||||
}
|
||||
}
|
||||
this.ctx.closePath();
|
||||
this.ctx.strokeStyle = "rgba(255, 0, 0, 0.7)";
|
||||
this.ctx.lineWidth = 2;
|
||||
this.ctx.stroke();
|
||||
this.ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
|
||||
this.ctx.fill();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -42,6 +42,24 @@ class TransformMatrix {
|
||||
clone.ty = this.ty;
|
||||
return clone;
|
||||
}
|
||||
// 添加点坐标转换方法
|
||||
transformPoint(x, y) {
|
||||
return {
|
||||
x: this.a * x + this.c * y + this.tx,
|
||||
y: this.b * x + this.d * y + this.ty
|
||||
};
|
||||
}
|
||||
// 添加逆矩阵转换方法
|
||||
invertPoint(x, y) {
|
||||
const det = this.a * this.d - this.b * this.c;
|
||||
if (Math.abs(det) < 1e-4) {
|
||||
return { x, y };
|
||||
}
|
||||
return {
|
||||
x: (this.d * (x - this.tx) - this.c * (y - this.ty)) / det,
|
||||
y: (this.a * (y - this.ty) - this.b * (x - this.tx)) / det
|
||||
};
|
||||
}
|
||||
}
|
||||
exports.TransformMatrix = TransformMatrix;
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/transform-matrix.js.map
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user