hookehuyr

fix(PointsCollector): 优化积分点位置计算以适配小屏幕设备

简化半径计算逻辑并使用固定百分比值,针对小屏幕设备增加更严格的安全边距和缓冲区。调整默认位置范围使其更保守,确保积分点不会超出屏幕边界。
......@@ -145,24 +145,25 @@ const generatePointsData = () => {
const sizeRatio = item.points / maxValue;
const size = baseSize + (sizeRatio * 40); // rpx
// 优化半径计算,确保在不同屏幕尺寸下都能正确计算边界
// 将rpx转换为百分比,考虑屏幕宽度和高度的比例
const sizeInVw = (size / 750) * 100; // 转换为vw单位的百分比
const aspectRatio = windowWidth / windowHeight;
const radiusPercent = (sizeInVw / 2) / aspectRatio; // 转换为高度百分比的半径
// 定义更严格的安全区域,确保积分不会跑出屏幕
const safeMargin = Math.max(radiusPercent * 1.2, 8); // 至少8%的安全边距
// 简化半径计算,使用固定的百分比值,避免复杂的屏幕比例转换
const radiusPercent = Math.max((size / 750) * 100 * 0.5, 3); // 至少3%的半径
// 针对小屏幕设备增加更严格的安全边距
const isSmallScreen = windowWidth <= 375 || windowHeight <= 667;
const baseSafeMargin = isSmallScreen ? 12 : 8; // 小屏幕使用更大的安全边距
const safeMargin = Math.max(radiusPercent * 1.5, baseSafeMargin); // 增加安全系数到1.5
// 定义更保守的安全区域
const minX = safeMargin;
const maxX = 100 - safeMargin;
const minY = safeMargin + 5; // 顶部额外5%边距
const maxY = Math.min(60, 100 - safeMargin); // 限制在视图的顶部60%或安全区域内
const minY = safeMargin + 8; // 顶部额外8%边距
const maxY = Math.min(55, 100 - safeMargin); // 限制在视图的顶部55%,更保守
// 确保安全区域有效
if (minX >= maxX || minY >= maxY) {
console.warn('安全区域过小,使用默认位置');
x = 20 + Math.random() * 60; // 20%-80%范围
y = 15 + Math.random() * 40; // 15%-55%范围
x = 25 + Math.random() * 50; // 25%-75%范围,更保守
y = 20 + Math.random() * 30; // 20%-50%范围,更保守
positionedItems.push({ ...item, x, y, radiusPercent });
return { ...item, x, y };
}
......@@ -170,8 +171,7 @@ const generatePointsData = () => {
do {
attempts++;
if (attempts > maxAttempts) {
// console.warn('无法为项目找到不重叠的位置,使用安全位置:', item);
// 使用安全的默认位置
// 使用更安全的默认位置
x = minX + Math.random() * (maxX - minX);
y = minY + Math.random() * (maxY - minY);
break;
......@@ -181,7 +181,7 @@ const generatePointsData = () => {
x = Math.random() * (maxX - minX) + minX;
y = Math.random() * (maxY - minY) + minY;
// 二次检查边界,确保不会超出屏幕
// 三重检查边界,确保不会超出屏幕
x = Math.max(safeMargin, Math.min(100 - safeMargin, x));
y = Math.max(safeMargin, Math.min(maxY, y));
......@@ -194,13 +194,13 @@ const generatePointsData = () => {
continue;
}
// 检查与其他项目的碰撞
// 检查与其他项目的碰撞,增加更大的缓冲区
hasCollision = false;
for (const pItem of positionedItems) {
const dx = x - pItem.x;
const dy = y - pItem.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const combinedRadius = radiusPercent + pItem.radiusPercent + 2; // 增加2%的缓冲区
const combinedRadius = radiusPercent + pItem.radiusPercent + (isSmallScreen ? 4 : 3); // 小屏幕增加更大缓冲区
if (distance < combinedRadius) {
hasCollision = true;
......@@ -468,7 +468,7 @@ const handleGoToRewards = () => {
// background-image: url('https://cdn.ipadbiz.cn/lls_prog/images/dashboard_bg.png');
// background-size: cover;
// background-position: center bottom;
overflow: hidden;
overflow: hidden; // 确保超出容器的积分圆圈被隐藏
}
......