426 lines
12 KiB
JavaScript
426 lines
12 KiB
JavaScript
|
// 兼容性处理：requestAnimationFrame polyfill
|
|||
|
|
const getRequestAnimationFrame = () => {
|
|||
|
|
// 检查全局对象是否存在（uni-app 中可能是 uni 而不是 window）
|
|||
|
|
const global = typeof window !== 'undefined' ? window :
|
|||
|
|
typeof uni !== 'undefined' ? uni :
|
|||
|
|
typeof global !== 'undefined' ? global : {};
|
|||
|
|
|
|||
|
|
return global.requestAnimationFrame ||
|
|||
|
|
global.webkitRequestAnimationFrame ||
|
|||
|
|
global.mozRequestAnimationFrame ||
|
|||
|
|
global.oRequestAnimationFrame ||
|
|||
|
|
global.msRequestAnimationFrame ||
|
|||
|
|
function(callback) {
|
|||
|
|
return setTimeout(callback, 1000 / 60); // 60 FPS fallback
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getCancelAnimationFrame = () => {
|
|||
|
|
const global = typeof window !== 'undefined' ? window :
|
|||
|
|
typeof uni !== 'undefined' ? uni :
|
|||
|
|
typeof global !== 'undefined' ? global : {};
|
|||
|
|
|
|||
|
|
return global.cancelAnimationFrame ||
|
|||
|
|
global.webkitCancelAnimationFrame ||
|
|||
|
|
global.mozCancelAnimationFrame ||
|
|||
|
|
global.oCancelAnimationFrame ||
|
|||
|
|
global.msCancelAnimationFrame ||
|
|||
|
|
function(id) {
|
|||
|
|
return clearTimeout(id);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const requestAnimationFrame = getRequestAnimationFrame();
|
|||
|
|
const cancelAnimationFrame = getCancelAnimationFrame();
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 触摸缩放相关状态
|
|||
|
|
touchStartPosition1: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
},
|
|||
|
|
touchStartPosition2: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
},
|
|||
|
|
initialDistance: 0,
|
|||
|
|
x: 0, // 元素的x坐标
|
|||
|
|
y: 0, // 元素的y坐标
|
|||
|
|
scale: 1, // 元素的缩放比例
|
|||
|
|
initialX: 0, // 元素的初始x坐标
|
|||
|
|
initialY: 0, // 元素的初始y坐标
|
|||
|
|
minScale: 0.5, // 最小缩放比例
|
|||
|
|
maxScale: 3, // 最大缩放比例
|
|||
|
|
isScaling: false, // 是否正在缩放
|
|||
|
|
lastTouchTime: 0, // 上次触摸时间
|
|||
|
|
|
|||
|
|
// 拖拽优化相关
|
|||
|
|
isDragging: false, // 是否正在拖拽
|
|||
|
|
dragStartTime: 0, // 拖拽开始时间
|
|||
|
|
lastMoveTime: 0, // 上次移动时间
|
|||
|
|
velocity: { x: 0, y: 0 }, // 移动速度
|
|||
|
|
animationId: null, // 动画帧ID
|
|||
|
|
pendingUpdate: false, // 是否有待处理的更新
|
|||
|
|
|
|||
|
|
// 边界控制
|
|||
|
|
enableBoundary: false, // 是否启用边界控制
|
|||
|
|
boundary: {
|
|||
|
|
minX: -500,
|
|||
|
|
maxX: 500,
|
|||
|
|
minY: -500,
|
|||
|
|
maxY: 500,
|
|||
|
|
}, // 移动边界
|
|||
|
|
|
|||
|
|
// 兼容性相关
|
|||
|
|
useTimer: false, // 是否使用定时器代替 RAF（兼容性降级）
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 触摸开始事件处理
|
|||
|
|
* @param {TouchEvent} event 触摸事件
|
|||
|
|
*/
|
|||
|
|
handleTouchStart(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
// 取消之前的动画
|
|||
|
|
if (this.animationId) {
|
|||
|
|
this.safeCancelAnimationFrame(this.animationId);
|
|||
|
|
this.animationId = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentTime = Date.now();
|
|||
|
|
this.lastTouchTime = currentTime;
|
|||
|
|
|
|||
|
|
if (event.touches.length === 1) {
|
|||
|
|
// 单指拖拽初始化
|
|||
|
|
this.isScaling = false;
|
|||
|
|
this.isDragging = true;
|
|||
|
|
this.dragStartTime = currentTime;
|
|||
|
|
this.lastMoveTime = currentTime;
|
|||
|
|
this.initialX = event.touches[0].clientX;
|
|||
|
|
this.initialY = event.touches[0].clientY;
|
|||
|
|
this.velocity = { x: 0, y: 0 };
|
|||
|
|
this.pendingUpdate = false;
|
|||
|
|
} else if (event.touches.length === 2) {
|
|||
|
|
// 双指缩放初始化
|
|||
|
|
this.isScaling = true;
|
|||
|
|
this.isDragging = false;
|
|||
|
|
this.touchStartPosition1.x = event.touches[0].clientX;
|
|||
|
|
this.touchStartPosition1.y = event.touches[0].clientY;
|
|||
|
|
this.touchStartPosition2.x = event.touches[1].clientX;
|
|||
|
|
this.touchStartPosition2.y = event.touches[1].clientY;
|
|||
|
|
|
|||
|
|
// 计算初始两指间距离
|
|||
|
|
this.initialDistance = this.getDistance(
|
|||
|
|
this.touchStartPosition1,
|
|||
|
|
this.touchStartPosition2
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 触摸移动事件处理
|
|||
|
|
* @param {TouchEvent} event 触摸事件
|
|||
|
|
*/
|
|||
|
|
handleTouchMove(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
if (event.touches.length === 2 && this.isScaling) {
|
|||
|
|
// 双指缩放逻辑
|
|||
|
|
const currentDistance = this.getDistance(
|
|||
|
|
{ x: event.touches[0].clientX, y: event.touches[0].clientY },
|
|||
|
|
{ x: event.touches[1].clientX, y: event.touches[1].clientY }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (this.initialDistance > 0) {
|
|||
|
|
// 计算缩放比例变化
|
|||
|
|
const scaleChange = currentDistance / this.initialDistance;
|
|||
|
|
let newScale = this.scale * scaleChange;
|
|||
|
|
|
|||
|
|
// 限制缩放范围
|
|||
|
|
newScale = Math.max(this.minScale, Math.min(this.maxScale, newScale));
|
|||
|
|
this.scale = newScale;
|
|||
|
|
|
|||
|
|
// 更新初始距离为当前距离，用于下次计算
|
|||
|
|
this.initialDistance = currentDistance;
|
|||
|
|
}
|
|||
|
|
} else if (event.touches.length === 1 && this.isDragging) {
|
|||
|
|
// 单指拖拽逻辑优化
|
|||
|
|
const currentTime = Date.now();
|
|||
|
|
const currentX = event.touches[0].clientX;
|
|||
|
|
const currentY = event.touches[0].clientY;
|
|||
|
|
|
|||
|
|
// 计算移动距离
|
|||
|
|
const deltaX = currentX - this.initialX;
|
|||
|
|
const deltaY = currentY - this.initialY;
|
|||
|
|
|
|||
|
|
// 计算移动速度（用于惯性效果）
|
|||
|
|
const timeDelta = currentTime - this.lastMoveTime;
|
|||
|
|
if (timeDelta > 0) {
|
|||
|
|
this.velocity.x = deltaX / timeDelta * 16; // 标准化到16ms（60fps）
|
|||
|
|
this.velocity.y = deltaY / timeDelta * 16;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用节流机制更新位置
|
|||
|
|
this.schedulePositionUpdate(deltaX, deltaY);
|
|||
|
|
|
|||
|
|
// 更新初始位置和时间
|
|||
|
|
this.initialX = currentX;
|
|||
|
|
this.initialY = currentY;
|
|||
|
|
this.lastMoveTime = currentTime;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 触摸结束事件处理
|
|||
|
|
* @param {TouchEvent} event 触摸事件
|
|||
|
|
*/
|
|||
|
|
handleTouchEnd(event) {
|
|||
|
|
if (event.touches.length === 0) {
|
|||
|
|
// 所有手指都离开屏幕，重置状态
|
|||
|
|
this.isScaling = false;
|
|||
|
|
this.initialDistance = 0;
|
|||
|
|
|
|||
|
|
// 如果是拖拽结束，启动惯性效果
|
|||
|
|
if (this.isDragging) {
|
|||
|
|
this.isDragging = false;
|
|||
|
|
this.startInertiaAnimation();
|
|||
|
|
}
|
|||
|
|
} else if (event.touches.length === 1 && this.isScaling) {
|
|||
|
|
// 从双指变为单指，切换到拖拽模式
|
|||
|
|
this.isScaling = false;
|
|||
|
|
this.isDragging = true;
|
|||
|
|
this.initialX = event.touches[0].clientX;
|
|||
|
|
this.initialY = event.touches[0].clientY;
|
|||
|
|
this.lastMoveTime = Date.now();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算两点间距离的辅助方法
|
|||
|
|
* @param {Object} point1 第一个点 {x, y}
|
|||
|
|
* @param {Object} point2 第二个点 {x, y}
|
|||
|
|
* @return {Number} 两点间距离
|
|||
|
|
*/
|
|||
|
|
getDistance(point1, point2) {
|
|||
|
|
const dx = point1.x - point2.x;
|
|||
|
|
const dy = point1.y - point2.y;
|
|||
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置缩放和位置
|
|||
|
|
*/
|
|||
|
|
resetTransform() {
|
|||
|
|
this.x = 0;
|
|||
|
|
this.y = 0;
|
|||
|
|
this.scale = 1;
|
|||
|
|
this.isScaling = false;
|
|||
|
|
this.initialDistance = 0;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 安全的 requestAnimationFrame 调用
|
|||
|
|
* @param {Function} callback 回调函数
|
|||
|
|
* @return {Number} 动画ID
|
|||
|
|
*/
|
|||
|
|
safeRequestAnimationFrame(callback) {
|
|||
|
|
try {
|
|||
|
|
if (this.useTimer) {
|
|||
|
|
return setTimeout(callback, 16); // 约 60 FPS
|
|||
|
|
}
|
|||
|
|
return requestAnimationFrame(callback);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.warn('requestAnimationFrame failed, fallback to setTimeout:', error);
|
|||
|
|
this.useTimer = true;
|
|||
|
|
return setTimeout(callback, 16);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 安全的 cancelAnimationFrame 调用
|
|||
|
|
* @param {Number} id 动画ID
|
|||
|
|
*/
|
|||
|
|
safeCancelAnimationFrame(id) {
|
|||
|
|
try {
|
|||
|
|
if (this.useTimer || typeof id === 'number') {
|
|||
|
|
clearTimeout(id);
|
|||
|
|
} else {
|
|||
|
|
cancelAnimationFrame(id);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.warn('cancelAnimationFrame failed, fallback to clearTimeout:', error);
|
|||
|
|
clearTimeout(id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 节流位置更新机制
|
|||
|
|
* @param {Number} deltaX x轴位移
|
|||
|
|
* @param {Number} deltaY y轴位移
|
|||
|
|
*/
|
|||
|
|
schedulePositionUpdate(deltaX, deltaY) {
|
|||
|
|
// 计算新位置
|
|||
|
|
let newX = this.x + deltaX;
|
|||
|
|
let newY = this.y + deltaY;
|
|||
|
|
|
|||
|
|
// 应用边界限制
|
|||
|
|
if (this.enableBoundary) {
|
|||
|
|
const pos = this.applyBoundaryConstraints(newX, newY);
|
|||
|
|
newX = pos.x;
|
|||
|
|
newY = pos.y;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新位置
|
|||
|
|
this.x = newX;
|
|||
|
|
this.y = newY;
|
|||
|
|
|
|||
|
|
if (!this.pendingUpdate) {
|
|||
|
|
this.pendingUpdate = true;
|
|||
|
|
this.safeRequestAnimationFrame(() => {
|
|||
|
|
this.pendingUpdate = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 启动惯性动画
|
|||
|
|
*/
|
|||
|
|
startInertiaAnimation() {
|
|||
|
|
const minVelocity = 0.1; // 最小速度阈值
|
|||
|
|
const friction = 0.95; // 摩擦系数
|
|||
|
|
|
|||
|
|
// 如果速度太小，直接停止
|
|||
|
|
if (Math.abs(this.velocity.x) < minVelocity && Math.abs(this.velocity.y) < minVelocity) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const animate = () => {
|
|||
|
|
// 应用摩擦力
|
|||
|
|
this.velocity.x *= friction;
|
|||
|
|
this.velocity.y *= friction;
|
|||
|
|
|
|||
|
|
// 更新位置
|
|||
|
|
let newX = this.x + this.velocity.x;
|
|||
|
|
let newY = this.y + this.velocity.y;
|
|||
|
|
|
|||
|
|
// 应用边界限制
|
|||
|
|
if (this.enableBoundary) {
|
|||
|
|
const pos = this.applyBoundaryConstraints(newX, newY);
|
|||
|
|
newX = pos.x;
|
|||
|
|
newY = pos.y;
|
|||
|
|
|
|||
|
|
// 如果到达边界，减慢对应方向的速度
|
|||
|
|
if (newX !== this.x + this.velocity.x) {
|
|||
|
|
this.velocity.x *= 0.3;
|
|||
|
|
}
|
|||
|
|
if (newY !== this.y + this.velocity.y) {
|
|||
|
|
this.velocity.y *= 0.3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.x = newX;
|
|||
|
|
this.y = newY;
|
|||
|
|
|
|||
|
|
// 检查是否继续动画
|
|||
|
|
if (Math.abs(this.velocity.x) > minVelocity || Math.abs(this.velocity.y) > minVelocity) {
|
|||
|
|
this.animationId = this.safeRequestAnimationFrame(animate);
|
|||
|
|
} else {
|
|||
|
|
this.animationId = null;
|
|||
|
|
this.velocity = { x: 0, y: 0 };
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.animationId = this.safeRequestAnimationFrame(animate);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 应用边界约束
|
|||
|
|
* @param {Number} x x坐标
|
|||
|
|
* @param {Number} y y坐标
|
|||
|
|
* @return {Object} 约束后的坐标 {x, y}
|
|||
|
|
*/
|
|||
|
|
applyBoundaryConstraints(x, y) {
|
|||
|
|
return {
|
|||
|
|
x: Math.max(this.boundary.minX, Math.min(this.boundary.maxX, x)),
|
|||
|
|
y: Math.max(this.boundary.minY, Math.min(this.boundary.maxY, y)),
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置缩放范围
|
|||
|
|
* @param {Number} minScale 最小缩放比例
|
|||
|
|
* @param {Number} maxScale 最大缩放比例
|
|||
|
|
*/
|
|||
|
|
setScaleRange(minScale, maxScale) {
|
|||
|
|
this.minScale = minScale || 0.5;
|
|||
|
|
this.maxScale = maxScale || 3;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置移动边界
|
|||
|
|
* @param {Object} boundary 边界配置 {minX, maxX, minY, maxY}
|
|||
|
|
* @param {Boolean} enable 是否启用边界控制
|
|||
|
|
*/
|
|||
|
|
setBoundary(boundary, enable = true) {
|
|||
|
|
this.boundary = { ...this.boundary, ...boundary };
|
|||
|
|
this.enableBoundary = enable;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 检测并设置兼容性模式
|
|||
|
|
*/
|
|||
|
|
detectCompatibility() {
|
|||
|
|
try {
|
|||
|
|
// 尝试调用 requestAnimationFrame
|
|||
|
|
const testId = requestAnimationFrame(() => {});
|
|||
|
|
cancelAnimationFrame(testId);
|
|||
|
|
this.useTimer = false;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.warn('requestAnimationFrame not supported, using timer fallback');
|
|||
|
|
this.useTimer = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 强制使用定时器模式（用于调试或特殊需求）
|
|||
|
|
* @param {Boolean} useTimer 是否使用定时器
|
|||
|
|
*/
|
|||
|
|
setTimerMode(useTimer = true) {
|
|||
|
|
this.useTimer = useTimer;
|
|||
|
|
if (useTimer) {
|
|||
|
|
console.info('TouchScale: 已切换到定时器模式');
|
|||
|
|
} else {
|
|||
|
|
console.info('TouchScale: 已切换到 requestAnimationFrame 模式');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清理动画和状态
|
|||
|
|
*/
|
|||
|
|
cleanupTouchScale() {
|
|||
|
|
if (this.animationId) {
|
|||
|
|
this.safeCancelAnimationFrame(this.animationId);
|
|||
|
|
this.animationId = null;
|
|||
|
|
}
|
|||
|
|
this.isDragging = false;
|
|||
|
|
this.isScaling = false;
|
|||
|
|
this.velocity = { x: 0, y: 0 };
|
|||
|
|
this.pendingUpdate = false;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 组件创建时检测兼容性
|
|||
|
|
mounted() {
|
|||
|
|
this.detectCompatibility();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 组件销毁时清理
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.cleanupTouchScale();
|
|||
|
|
},
|
|||
|
|
};
|