Skip to content

Commit

Permalink
Fix GH-41226 by suppressing path adjustment when not actually drawing…
Browse files Browse the repository at this point in the history
… a border (#46239)

Summary:
When not drawing a border, the mGapBetweenPaths adjustment can create noticable pixelation when drawing curves through a low number of pixels.  This is noticable mostly on buttons and such on low-dpi devices.  This fix only applies the fix if clipping for the border radius is done.

When drawing small radius rounded backgrounds (e.g. to draw a circle or button) we see visible pixelation (see [GH-41226](#41226)) This is particularly noticable on low DPI devices.

## Changelog:

[ANDROID] [FIXED] - Don't use mGapBetweenPaths if not drawing a border

Pull Request resolved: #46239

Test Plan:
Built an android app that directly uses CSSBackgroundDrawable to draw a background and verified repro of this issue.
![pre-fix](https://github.com/user-attachments/assets/e56a41b1-60f6-4953-9e91-b95a3380f2d7)
Then modified the code according to this PR and verified that anti-aliasing is appropriately applied
![fix](https://github.com/user-attachments/assets/b6b1aecf-a713-4e0a-9759-82c2dd862991)

Reviewed By: NickGerleman

Differential Revision: D61925281

Pulled By: jorge-cab

fbshipit-source-id: 93014629d031bd0d716cd3bb11e2c294dedad639
  • Loading branch information
knappam authored and facebook-github-bot committed Aug 29, 2024
1 parent 48c4380 commit 8501b63
Showing 1 changed file with 9 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -645,6 +645,7 @@ private void updatePath() {
}

// Clip border ONLY if its color is non transparent
float pathAdjustment = 0f;
if (Color.alpha(colorLeft) != 0
&& Color.alpha(colorTop) != 0
&& Color.alpha(colorRight) != 0
Expand All @@ -655,6 +656,10 @@ private void updatePath() {
mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
mInnerClipTempRectForBorderRadius.left += borderWidth.left;
mInnerClipTempRectForBorderRadius.right -= borderWidth.right;

// only close gap between border and main path if we draw the border, otherwise
// we wind up pixelating small pixel-radius curves
pathAdjustment = mGapBetweenPaths;
}

mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f;
Expand Down Expand Up @@ -709,10 +714,10 @@ private void updatePath() {
// (mInnerClipTempRectForBorderRadius), ensuring the border can be
// drawn on top without the gap.
mBackgroundColorRenderPath.addRoundRect(
mInnerClipTempRectForBorderRadius.left - mGapBetweenPaths,
mInnerClipTempRectForBorderRadius.top - mGapBetweenPaths,
mInnerClipTempRectForBorderRadius.right + mGapBetweenPaths,
mInnerClipTempRectForBorderRadius.bottom + mGapBetweenPaths,
mInnerClipTempRectForBorderRadius.left - pathAdjustment,
mInnerClipTempRectForBorderRadius.top - pathAdjustment,
mInnerClipTempRectForBorderRadius.right + pathAdjustment,
mInnerClipTempRectForBorderRadius.bottom + pathAdjustment,
new float[] {
innerTopLeftRadiusX,
innerTopLeftRadiusY,
Expand Down

0 comments on commit 8501b63

Please sign in to comment.