feat: 添加优化的像素对齐算法,确保在所有缩放比例下小车和光圈精确重合
This commit is contained in:
parent
e864703ed7
commit
0479943204
@ -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 };
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -135,7 +135,7 @@ if %errorlevel% neq 0 (
|
||||
echo 2. expect - 用于自动化交互脚本
|
||||
echo 可通过Cygwin或MSYS2安装
|
||||
echo.
|
||||
echo [当前方案] 脚本会将密码复制到剪贴板,提示输入密码时按Ctrl+V粘贴
|
||||
echo [当前方案] 脚本会将密码复制到剪贴板,提示输入密码时按Ctrl+V或右键粘贴
|
||||
echo.
|
||||
pause
|
||||
)
|
||||
|
Loading…
x
Reference in New Issue
Block a user