diff --git a/Examples/UIExplorer/BorderExample.js b/Examples/UIExplorer/BorderExample.js
index 1c547ea6e..2dedfdd8e 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 742adbd84..fd8961cb8 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 @@ import com.facebook.csslayout.Spacing;
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 @@ import com.facebook.csslayout.Spacing;
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);
}
}