doc(contributing.md): add pixel miss-alignment recommendation

Follow up on the PR comment https://github.com/status-im/status-desktop/pull/5549#issuecomment-1099468321
This commit is contained in:
Stefan Dunca 2022-04-14 23:16:31 +02:00
parent 2069399979
commit 7710470559
1 changed files with 10 additions and 1 deletions

View File

@ -41,7 +41,7 @@ If it doesn't map to an existing one, use a base control like `Item`.
## QML well-behaved components checklist ## QML well-behaved components checklist
### Sizing support ### Positioning and sizing
[Positioners and Layouts In QML](https://doc.qt.io/qt-6/qtquick-usecase-layouts.html) [Positioners and Layouts In QML](https://doc.qt.io/qt-6/qtquick-usecase-layouts.html)
@ -66,6 +66,15 @@ If it doesn't map to an existing one, use a base control like `Item`.
- [Item Positioners in QML](https://doc.qt.io/qt-5/qtquick-positioning-layouts.html) - [Item Positioners in QML](https://doc.qt.io/qt-5/qtquick-positioning-layouts.html)
- Don't mix hints with sizes, it will create binding loops - Don't mix hints with sizes, it will create binding loops
### Quality
Pixel miss-alignment for sensitive elements like icons and images with straight and thin lines can degrade the quality perceptibly.
Dividing sizes and coordinates are the usual root cause of pixel miss-alignment. Correct subpixel division by rounding the result of the operation to a fixed value, e.g. `x: (width/2).toFixed()`
- Example of pixel miss-alignment. The right control has a position offset of `Qt.pos(0.7, 0.4)` therefore, the image interpolation generates a blurred rendering.
- ![](https://user-images.githubusercontent.com/47554641/163448378-3a6ede2f-a922-4f35-bff7-93c6bfa840d5.png)
## Topics ## Topics
### QML Coding Conventions ### QML Coding Conventions