Skip to content

fix: align sidebar layout values to physical pixel grid at fractional…#718

Open
Ivy233 wants to merge 2 commits intolinuxdeepin:masterfrom
Ivy233:fix/sidebar-icon-blur-fractional-dpr
Open

fix: align sidebar layout values to physical pixel grid at fractional…#718
Ivy233 wants to merge 2 commits intolinuxdeepin:masterfrom
Ivy233:fix/sidebar-icon-blur-fractional-dpr

Conversation

@Ivy233
Copy link

@Ivy233 Ivy233 commented Mar 2, 2026

… DPR

  1. Add Helper.pixelAligned() to snap logical pixel values so that value * DPR always lands on an integer physical pixel
  2. Apply pixelAligned() to SideBar spacing, topPadding, bottomPadding and bottomMargin
  3. Apply pixelAligned() to WindowedFrame sidebar topMargin, leftMargin and separator leftMargin
  4. Apply pixelAligned() to BottomBar padding
  5. At fractional DPR (1.25, 1.75), layout values like 10 produce fractional physical coordinates (e.g. 10 * 1.25 = 12.5), causing GPU bilinear interpolation blur on small icon textures during Scene Graph compositing. Snapping to integer physical pixels eliminates this.

Log: Fixed sidebar icons appearing blurry at 125%/175% display scaling

Influence:

  1. Test sidebar icons (Computer, Pictures, Documents, Desktop, Control Center) at 125% and 175% scaling, icons should be sharp
  2. Verify icons remain sharp at 100%, 150%, 200% scaling
  3. Check bottom bar power and fullscreen button alignment
  4. Verify sidebar layout spacing looks visually consistent across different DPR values

fix: 修复非整数缩放比例下侧边栏图标模糊问题

  1. 在 Helper 中新增 pixelAligned() 函数,将逻辑像素值对齐到整数物理像素
  2. 对 SideBar 的 spacing、topPadding、bottomPadding、bottomMargin 应用 pixelAligned()
  3. 对 WindowedFrame 中 sidebar 的 topMargin、leftMargin 及分隔线的 leftMargin 应用 pixelAligned()
  4. 对 BottomBar 的 padding 应用 pixelAligned()
  5. 在非整数 DPR(1.25、1.75)下,布局值如 10 会产生小数物理坐标 (如 10 × 1.25 = 12.5),导致 Scene Graph 合成时 GPU 双线性插值使小图标 纹理模糊。对齐到整数物理像素后即可消除此问题。

Log: 修复了 125%/175% 显示缩放下侧边栏图标模糊的问题

Influence:

  1. 在 125% 和 175% 缩放下测试侧边栏图标(计算机、图片、文档、桌面、 控制中心),图标应清晰
  2. 验证 100%、150%、200% 缩放下图标仍然清晰
  3. 检查底栏电源按钮和全屏按钮的对齐情况
  4. 验证不同 DPR 下侧边栏布局间距视觉一致性

PMS: BUG-288427

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @Ivy233, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@deepin-ci-robot
Copy link

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Ivy233

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

… DPR

1. Add Helper.pixelAligned() to snap logical pixel values so that
value * DPR always lands on an integer physical pixel
2. Apply pixelAligned() to SideBar spacing, topPadding, bottomPadding
and bottomMargin
3. Apply pixelAligned() to WindowedFrame sidebar topMargin, leftMargin
and separator leftMargin
4. Apply pixelAligned() to BottomBar padding
5. At fractional DPR (1.25, 1.75), layout values like 10 produce
fractional physical coordinates (e.g. 10 * 1.25 = 12.5), causing GPU
bilinear interpolation blur on small icon textures during Scene Graph
compositing. Snapping to integer physical pixels eliminates this.

Log: Fixed sidebar icons appearing blurry at 125%/175% display scaling

Influence:
1. Test sidebar icons (Computer, Pictures, Documents, Desktop, Control
Center) at 125% and 175% scaling, icons should be sharp
2. Verify icons remain sharp at 100%, 150%, 200% scaling
3. Check bottom bar power and fullscreen button alignment
4. Verify sidebar layout spacing looks visually consistent across
different DPR values

fix: 修复非整数缩放比例下侧边栏图标模糊问题

1. 在 Helper 中新增 pixelAligned() 函数,将逻辑像素值对齐到整数物理像素
2. 对 SideBar 的 spacing、topPadding、bottomPadding、bottomMargin 应用
pixelAligned()
3. 对 WindowedFrame 中 sidebar 的 topMargin、leftMargin 及分隔线的
leftMargin 应用 pixelAligned()
4. 对 BottomBar 的 padding 应用 pixelAligned()
5. 在非整数 DPR(1.25、1.75)下,布局值如 10 会产生小数物理坐标
(如 10 × 1.25 = 12.5),导致 Scene Graph 合成时 GPU 双线性插值使小图标
纹理模糊。对齐到整数物理像素后即可消除此问题。

Log: 修复了 125%/175% 显示缩放下侧边栏图标模糊的问题

Influence:
1. 在 125% 和 175% 缩放下测试侧边栏图标(计算机、图片、文档、桌面、
控制中心),图标应清晰
2. 验证 100%、150%、200% 缩放下图标仍然清晰
3. 检查底栏电源按钮和全屏按钮的对齐情况
4. 验证不同 DPR 下侧边栏布局间距视觉一致性

