feat: 添加优化的像素对齐算法,确保在所有缩放比例下小车和光圈精确重合

This commit is contained in:
xudan 2025-06-30 17:35:24 +08:00
parent e864703ed7
commit 0479943204
3 changed files with 48 additions and 6 deletions

View File

@ -423,6 +423,49 @@ export class EditorService extends Meta2d {
return parseFloat(truncated.toFixed(3));
}
/**
* -
*
*/
#calculatePixelAlignedOffset(baseOffset: number): number {
const scale = this.store.data.scale || 1;
const devicePixelRatio = window.devicePixelRatio || 1;
// 计算实际像素偏移量
const scaledOffset = baseOffset * scale;
// 多重对齐策略:
// 1. 设备像素对齐 - 确保在高DPI屏幕上也能对齐
const deviceAlignedOffset = Math.round(scaledOffset * devicePixelRatio) / devicePixelRatio;
// 2. 子像素对齐 - 对于常见的缩放比例使用特殊处理
let finalOffset = deviceAlignedOffset;
// 针对常见问题缩放比例的特殊处理
const roundedScale = Math.round(scale * 100) / 100; // 避免浮点数精度问题
if (roundedScale <= 0.2) {
// 极小缩放使用更粗粒度的对齐0.5像素边界)
finalOffset = Math.round(scaledOffset * 2) / 2;
} else if (roundedScale <= 0.5) {
// 小缩放使用0.25像素边界对齐
finalOffset = Math.round(scaledOffset * 4) / 4;
} else if (roundedScale >= 2) {
// 大缩放:使用精确的像素边界对齐
finalOffset = Math.round(scaledOffset);
} else {
// 标准缩放:使用设备像素对齐结果,但增加额外的精度控制
const precisionFactor = 8; // 1/8像素精度
finalOffset = Math.round(scaledOffset * precisionFactor) / precisionFactor;
}
// 3. 转换回逻辑坐标系并应用精度控制
const logicalOffset = finalOffset / scale;
// 4. 使用现有的精度控制方法确保数值稳定性
return this.#fixPrecision(logicalOffset);
}
/** 画布变化事件流,用于触发响应式数据更新 */
readonly #change$$ = new Subject<boolean>();
@ -545,9 +588,8 @@ export class EditorService extends Meta2d {
const image =
import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
// 根据当前缩放比例调整iconTop避免15%等特定缩放下的像素对齐问题(小车和光圈没重合的问题)
const scale = this.store.data.scale || 1;
const iconTop = Math.round(-10 * scale) / scale;
// 使用优化的像素对齐算法,确保小车和光圈精确重合
const iconTop = this.#calculatePixelAlignedOffset(-10);
return { image, iconWidth: 34, iconHeight: 54, iconTop };
}

View File

@ -45,12 +45,12 @@ export default ({ mode }: Record<string, unknown>) =>
proxy: {
'/mocks/': { target: 'http://localhost:8888/web-amr' },
'/api/': {
target: 'http://192.168.189.206:8080/jeecg-boot',
target: 'http://192.168.189.80:8080/jeecg-boot',
rewrite: (path) => path.replace(/^\/api/, ''),
changeOrigin: true,
},
'/ws/': {
target: 'ws://192.168.189.206:8080/jeecg-boot',
target: 'ws://192.168.189.80:8080/jeecg-boot',
rewrite: (path) => path.replace(/^\/ws/, ''),
changeOrigin: true,
ws: true,

View File

@ -135,7 +135,7 @@ if %errorlevel% neq 0 (
echo 2. expect - 用于自动化交互脚本
echo 可通过Cygwin或MSYS2安装
echo.
echo [当前方案] 脚本会将密码复制到剪贴板提示输入密码时按Ctrl+V粘贴
echo [当前方案] 脚本会将密码复制到剪贴板提示输入密码时按Ctrl+V或右键粘贴
echo.
pause
)