hookehuyr

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

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