Skip to content

Commit

Permalink
Allows to set individual (left,top,right,bottom) dotted/dashed borders (
Browse files Browse the repository at this point in the history
#29099)

Summary:
This issue:

fixes #24224 fixes #28695 fixes #23651 fixes #23475  fixes #22256 fixes #22226 fixes #19234 fixes  #18285  fixes #17344 fixes #17343 fixes #17251 fixes #12817 fixes #12403 fixes #11042 fixes #9343 fixes #8236 fixes #8105 fixes #7838 fixes #6721 fixes #5411 fixes #3159 fixes #2335 fixes #840 fixes #27133 fixes #28695

Allows to set individual (left,top,right,bottom) dotted/dashed borders.

If a single border is specified and the borderStyle is dotted or dashed, each border will be drawn with moveTo and lineTo taking in consideration of the border style and thickness.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Quickfix individual border style dotted or dashed rendering as solid

Pull Request resolved: #29099

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158300-05e05800-aa6c-11ea-96a3-40007b2ca611.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158309-07aa1b80-aa6c-11ea-973b-51e8e68b5808.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158320-0d9ffc80-aa6c-11ea-9d7f-dfba49fbfe41.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158334-11cc1a00-aa6c-11ea-8422-cd5b9384f391.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158556-4c35b700-aa6c-11ea-9a4d-eea791b3813a.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158574-51930180-aa6c-11ea-8e84-526cfb168f49.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158586-55268880-aa6c-11ea-9540-51d79a8e4cb0.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158601-5952a600-aa6c-11ea-82e7-85d54b858f1a.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158638-62dc0e00-aa6c-11ea-8765-ecba0d9d126f.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158652-67a0c200-aa6c-11ea-8336-e6eb8aa52e96.png"  width="300" height="" /> |

| **AFTER** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/84158690-738c8400-aa6c-11ea-9cf1-edec72d27cb7.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/84158912-b6e6f280-aa6c-11ea-94a7-0ee0db685f38.png"  width="300" height="" /> |

</p>
</details>

Reviewed By: mdvacca

Differential Revision: D28688914

Pulled By: RSNara

fbshipit-source-id: 34781d63265dcf55e30f11c014e6b4a35d67dcbd
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Aug 2, 2021
1 parent cdce14f commit cb0e1d6
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ private enum BorderStyle {
private @Nullable Path mOuterClipPathForBorderRadius;
private @Nullable Path mPathForBorderRadiusOutline;
private @Nullable Path mPathForBorder;
private Path mPathForSingleBorder = new Path();
private @Nullable Path mCenterDrawPath;
private @Nullable RectF mInnerClipTempRectForBorderRadius;
private @Nullable RectF mOuterClipTempRectForBorderRadius;
Expand Down Expand Up @@ -968,6 +969,14 @@ private void updatePathEffect() {
mPaint.setPathEffect(mPathEffectForBorderStyle);
}

private void updatePathEffect(int borderWidth) {
PathEffect pathEffectForBorderStyle = null;
if (mBorderStyle != null) {
pathEffectForBorderStyle = BorderStyle.getPathEffect(mBorderStyle, borderWidth);
}
mPaint.setPathEffect(pathEffectForBorderStyle);
}

/** For rounded borders we use default "borderWidth" property. */
public float getFullBorderWidth() {
return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL)))
Expand Down Expand Up @@ -1083,28 +1092,50 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
colorTop,
colorRight,
colorBottom);

if (fastBorderColor != 0) {
if (Color.alpha(fastBorderColor) != 0) {
// Border color is not transparent.
int right = bounds.right;
int bottom = bounds.bottom;

mPaint.setColor(fastBorderColor);
mPaint.setStyle(Paint.Style.STROKE);
if (borderLeft > 0) {
int leftInset = left + borderLeft;
canvas.drawRect(left, top, leftInset, bottom - borderBottom, mPaint);
mPathForSingleBorder.reset();
int width = Math.round(borderWidth.left);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, top - borderWidth.top / 2);
mPathForSingleBorder.lineTo(left, bottom + borderWidth.bottom / 2);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderTop > 0) {
int topInset = top + borderTop;
canvas.drawRect(left + borderLeft, top, right, topInset, mPaint);
mPathForSingleBorder.reset();
int width = Math.round(borderWidth.top);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, top);
mPathForSingleBorder.lineTo(right, top);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderRight > 0) {
int rightInset = right - borderRight;
canvas.drawRect(rightInset, top + borderTop, right, bottom, mPaint);
mPathForSingleBorder.reset();
int width = Math.round(borderWidth.right);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(right, top - borderWidth.top / 2);
mPathForSingleBorder.lineTo(right, bottom + borderWidth.bottom / 2);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
if (borderBottom > 0) {
int bottomInset = bottom - borderBottom;
canvas.drawRect(left, bottomInset, right - borderRight, bottom, mPaint);
mPathForSingleBorder.reset();
int width = Math.round(borderWidth.bottom);
updatePathEffect(width);
mPaint.setStrokeWidth(width);
mPathForSingleBorder.moveTo(left, bottom);
mPathForSingleBorder.lineTo(right, bottom);
canvas.drawPath(mPathForSingleBorder, mPaint);
}
}
} else {
Expand Down
9 changes: 6 additions & 3 deletions packages/rn-tester/js/examples/Border/BorderExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const styles = StyleSheet.create({
border1: {
borderWidth: 10,
borderColor: 'brown',
borderStyle: 'dotted',
},
borderRadius: {
borderWidth: 10,
Expand All @@ -38,10 +39,10 @@ const styles = StyleSheet.create({
},
border3: {
borderColor: 'purple',
borderTopWidth: 10,
borderTopWidth: 7,
borderRightWidth: 20,
borderBottomWidth: 30,
borderLeftWidth: 40,
borderBottomWidth: 10,
borderLeftWidth: 5,
},
border4: {
borderTopWidth: 10,
Expand Down Expand Up @@ -99,12 +100,14 @@ const styles = StyleSheet.create({
},
border8Left: {
borderLeftWidth: 5,
borderStyle: 'dotted',
},
border8Bottom: {
borderBottomWidth: 5,
},
border8Right: {
borderRightWidth: 5,
borderStyle: 'dashed',
},
border9: {
borderWidth: 10,
Expand Down

0 comments on commit cb0e1d6

Please sign in to comment.