Skip to content

Commit

Permalink
Fix rounded border drawing when border-radius is smaller than border-…
Browse files Browse the repository at this point in the history
…width (#28358)

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: #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
  • Loading branch information
IjzerenHein authored and facebook-github-bot committed Apr 20, 2020
1 parent 5dc6ede commit 28dce36
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 17 deletions.
49 changes: 45 additions & 4 deletions RNTester/js/examples/View/ViewExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,53 @@ exports.examples = [
},
},
{
title: 'Circle with Border Radius',
title: 'Rounded Borders',
render(): React.Node {
return (
<View
style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}}
/>
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 50,
height: 50,
borderRadius: 25,
borderWidth: 1,
marginRight: 10,
}}
/>
<View
style={{
width: 50,
height: 50,
borderRadius: 25,
borderWidth: 10,
marginRight: 10,
}}
/>
<View
style={{
width: 50,
height: 50,
borderTopLeftRadius: 5,
borderTopRightRadius: 10,
borderBottomRightRadius: 25,
borderBottomLeftRadius: 50,
borderWidth: 1,
marginRight: 10,
}}
/>
<View
style={{
width: 50,
height: 50,
borderTopLeftRadius: 5,
borderTopRightRadius: 10,
borderBottomRightRadius: 25,
borderBottomLeftRadius: 50,
borderWidth: 10,
marginRight: 10,
}}
/>
</View>
);
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -526,18 +526,18 @@ private void updatePath() {
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;
mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
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);
Expand Down Expand Up @@ -663,14 +663,22 @@ private void updatePath() {
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);

Expand Down

0 comments on commit 28dce36

Please sign in to comment.