kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-13 22:29:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

add the ability to create triangles using css tricks

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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