hookehuyr

fix(PointsCollector): 优化积分点位置计算确保不超出屏幕边界

改进半径计算和安全区域逻辑,防止积分点在不同屏幕尺寸下超出边界。增加安全边距和二次边界检查,并在无法找到合适位置时使用默认安全位置。
......@@ -111,24 +111,46 @@ const generatePointsData = () => {
// 计算项目大小和半径
const sizeRatio = item.points / maxValue;
const size = baseSize + (sizeRatio * 40); // rpx
const radiusXPercent = (size / 750) * 100 / 2 * (windowWidth / windowHeight) ; // 归一化为高度的百分比
// 定义安全区域
const minX = radiusXPercent;
const maxX = 100 - radiusXPercent;
const minY = radiusXPercent + 5;
const maxY = 60; // 限制在视图的顶部60%
// 优化半径计算,确保在不同屏幕尺寸下都能正确计算边界
// 将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 minX = safeMargin;
const maxX = 100 - safeMargin;
const minY = safeMargin + 5; // 顶部额外5%边距
const maxY = Math.min(60, 100 - safeMargin); // 限制在视图的顶部60%或安全区域内
// 确保安全区域有效
if (minX >= maxX || minY >= maxY) {
console.warn('安全区域过小,使用默认位置');
x = 20 + Math.random() * 60; // 20%-80%范围
y = 15 + Math.random() * 40; // 15%-55%范围
positionedItems.push({ ...item, x, y, radiusPercent });
return { ...item, x, y };
}
do {
attempts++;
if (attempts > maxAttempts) {
console.warn('无法为项目找到不重叠的位置:', item);
break; // 超过尝试次数,接受当前位置
console.warn('无法为项目找到不重叠的位置,使用安全位置:', item);
// 使用安全的默认位置
x = minX + Math.random() * (maxX - minX);
y = minY + Math.random() * (maxY - minY);
break;
}
// 在计算出的边界内生成位置
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));
// 检查与中心禁飞区的距离
const dxCenter = x - 50;
......@@ -145,7 +167,7 @@ const generatePointsData = () => {
const dx = x - pItem.x;
const dy = y - pItem.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const combinedRadius = radiusXPercent + pItem.radiusXPercent;
const combinedRadius = radiusPercent + pItem.radiusPercent + 2; // 增加2%的缓冲区
if (distance < combinedRadius) {
hasCollision = true;
......@@ -154,7 +176,7 @@ const generatePointsData = () => {
}
} while (hasCollision);
positionedItems.push({ ...item, x, y, radiusXPercent });
positionedItems.push({ ...item, x, y, radiusPercent });
return { ...item, x, y };
});
}
......