PMS: BUG-288427
@Ivy233 Ivy233 force-pushed the fix/sidebar-icon-blur-fractional-dpr branch from 48063d4 to ffc1732 Compare March 3, 2026 13:04
Use QQuickPaintedItem (PaintedDciIcon) to render DCI icons via QPainter
instead of the default Scene Graph GPU texture pipeline. This avoids the
bilinear interpolation blur that occurs at fractional DPR scaling
(e.g., 125%, 175%), matching the rendering quality of dde-file-manager.

Affected icons:
- Sidebar: sorting mode, arrow, computer, pictures, documents, desktop, settings
- Bottom bar: shutdown, fullscreen

fix: 使用基于 QPainter 的方式渲染侧边栏和底部栏的 DCI 图标

使用 QQuickPaintedItem(PaintedDciIcon)通过 QPainter 渲染 DCI 图标,
替代默认的 Scene Graph GPU 纹理管线。这避免了在非整数 DPR 缩放
(如 125%、175%)下由双线性插值引起的图标模糊问题,
使渲染质量与 dde-file-manager 一致。

涉及图标:
- 侧边栏:排序模式、箭头、计算机、图片、文档、桌面、设置
- 底部栏:关机、全屏

PMS: BUG-288427
@deepin-ci-robot
Copy link

deepin pr auto review

Git Diff 代码审查报告

本次代码变更主要涉及新增 PaintedDciIcon 类以及相关 QML 文件的修改,旨在改进图标的渲染方式,解决模糊问题,并优化像素对齐。以下是详细的审查意见:

1. 语法逻辑

1.1 CMakeLists.txt

  • 问题:新增文件路径 src/quick/painteddciicon.hsrc/quick/painteddciicon.cpp 被添加到 SOURCE_FILES 列表中,这是正确的。

1.2 PaintedDciIcon 类

  • 问题paint() 方法中,当 window() 为 null 时使用 qApp->devicePixelRatio() 作为后备方案,这是一个合理的处理方式。
  • 问题setName() 方法中直接使用 DDciIcon::fromTheme(m_name) 加载图标,如果图标不存在,m_dciIcon 将为 null,这会在 paint() 中被正确处理。

1.3 QML 文件

  • 问题:在多个 QML 文件中,将原来的 D.DciIcon 替换为 PaintedDciIcon,这是合理的变更。
  • 问题Helper.pixelAligned() 函数的实现是正确的,它将逻辑像素值对齐到物理像素边界。

2. 代码质量

2.1 PaintedDciIcon 类

  • 建议:在 paint() 方法中,QPalette pa = qApp->palette(); 获取的是应用程序的全局调色板,这可能不是最合适的选择。考虑使用父组件的调色板或提供更灵活的调色板设置方式。
  • 建议:在 setName() 方法中,当图标名称未改变时直接返回,这是好的实践,但可以考虑添加日志记录,便于调试。

2.2 QML 文件

  • 建议:在多个地方重复设置了相同的图标尺寸(如 width: 16; height: 16; sourceSize: Qt.size(16, 16)),可以考虑创建一个自定义组件或使用属性绑定来减少重复代码。
  • 建议:在 SideBarButton 组件中,iconSource 属性别名是一个好的设计,但可以考虑添加默认值。

3. 代码性能

3.1 PaintedDciIcon 类

  • 问题paint() 方法每次都会创建新的 DDciIconPalette 对象,这可能不是最优的。考虑在调色板相关属性改变时缓存调色板对象。
  • 问题paint() 方法中多次调用 qRound(),这在性能敏感的场景下可能需要优化。

3.2 QML 文件

  • 问题Helper.pixelAligned() 函数在多处被调用,这可能会导致重复计算。考虑在属性变化时缓存计算结果。

4. 代码安全

4.1 PaintedDciIcon 类

  • 问题setName() 方法直接使用用户提供的名称加载图标,没有进行任何验证或清理。如果图标名称包含特殊字符或路径遍历字符,可能会导致安全问题。
  • 建议:考虑添加对图标名称的验证,确保它只包含安全字符。

4.2 QML 文件

  • 问题:在多个地方直接使用 Screen.devicePixelRatio,这可能在某些情况下返回不正确的值。考虑使用窗口的 devicePixelRatio 属性。

5. 其他建议

  1. 文档:为 PaintedDciIcon 类添加更详细的文档说明,特别是关于其用途和使用方式的说明。
  2. 测试:为 PaintedDciIcon 类添加单元测试,确保其在各种情况下的行为符合预期。
  3. 错误处理:考虑添加更完善的错误处理机制,例如当图标加载失败时提供后备方案。
  4. 国际化:确保新增的代码和字符串都支持国际化。

总结

本次代码变更整体上是合理的,主要改进了图标的渲染方式和像素对齐。主要关注点是性能优化和安全增强,特别是在图标名称验证和调色板缓存方面。建议在后续版本中考虑上述改进意见,以提高代码质量和性能。

@deepin-bot
Copy link

deepin-bot bot commented Mar 5, 2026

TAG Bot

New tag: 2.0.28
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #720

@deepin-bot
Copy link

deepin-bot bot commented Mar 6, 2026

TAG Bot

New tag: 2.0.29
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #723

@deepin-bot
Copy link

deepin-bot bot commented Mar 6, 2026

TAG Bot

New tag: 2.0.30
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #724

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants