diff --git a/Examples/UIExplorer/BorderExample.js b/Examples/UIExplorer/BorderExample.js index 1c547ea6ea21c9..2dedfdd8e6ae1d 100644 --- a/Examples/UIExplorer/BorderExample.js +++ b/Examples/UIExplorer/BorderExample.js @@ -110,8 +110,22 @@ var styles = StyleSheet.create({ borderTopLeftRadius: 10, borderBottomRightRadius: 20, borderColor: 'black', - elevation: 10 - } + elevation: 10, + }, + border11: { + width: 0, + height: 0, + borderStyle: 'solid', + overflow: 'hidden', + borderTopWidth: 50, + borderRightWidth: 0, + borderBottomWidth: 50, + borderLeftWidth: 100, + borderTopColor: 'transparent', + borderRightColor: 'transparent', + borderBottomColor: 'transparent', + borderLeftColor: 'red', + }, }); exports.title = 'Border'; @@ -209,4 +223,11 @@ exports.examples = [ return ; } }, + { + title: 'CSS Trick - Triangle', + description: 'create a triangle by manipulating border colors and widths', + render() { + return ; + } + }, ]; 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 742adbd84b1ba9..fd8961cb8628b6 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 @@ -80,6 +80,7 @@ private static enum BorderStyle { private @Nullable PathEffect mPathEffectForBorderStyle; private @Nullable Path mPathForBorderRadius; private @Nullable Path mPathForBorderRadiusOutline; + private @Nullable Path mPathForBorder; private @Nullable RectF mTempRectForBorderRadius; private @Nullable RectF mTempRectForBorderRadiusOutline; private boolean mNeedUpdatePathForBorderRadius = false; @@ -343,30 +344,64 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { int width = getBounds().width(); int height = getBounds().height(); + // If the path drawn previously is of the same color, + // there would be a slight white space between borders + // with anti-alias set to true. + // Therefore we need to disable anti-alias, and + // after drawing is done, we will re-enable it. + + mPaint.setAntiAlias(false); + + if (mPathForBorder == null) { + mPathForBorder = new Path(); + } + if (borderLeft > 0 && colorLeft != Color.TRANSPARENT) { mPaint.setColor(colorLeft); - canvas.drawRect(0, borderTop, borderLeft, height - borderBottom, mPaint); + mPathForBorder.reset(); + mPathForBorder.moveTo(0, 0); + mPathForBorder.lineTo(borderLeft, borderTop); + mPathForBorder.lineTo(borderLeft, height - borderBottom); + mPathForBorder.lineTo(0, height); + mPathForBorder.lineTo(0, 0); + canvas.drawPath(mPathForBorder, mPaint); } if (borderTop > 0 && colorTop != Color.TRANSPARENT) { mPaint.setColor(colorTop); - canvas.drawRect(0, 0, width, borderTop, mPaint); + mPathForBorder.reset(); + mPathForBorder.moveTo(0, 0); + mPathForBorder.lineTo(borderLeft, borderTop); + mPathForBorder.lineTo(width - borderRight, borderTop); + mPathForBorder.lineTo(width, 0); + mPathForBorder.lineTo(0, 0); + canvas.drawPath(mPathForBorder, mPaint); } if (borderRight > 0 && colorRight != Color.TRANSPARENT) { mPaint.setColor(colorRight); - canvas.drawRect( - width - borderRight, - borderTop, - width, - height - borderBottom, - mPaint); + mPathForBorder.reset(); + mPathForBorder.moveTo(width, 0); + mPathForBorder.lineTo(width, height); + mPathForBorder.lineTo(width - borderRight, height - borderBottom); + mPathForBorder.lineTo(width - borderRight, borderTop); + mPathForBorder.lineTo(width, 0); + canvas.drawPath(mPathForBorder, mPaint); } if (borderBottom > 0 && colorBottom != Color.TRANSPARENT) { mPaint.setColor(colorBottom); - canvas.drawRect(0, height - borderBottom, width, height, mPaint); + mPathForBorder.reset(); + mPathForBorder.moveTo(0, height); + mPathForBorder.lineTo(width, height); + mPathForBorder.lineTo(width - borderRight, height - borderBottom); + mPathForBorder.lineTo(borderLeft, height - borderBottom); + mPathForBorder.lineTo(0, height); + canvas.drawPath(mPathForBorder, mPaint); } + + // re-enable anti alias + mPaint.setAntiAlias(true); } }