status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add the ability to create triangles using css tricks 

Summary:- modify ReactViewBackgroundDrawable.java to make each border a trapezoid
 - disable anti-alias to eliminate white spaces between borders
 - add examples to BorderExample.js (see last one)
Closes https://github.com/facebook/react-native/pull/5911

Differential Revision: D2953734

Pulled By: dmmiller

fb-gh-sync-id: dd103d80dec53ad35c9539ab1ceb93ef857feeb9
shipit-source-id: dd103d80dec53ad35c9539ab1ceb93ef857feeb9
This commit is contained in:
Huang Yu 2016-02-19 02:58:27 -08:00 committed by facebook-github-bot-3
parent a91466f84a
commit a6a4389bf4
2 changed files with 67 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Examples/UIExplorer/BorderExample.js
View File

@ -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 <View style={[styles.box, styles.border10]} />;
}
},
{
title: 'CSS Trick - Triangle',
description: 'create a triangle by manipulating border colors and widths',
render() {
return <View style={[styles.border11]} />;
}
},
];

53
ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
View File

@ -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);
}
}