Skip to content

Commit cb0e1d6

Browse files
fabOnReactfacebook-github-bot
fabOnReact
authored and
facebook-github-bot
committed
Allows to set individual (left,top,right,bottom) dotted/dashed borders (#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
1 parent cdce14f commit cb0e1d6

File tree

2 files changed

+45
-11
lines changed

2 files changed

+45
-11
lines changed

‎ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

+39-8
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ private enum BorderStyle {
8989
private @Nullable Path mOuterClipPathForBorderRadius;
9090
private @Nullable Path mPathForBorderRadiusOutline;
9191
private @Nullable Path mPathForBorder;
92+
private Path mPathForSingleBorder = new Path();
9293
private @Nullable Path mCenterDrawPath;
9394
private @Nullable RectF mInnerClipTempRectForBorderRadius;
9495
private @Nullable RectF mOuterClipTempRectForBorderRadius;
@@ -968,6 +969,14 @@ private void updatePathEffect() {
968969
mPaint.setPathEffect(mPathEffectForBorderStyle);
969970
}
970971

972+
private void updatePathEffect(int borderWidth) {
973+
PathEffect pathEffectForBorderStyle = null;
974+
if (mBorderStyle != null) {
975+
pathEffectForBorderStyle = BorderStyle.getPathEffect(mBorderStyle, borderWidth);
976+
}
977+
mPaint.setPathEffect(pathEffectForBorderStyle);
978+
}
979+
971980
/** For rounded borders we use default "borderWidth" property. */
972981
public float getFullBorderWidth() {
973982
return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL)))
@@ -1083,28 +1092,50 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
10831092
colorTop,
10841093
colorRight,
10851094
colorBottom);
1095+
10861096
if (fastBorderColor != 0) {
10871097
if (Color.alpha(fastBorderColor) != 0) {
10881098
// Border color is not transparent.
10891099
int right = bounds.right;
10901100
int bottom = bounds.bottom;
10911101

10921102
mPaint.setColor(fastBorderColor);
1103+
mPaint.setStyle(Paint.Style.STROKE);
10931104
if (borderLeft > 0) {
1094-
int leftInset = left + borderLeft;
1095-
canvas.drawRect(left, top, leftInset, bottom - borderBottom, mPaint);
1105+
mPathForSingleBorder.reset();
1106+
int width = Math.round(borderWidth.left);
1107+
updatePathEffect(width);
1108+
mPaint.setStrokeWidth(width);
1109+
mPathForSingleBorder.moveTo(left, top - borderWidth.top / 2);
1110+
mPathForSingleBorder.lineTo(left, bottom + borderWidth.bottom / 2);
1111+
canvas.drawPath(mPathForSingleBorder, mPaint);
10961112
}
10971113
if (borderTop > 0) {
1098-
int topInset = top + borderTop;
1099-
canvas.drawRect(left + borderLeft, top, right, topInset, mPaint);
1114+
mPathForSingleBorder.reset();
1115+
int width = Math.round(borderWidth.top);
1116+
updatePathEffect(width);
1117+
mPaint.setStrokeWidth(width);
1118+
mPathForSingleBorder.moveTo(left, top);
1119+
mPathForSingleBorder.lineTo(right, top);
1120+
canvas.drawPath(mPathForSingleBorder, mPaint);
11001121
}
11011122
if (borderRight > 0) {
1102-
int rightInset = right - borderRight;
1103-
canvas.drawRect(rightInset, top + borderTop, right, bottom, mPaint);
1123+
mPathForSingleBorder.reset();
1124+
int width = Math.round(borderWidth.right);
1125+
updatePathEffect(width);
1126+
mPaint.setStrokeWidth(width);
1127+
mPathForSingleBorder.moveTo(right, top - borderWidth.top / 2);
1128+
mPathForSingleBorder.lineTo(right, bottom + borderWidth.bottom / 2);
1129+
canvas.drawPath(mPathForSingleBorder, mPaint);
11041130
}
11051131
if (borderBottom > 0) {
1106-
int bottomInset = bottom - borderBottom;
1107-
canvas.drawRect(left, bottomInset, right - borderRight, bottom, mPaint);
1132+
mPathForSingleBorder.reset();
1133+
int width = Math.round(borderWidth.bottom);
1134+
updatePathEffect(width);
1135+
mPaint.setStrokeWidth(width);
1136+
mPathForSingleBorder.moveTo(left, bottom);
1137+
mPathForSingleBorder.lineTo(right, bottom);
1138+
canvas.drawPath(mPathForSingleBorder, mPaint);
11081139
}
11091140
}
11101141
} else {

‎packages/rn-tester/js/examples/Border/BorderExample.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const styles = StyleSheet.create({
2323
border1: {
2424
borderWidth: 10,
2525
borderColor: 'brown',
26+
borderStyle: 'dotted',
2627
},
2728
borderRadius: {
2829
borderWidth: 10,
@@ -38,10 +39,10 @@ const styles = StyleSheet.create({
3839
},
3940
border3: {
4041
borderColor: 'purple',
41-
borderTopWidth: 10,
42+
borderTopWidth: 7,
4243
borderRightWidth: 20,
43-
borderBottomWidth: 30,
44-
borderLeftWidth: 40,
44+
borderBottomWidth: 10,
45+
borderLeftWidth: 5,
4546
},
4647
border4: {
4748
borderTopWidth: 10,
@@ -99,12 +100,14 @@ const styles = StyleSheet.create({
99100
},
100101
border8Left: {
101102
borderLeftWidth: 5,
103+
borderStyle: 'dotted',
102104
},
103105
border8Bottom: {
104106
borderBottomWidth: 5,
105107
},
106108
border8Right: {
107109
borderRightWidth: 5,
110+
borderStyle: 'dashed',
108111
},
109112
border9: {
110113
borderWidth: 10,

0 commit comments

Comments
 (0)