Allows to set individual (left,top,right,bottom) dotted/dashed borders (#29099)
Summary: This issue: fixes https://github.com/facebook/react-native/issues/24224 fixes https://github.com/facebook/react-native/issues/28695 fixes https://github.com/facebook/react-native/issues/23651 fixes https://github.com/facebook/react-native/issues/23475 fixes https://github.com/facebook/react-native/issues/22256 fixes https://github.com/facebook/react-native/issues/22226 fixes https://github.com/facebook/react-native/issues/19234 fixes https://github.com/facebook/react-native/issues/18285 fixes https://github.com/facebook/react-native/issues/17344 fixes https://github.com/facebook/react-native/issues/17343 fixes https://github.com/facebook/react-native/issues/17251 fixes https://github.com/facebook/react-native/issues/12817 fixes https://github.com/facebook/react-native/issues/12403 fixes https://github.com/facebook/react-native/issues/11042 fixes https://github.com/facebook/react-native/issues/9343 fixes https://github.com/facebook/react-native/issues/8236 fixes https://github.com/facebook/react-native/issues/8105 fixes https://github.com/facebook/react-native/issues/7838 fixes https://github.com/facebook/react-native/issues/6721 fixes https://github.com/facebook/react-native/issues/5411 fixes https://github.com/facebook/react-native/issues/3159 fixes https://github.com/facebook/react-native/issues/2335 fixes https://github.com/facebook/react-native/issues/840 fixes https://github.com/facebook/react-native/issues/27133 fixes https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
Родитель
cdce14f670
Коммит
cb0e1d603a
|
@ -89,6 +89,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
|
||||||
private @Nullable Path mOuterClipPathForBorderRadius;
|
private @Nullable Path mOuterClipPathForBorderRadius;
|
||||||
private @Nullable Path mPathForBorderRadiusOutline;
|
private @Nullable Path mPathForBorderRadiusOutline;
|
||||||
private @Nullable Path mPathForBorder;
|
private @Nullable Path mPathForBorder;
|
||||||
|
private Path mPathForSingleBorder = new Path();
|
||||||
private @Nullable Path mCenterDrawPath;
|
private @Nullable Path mCenterDrawPath;
|
||||||
private @Nullable RectF mInnerClipTempRectForBorderRadius;
|
private @Nullable RectF mInnerClipTempRectForBorderRadius;
|
||||||
private @Nullable RectF mOuterClipTempRectForBorderRadius;
|
private @Nullable RectF mOuterClipTempRectForBorderRadius;
|
||||||
|
@ -968,6 +969,14 @@ public class ReactViewBackgroundDrawable extends Drawable {
|
||||||
mPaint.setPathEffect(mPathEffectForBorderStyle);
|
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. */
|
/** For rounded borders we use default "borderWidth" property. */
|
||||||
public float getFullBorderWidth() {
|
public float getFullBorderWidth() {
|
||||||
return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL)))
|
return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL)))
|
||||||
|
@ -1083,6 +1092,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
|
||||||
colorTop,
|
colorTop,
|
||||||
colorRight,
|
colorRight,
|
||||||
colorBottom);
|
colorBottom);
|
||||||
|
|
||||||
if (fastBorderColor != 0) {
|
if (fastBorderColor != 0) {
|
||||||
if (Color.alpha(fastBorderColor) != 0) {
|
if (Color.alpha(fastBorderColor) != 0) {
|
||||||
// Border color is not transparent.
|
// Border color is not transparent.
|
||||||
|
@ -1090,21 +1100,42 @@ public class ReactViewBackgroundDrawable extends Drawable {
|
||||||
int bottom = bounds.bottom;
|
int bottom = bounds.bottom;
|
||||||
|
|
||||||
mPaint.setColor(fastBorderColor);
|
mPaint.setColor(fastBorderColor);
|
||||||
|
mPaint.setStyle(Paint.Style.STROKE);
|
||||||
if (borderLeft > 0) {
|
if (borderLeft > 0) {
|
||||||
int leftInset = left + borderLeft;
|
mPathForSingleBorder.reset();
|
||||||
canvas.drawRect(left, top, leftInset, bottom - borderBottom, mPaint);
|
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) {
|
if (borderTop > 0) {
|
||||||
int topInset = top + borderTop;
|
mPathForSingleBorder.reset();
|
||||||
canvas.drawRect(left + borderLeft, top, right, topInset, mPaint);
|
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) {
|
if (borderRight > 0) {
|
||||||
int rightInset = right - borderRight;
|
mPathForSingleBorder.reset();
|
||||||
canvas.drawRect(rightInset, top + borderTop, right, bottom, mPaint);
|
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) {
|
if (borderBottom > 0) {
|
||||||
int bottomInset = bottom - borderBottom;
|
mPathForSingleBorder.reset();
|
||||||
canvas.drawRect(left, bottomInset, right - borderRight, bottom, mPaint);
|
int width = Math.round(borderWidth.bottom);
|
||||||
|
updatePathEffect(width);
|
||||||
|
mPaint.setStrokeWidth(width);
|
||||||
|
mPathForSingleBorder.moveTo(left, bottom);
|
||||||
|
mPathForSingleBorder.lineTo(right, bottom);
|
||||||
|
canvas.drawPath(mPathForSingleBorder, mPaint);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -23,6 +23,7 @@ const styles = StyleSheet.create({
|
||||||
border1: {
|
border1: {
|
||||||
borderWidth: 10,
|
borderWidth: 10,
|
||||||
borderColor: 'brown',
|
borderColor: 'brown',
|
||||||
|
borderStyle: 'dotted',
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
borderWidth: 10,
|
borderWidth: 10,
|
||||||
|
@ -38,10 +39,10 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
border3: {
|
border3: {
|
||||||
borderColor: 'purple',
|
borderColor: 'purple',
|
||||||
borderTopWidth: 10,
|
borderTopWidth: 7,
|
||||||
borderRightWidth: 20,
|
borderRightWidth: 20,
|
||||||
borderBottomWidth: 30,
|
borderBottomWidth: 10,
|
||||||
borderLeftWidth: 40,
|
borderLeftWidth: 5,
|
||||||
},
|
},
|
||||||
border4: {
|
border4: {
|
||||||
borderTopWidth: 10,
|
borderTopWidth: 10,
|
||||||
|
@ -99,12 +100,14 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
border8Left: {
|
border8Left: {
|
||||||
borderLeftWidth: 5,
|
borderLeftWidth: 5,
|
||||||
|
borderStyle: 'dotted',
|
||||||
},
|
},
|
||||||
border8Bottom: {
|
border8Bottom: {
|
||||||
borderBottomWidth: 5,
|
borderBottomWidth: 5,
|
||||||
},
|
},
|
||||||
border8Right: {
|
border8Right: {
|
||||||
borderRightWidth: 5,
|
borderRightWidth: 5,
|
||||||
|
borderStyle: 'dashed',
|
||||||
},
|
},
|
||||||
border9: {
|
border9: {
|
||||||
borderWidth: 10,
|
borderWidth: 10,
|
||||||
|
|
Загрузка…
Ссылка в новой задаче