From cec8ac9b3934bf1d01bdb10be473ddaa84afa9af Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Tue, 9 Jun 2020 15:54:03 +0200 Subject: [PATCH 1/3] updating example --- RNTester/js/examples/Border/BorderExample.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/RNTester/js/examples/Border/BorderExample.js b/RNTester/js/examples/Border/BorderExample.js index f43016ef60ed45..083361c8c208fc 100644 --- a/RNTester/js/examples/Border/BorderExample.js +++ b/RNTester/js/examples/Border/BorderExample.js @@ -23,6 +23,7 @@ const styles = StyleSheet.create({ border1: { borderWidth: 10, borderColor: 'brown', + borderStyle: 'dotted', }, borderRadius: { borderWidth: 10, @@ -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, @@ -99,12 +100,14 @@ const styles = StyleSheet.create({ }, border8Left: { borderLeftWidth: 5, + borderStyle: 'dotted', }, border8Bottom: { borderBottomWidth: 5, }, border8Right: { borderRightWidth: 5, + borderStyle: 'dashed', }, border9: { borderWidth: 10, From 40e940ad87c6d2ff70e76807c9ead85d158d2a1b Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Tue, 9 Jun 2020 15:56:42 +0200 Subject: [PATCH 2/3] updating ReactViewBackgroundDrawable to support single dashed borders --- .../view/ReactViewBackgroundDrawable.java | 44 ++++++++++++++++--- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java index e22b70046f1975..73d0918e10073a 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java @@ -975,6 +975,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))) @@ -1099,21 +1107,43 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { 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); + Path path = new Path(); + int width = Math.round(borderWidth.left); + updatePathEffect(width); + mPaint.setStrokeWidth(width); + path.moveTo(left, top - borderWidth.top/2); + path.lineTo(left, bottom + borderWidth.bottom/2); + canvas.drawPath(path, mPaint); } if (borderTop > 0) { - int topInset = top + borderTop; - canvas.drawRect(left + borderLeft, top, right, topInset, mPaint); + Path path = new Path(); + int width = Math.round(borderWidth.top); + updatePathEffect(width); + mPaint.setStrokeWidth(width); + path.moveTo(left, top); + path.lineTo(right, top); + canvas.drawPath(path, mPaint); } if (borderRight > 0) { - int rightInset = right - borderRight; - canvas.drawRect(rightInset, top + borderTop, right, bottom, mPaint); + Path path = new Path(); + int width = Math.round(borderWidth.right); + updatePathEffect(width); + mPaint.setStrokeWidth(width); + path.moveTo(right, top - borderWidth.top/2); + path.lineTo(right, bottom + borderWidth.bottom/2); + canvas.drawPath(path, mPaint); } if (borderBottom > 0) { - int bottomInset = bottom - borderBottom; - canvas.drawRect(left, bottomInset, right - borderRight, bottom, mPaint); + Path path = new Path(); + int width = Math.round(borderWidth.bottom); + updatePathEffect(width); + mPaint.setStrokeWidth(width); + path.moveTo(left, bottom); + path.lineTo(right, bottom); + canvas.drawPath(path, mPaint); } } } else { From cbc9f4503e580da15461dbaae5317a94f9b4e77a Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Thu, 9 Jul 2020 17:52:28 +0200 Subject: [PATCH 3/3] changes required in code-review --- .../view/ReactViewBackgroundDrawable.java | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java index 73d0918e10073a..3c7059add37d00 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java @@ -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; @@ -1100,6 +1101,7 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { colorTop, colorRight, colorBottom); + if (fastBorderColor != 0) { if (Color.alpha(fastBorderColor) != 0) { // Border color is not transparent. @@ -1109,41 +1111,40 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { mPaint.setColor(fastBorderColor); mPaint.setStyle(Paint.Style.STROKE); if (borderLeft > 0) { - int leftInset = left + borderLeft; - Path path = new Path(); + mPathForSingleBorder.reset(); int width = Math.round(borderWidth.left); updatePathEffect(width); mPaint.setStrokeWidth(width); - path.moveTo(left, top - borderWidth.top/2); - path.lineTo(left, bottom + borderWidth.bottom/2); - canvas.drawPath(path, mPaint); + mPathForSingleBorder.moveTo(left, top - borderWidth.top/2); + mPathForSingleBorder.lineTo(left, bottom + borderWidth.bottom/2); + canvas.drawPath(mPathForSingleBorder, mPaint); } if (borderTop > 0) { - Path path = new Path(); + mPathForSingleBorder.reset(); int width = Math.round(borderWidth.top); updatePathEffect(width); mPaint.setStrokeWidth(width); - path.moveTo(left, top); - path.lineTo(right, top); - canvas.drawPath(path, mPaint); + mPathForSingleBorder.moveTo(left, top); + mPathForSingleBorder.lineTo(right, top); + canvas.drawPath(mPathForSingleBorder, mPaint); } if (borderRight > 0) { - Path path = new Path(); + mPathForSingleBorder.reset(); int width = Math.round(borderWidth.right); updatePathEffect(width); mPaint.setStrokeWidth(width); - path.moveTo(right, top - borderWidth.top/2); - path.lineTo(right, bottom + borderWidth.bottom/2); - canvas.drawPath(path, mPaint); + mPathForSingleBorder.moveTo(right, top - borderWidth.top/2); + mPathForSingleBorder.lineTo(right, bottom + borderWidth.bottom/2); + canvas.drawPath(mPathForSingleBorder, mPaint); } if (borderBottom > 0) { - Path path = new Path(); + mPathForSingleBorder.reset(); int width = Math.round(borderWidth.bottom); updatePathEffect(width); mPaint.setStrokeWidth(width); - path.moveTo(left, bottom); - path.lineTo(right, bottom); - canvas.drawPath(path, mPaint); + mPathForSingleBorder.moveTo(left, bottom); + mPathForSingleBorder.lineTo(right, bottom); + canvas.drawPath(mPathForSingleBorder, mPaint); } } } else {