/**
|
* 横屏适配工具类
|
* 用于处理屏幕方向变化和布局适配
|
*/
|
|
class OrientationAdapter {
|
constructor() {
|
this.isLandscape = false;
|
this.screenWidth = 0;
|
this.screenHeight = 0;
|
this.callbacks = [];
|
this.deviceType = 'unknown'; // 设备类型
|
this.init();
|
}
|
|
/**
|
* 初始化适配器
|
*/
|
init() {
|
this.updateScreenInfo();
|
this.detectDeviceType();
|
this.bindEvents();
|
}
|
|
/**
|
* 更新屏幕信息
|
*/
|
updateScreenInfo() {
|
try {
|
const systemInfo = uni.getSystemInfoSync();
|
this.screenWidth = systemInfo.screenWidth;
|
this.screenHeight = systemInfo.screenHeight;
|
this.isLandscape = this.screenWidth > this.screenHeight;
|
|
console.log('屏幕信息更新:', {
|
width: this.screenWidth,
|
height: this.screenHeight,
|
isLandscape: this.isLandscape,
|
deviceType: this.deviceType
|
});
|
} catch (error) {
|
console.error('获取屏幕信息失败:', error);
|
}
|
}
|
|
/**
|
* 检测设备类型
|
*/
|
detectDeviceType() {
|
const width = this.screenWidth;
|
const height = this.screenHeight;
|
const maxDimension = Math.max(width, height);
|
const minDimension = Math.min(width, height);
|
|
// H8-101车载平板检测（1024x768或类似分辨率）
|
if (maxDimension >= 1024 && maxDimension <= 1366 && minDimension >= 768) {
|
this.deviceType = 'H8-101';
|
}
|
// 其他车载平板
|
else if (maxDimension >= 1024) {
|
this.deviceType = 'car-tablet';
|
}
|
// 手机
|
else if (maxDimension < 768) {
|
this.deviceType = 'mobile';
|
}
|
// 桌面设备
|
else {
|
this.deviceType = 'desktop';
|
}
|
|
console.log('设备类型检测:', this.deviceType);
|
}
|
|
/**
|
* 绑定事件监听
|
*/
|
bindEvents() {
|
// 监听窗口大小变化
|
uni.onWindowResize(() => {
|
this.handleResize();
|
});
|
|
// 监听屏幕方向变化（如果平台支持）
|
if (typeof uni.onOrientationChange === 'function') {
|
uni.onOrientationChange(() => {
|
this.handleOrientationChange();
|
});
|
}
|
}
|
|
/**
|
* 处理窗口大小变化
|
*/
|
handleResize() {
|
console.log('窗口大小变化');
|
const oldIsLandscape = this.isLandscape;
|
const oldDeviceType = this.deviceType;
|
|
this.updateScreenInfo();
|
this.detectDeviceType();
|
|
// 如果方向或设备类型发生变化，触发方向变化回调
|
if (oldIsLandscape !== this.isLandscape || oldDeviceType !== this.deviceType) {
|
this.handleOrientationChange();
|
} else {
|
// 仅触发大小变化回调
|
this.triggerCallbacks('resize');
|
}
|
}
|
|
/**
|
* 处理屏幕方向变化
|
*/
|
handleOrientationChange() {
|
console.log('屏幕方向变化:', this.isLandscape ? '横屏' : '竖屏', '设备类型:', this.deviceType);
|
|
// 延迟执行，确保方向变化完成
|
setTimeout(() => {
|
this.triggerCallbacks('orientation');
|
}, 300);
|
}
|
|
/**
|
* 添加回调函数
|
* @param {string} type - 回调类型：'orientation' | 'resize'
|
* @param {Function} callback - 回调函数
|
*/
|
addCallback(type, callback) {
|
this.callbacks.push({ type, callback });
|
}
|
|
/**
|
* 触发回调函数
|
* @param {string} type - 回调类型
|
*/
|
triggerCallbacks(type) {
|
this.callbacks.forEach(({ type: callbackType, callback }) => {
|
if (callbackType === type || callbackType === 'all') {
|
try {
|
callback({
|
isLandscape: this.isLandscape,
|
screenWidth: this.screenWidth,
|
screenHeight: this.screenHeight,
|
deviceType: this.deviceType
|
});
|
} catch (error) {
|
console.error('执行回调函数失败:', error);
|
}
|
}
|
});
|
}
|
|
/**
|
* H8-101车载平板专用画布尺寸计算
|
* @param {Object} options - 配置选项
|
* @returns {Object} 画布尺寸信息
|
*/
|
calculateH8CanvasSize(options = {}) {
|
const {
|
padding = 100,
|
controlAreaWidth = 750,
|
maxCanvasSize = 800,
|
minCanvasSize = 500
|
} = options;
|
|
const availableWidth = this.screenWidth - (padding * 2) - controlAreaWidth;
|
const availableHeight = this.screenHeight - (padding * 2);
|
|
// H8-101专用计算逻辑
|
let canvasSize = Math.max(
|
Math.min(availableWidth, availableHeight, maxCanvasSize),
|
minCanvasSize
|
);
|
|
// 确保画布不会太小
|
if (canvasSize < minCanvasSize) {
|
canvasSize = minCanvasSize;
|
}
|
|
return {
|
canvasSize,
|
availableWidth,
|
availableHeight,
|
padding,
|
controlAreaWidth,
|
deviceType: 'H8-101'
|
};
|
}
|
|
/**
|
* 计算横屏模式下的画布尺寸
|
* @param {Object} options - 配置选项
|
* @returns {Object} 画布尺寸信息
|
*/
|
calculateLandscapeCanvasSize(options = {}) {
|
// 如果是H8-101设备，使用专用计算方法
|
if (this.deviceType === 'H8-101') {
|
return this.calculateH8CanvasSize(options);
|
}
|
|
const {
|
padding = 80,
|
controlAreaWidth = 500,
|
maxCanvasSize = 700,
|
minCanvasSize = 450
|
} = options;
|
|
const availableWidth = this.screenWidth - (padding * 2) - controlAreaWidth;
|
const availableHeight = this.screenHeight - (padding * 2);
|
|
const canvasSize = Math.max(
|
Math.min(availableWidth, availableHeight, maxCanvasSize),
|
minCanvasSize
|
);
|
|
return {
|
canvasSize,
|
availableWidth,
|
availableHeight,
|
padding,
|
controlAreaWidth
|
};
|
}
|
|
/**
|
* 计算竖屏模式下的画布尺寸
|
* @param {Object} options - 配置选项
|
* @returns {Object} 画布尺寸信息
|
*/
|
calculatePortraitCanvasSize(options = {}) {
|
const {
|
padding = 60,
|
buttonAreaHeight = 600,
|
maxCanvasSize = 550,
|
minCanvasSize = 400
|
} = options;
|
|
const availableWidth = this.screenWidth - (padding * 2);
|
const availableHeight = this.screenHeight - (padding * 2) - buttonAreaHeight;
|
|
const canvasSize = Math.max(
|
Math.min(availableWidth, availableHeight, maxCanvasSize),
|
minCanvasSize
|
);
|
|
return {
|
canvasSize,
|
availableWidth,
|
availableHeight,
|
padding,
|
buttonAreaHeight
|
};
|
}
|
|
/**
|
* 根据屏幕方向计算画布尺寸
|
* @param {Object} options - 配置选项
|
* @returns {Object} 画布尺寸信息
|
*/
|
calculateCanvasSize(options = {}) {
|
if (this.isLandscape) {
|
return this.calculateLandscapeCanvasSize(options);
|
} else {
|
return this.calculatePortraitCanvasSize(options);
|
}
|
}
|
|
/**
|
* 获取当前屏幕信息
|
* @returns {Object} 屏幕信息
|
*/
|
getScreenInfo() {
|
return {
|
isLandscape: this.isLandscape,
|
screenWidth: this.screenWidth,
|
screenHeight: this.screenHeight,
|
aspectRatio: this.screenWidth / this.screenHeight,
|
deviceType: this.deviceType
|
};
|
}
|
|
/**
|
* 判断是否为车载平板
|
* @returns {boolean}
|
*/
|
isCarTablet() {
|
return this.deviceType === 'H8-101' || this.deviceType === 'car-tablet';
|
}
|
|
/**
|
* 判断是否为H8-101设备
|
* @returns {boolean}
|
*/
|
isH8Device() {
|
return this.deviceType === 'H8-101';
|
}
|
|
/**
|
* 判断是否为超宽屏
|
* @returns {boolean}
|
*/
|
isUltraWide() {
|
return this.screenWidth >= 1366 || this.screenHeight >= 1366;
|
}
|
|
/**
|
* 获取H8-101设备的推荐配置
|
* @returns {Object} 推荐配置
|
*/
|
getH8Recommendations() {
|
return {
|
buttonSize: {
|
minWidth: 180,
|
minHeight: 120,
|
fontSize: 40
|
},
|
canvasSize: {
|
max: 800,
|
min: 500
|
},
|
padding: 100,
|
controlAreaWidth: 750
|
};
|
}
|
}
|
|
// 创建单例实例
|
const orientationAdapter = new OrientationAdapter();
|
|
export default orientationAdapter;
|
