Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix rounded border drawing when border-radius is smaller than border-width (#28358)

Browse Source 
Summary:
This PR fixes the drawing of the border rounded edges when the border-radius is small than the border-width. The current implementation capped the possible border-radius making it impossible to set smaller border-radii when using thicker borders. After inspection it was found that the rounded-rect calculation is incorrect.

## Changelog

`[Android] [Fixed] - Fix rounded border-drawing when border-radius is smaller than border-width`
Pull Request resolved: https://github.com/facebook/react-native/pull/28358

Test Plan:
**Faulty situation:**

As you can see, when the border-radius becomes very low, the border is stuck at a minimum value. Only after setting the border-radius fully to 0 is it again rendered correctly.

![ezgif com-video-to-gif (2)](https://user-images.githubusercontent.com/6184593/77183540-c3435b00-6ace-11ea-950d-29a0ea1757bd.gif)

**After the fix:**

![ezgif com-video-to-gif (3)](https://user-images.githubusercontent.com/6184593/77183619-e837ce00-6ace-11ea-93a5-910127d352b7.gif)

Differential Revision: D21124739

Pulled By: shergin

fbshipit-source-id: cefd1776b77b5b9fb335e95fd7fdd7f345579dc4
This commit is contained in:
Hein Rutjes
2020-04-19 23:42:16 -07:00
committed by Facebook GitHub Bot
parent 5dc6eded1b
commit 28dce3665d
2 changed files with 66 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
+21 -13
View File
@@ -526,11 +526,6 @@ public class ReactViewBackgroundDrawable extends Drawable {
mTempRectForBorderRadiusOutline.set(getBounds());
mTempRectForCenterDrawPath.set(getBounds());
float fullBorderWidth = getFullBorderWidth();
if (fullBorderWidth > 0) {
mTempRectForCenterDrawPath.inset(fullBorderWidth * 0.5f, fullBorderWidth * 0.5f);
}
final RectF borderWidth = getDirectionAwareBorderInsets();
mInnerClipTempRectForBorderRadius.top += borderWidth.top;
@@ -538,6 +533,11 @@ public class ReactViewBackgroundDrawable extends Drawable {
mInnerClipTempRectForBorderRadius.left += borderWidth.left;
mInnerClipTempRectForBorderRadius.right -= borderWidth.right;
mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f;
mTempRectForCenterDrawPath.bottom -= borderWidth.bottom * 0.5f;
mTempRectForCenterDrawPath.left += borderWidth.left * 0.5f;
mTempRectForCenterDrawPath.right -= borderWidth.right * 0.5f;
final float borderRadius = getFullBorderRadius();
float topLeftRadius = getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_LEFT);
float topRightRadius = getBorderRadiusOrDefaultTo(borderRadius, BorderRadiusLocation.TOP_RIGHT);
@@ -663,14 +663,22 @@ public class ReactViewBackgroundDrawable extends Drawable {
mCenterDrawPath.addRoundRect(
mTempRectForCenterDrawPath,
new float[] {
innerTopLeftRadiusX + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
innerTopLeftRadiusY + (topLeftRadius > 0 ? extraRadiusForOutline : 0),
innerTopRightRadiusX + (topRightRadius > 0 ? extraRadiusForOutline : 0),
innerTopRightRadiusY + (topRightRadius > 0 ? extraRadiusForOutline : 0),
innerBottomRightRadiusX + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
innerBottomRightRadiusY + (bottomRightRadius > 0 ? extraRadiusForOutline : 0),
innerBottomLeftRadiusX + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0),
innerBottomLeftRadiusY + (bottomLeftRadius > 0 ? extraRadiusForOutline : 0)
Math.max(topLeftRadius - borderWidth.left * 0.5f,
(borderWidth.left > 0.0f) ? (topLeftRadius / borderWidth.left) : 0.0f),
Math.max(topLeftRadius - borderWidth.top * 0.5f,
(borderWidth.top > 0.0f) ? (topLeftRadius / borderWidth.top) : 0.0f),
Math.max(topRightRadius - borderWidth.right * 0.5f,
(borderWidth.right > 0.0f) ? (topRightRadius / borderWidth.right) : 0.0f),
Math.max(topRightRadius - borderWidth.top * 0.5f,
(borderWidth.top > 0.0f) ? (topRightRadius / borderWidth.top) : 0.0f),
Math.max(bottomRightRadius - borderWidth.right * 0.5f,
(borderWidth.right > 0.0f) ? (bottomRightRadius / borderWidth.right) : 0.0f),
Math.max(bottomRightRadius - borderWidth.bottom * 0.5f,
(borderWidth.bottom > 0.0f) ? (bottomRightRadius / borderWidth.bottom) : 0.0f),
Math.max(bottomLeftRadius - borderWidth.left * 0.5f,
(borderWidth.left > 0.0f) ? (bottomLeftRadius / borderWidth.left) : 0.0f),
Math.max(bottomLeftRadius - borderWidth.bottom * 0.5f,
(borderWidth.bottom > 0.0f) ? (bottomLeftRadius / borderWidth.bottom) : 0.0f)
},
Path.Direction.CW);