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

Correct draw path dimensions while doing even border 

Reviewed By: achen1

Differential Revision: D7678473

fbshipit-source-id: 8aa5eb29d22379eaabf9951a901e237fb7569632
This commit is contained in:
Himabindu Gadupudi 2018-04-19 11:06:28 -07:00 committed by Facebook Github Bot
parent 60b05133ba
commit c5ca26a0e5
1 changed files with 143 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,9 +90,11 @@ public class ReactViewBackgroundDrawable extends Drawable {
private @Nullable Path mOuterClipPathForBorderRadius; private @Nullable Path mOuterClipPathForBorderRadius;
private @Nullable Path mPathForBorderRadiusOutline; private @Nullable Path mPathForBorderRadiusOutline;
private @Nullable Path mPathForBorder; private @Nullable Path mPathForBorder;
private @Nullable Path mCenterDrawPath;
private @Nullable RectF mInnerClipTempRectForBorderRadius; private @Nullable RectF mInnerClipTempRectForBorderRadius;
private @Nullable RectF mOuterClipTempRectForBorderRadius; private @Nullable RectF mOuterClipTempRectForBorderRadius;
private @Nullable RectF mTempRectForBorderRadiusOutline; private @Nullable RectF mTempRectForBorderRadiusOutline;
private @Nullable RectF mTempRectForCenterDrawPath;
private @Nullable PointF mInnerTopLeftCorner; private @Nullable PointF mInnerTopLeftCorner;
private @Nullable PointF mInnerTopRightCorner; private @Nullable PointF mInnerTopRightCorner;
private @Nullable PointF mInnerBottomRightCorner; private @Nullable PointF mInnerBottomRightCorner;
@ -343,6 +345,23 @@ public class ReactViewBackgroundDrawable extends Drawable {
|| borderWidth.bottom > 0 || borderWidth.bottom > 0
|| borderWidth.left > 0 || borderWidth.left > 0
|| borderWidth.right > 0) { || borderWidth.right > 0) {
//If it's a full and even border draw inner rect path with stroke
final float fullBorderWidth = getFullBorderWidth();
if (borderWidth.top == fullBorderWidth &&
borderWidth.bottom == fullBorderWidth &&
borderWidth.left == fullBorderWidth &&
borderWidth.right == fullBorderWidth) {
if (fullBorderWidth > 0) {
int borderColor = getBorderColor(Spacing.ALL);
mPaint.setColor(ColorUtil.multiplyColorAlpha(borderColor, mAlpha));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(fullBorderWidth);
canvas.drawPath(mCenterDrawPath, mPaint);
}
}
//In the case of uneven border widths/colors draw quadrilateral in each direction
else {
mPaint.setStyle(Paint.Style.FILL); mPaint.setStyle(Paint.Style.FILL);
// Draw border // Draw border
@ -379,8 +398,10 @@ public class ReactViewBackgroundDrawable extends Drawable {
final boolean isColorStartDefined = isBorderColorDefined(Spacing.START); final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
final boolean isColorEndDefined = isBorderColorDefined(Spacing.END); final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
final boolean isDirectionAwareColorLeftDefined = isRTL ? isColorEndDefined : isColorStartDefined; final boolean isDirectionAwareColorLeftDefined =
final boolean isDirectionAwareColorRightDefined = isRTL ? isColorStartDefined : isColorEndDefined; isRTL ? isColorEndDefined : isColorStartDefined;
final boolean isDirectionAwareColorRightDefined =
isRTL ? isColorStartDefined : isColorEndDefined;
if (isDirectionAwareColorLeftDefined) { if (isDirectionAwareColorLeftDefined) {
colorLeft = directionAwareColorLeft; colorLeft = directionAwareColorLeft;
@ -449,6 +470,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
drawQuadrilateral(canvas, colorBottom, x1, y1, x2, y2, x3, y3, x4, y4); drawQuadrilateral(canvas, colorBottom, x1, y1, x2, y2, x3, y3, x4, y4);
} }
} }
}
canvas.restore(); canvas.restore();
} }
@ -472,6 +494,10 @@ public class ReactViewBackgroundDrawable extends Drawable {
mPathForBorderRadiusOutline = new Path(); mPathForBorderRadiusOutline = new Path();
} }
if (mCenterDrawPath == null) {
mCenterDrawPath = new Path();
}
if (mInnerClipTempRectForBorderRadius == null) { if (mInnerClipTempRectForBorderRadius == null) {
mInnerClipTempRectForBorderRadius = new RectF(); mInnerClipTempRectForBorderRadius = new RectF();
} }
@ -484,13 +510,24 @@ public class ReactViewBackgroundDrawable extends Drawable {
mTempRectForBorderRadiusOutline = new RectF(); mTempRectForBorderRadiusOutline = new RectF();
} }
if (mTempRectForCenterDrawPath == null) {
mTempRectForCenterDrawPath = new RectF();
}
mInnerClipPathForBorderRadius.reset(); mInnerClipPathForBorderRadius.reset();
mOuterClipPathForBorderRadius.reset(); mOuterClipPathForBorderRadius.reset();
mPathForBorderRadiusOutline.reset(); mPathForBorderRadiusOutline.reset();
mCenterDrawPath.reset();
mInnerClipTempRectForBorderRadius.set(getBounds()); mInnerClipTempRectForBorderRadius.set(getBounds());
mOuterClipTempRectForBorderRadius.set(getBounds()); mOuterClipTempRectForBorderRadius.set(getBounds());
mTempRectForBorderRadiusOutline.set(getBounds()); mTempRectForBorderRadiusOutline.set(getBounds());
mTempRectForCenterDrawPath.set(getBounds());
float fullBorderWidth = getFullBorderWidth();
if (fullBorderWidth > 0) {
mTempRectForCenterDrawPath.inset(fullBorderWidth * 0.5f, fullBorderWidth * 0.5f);
}
final RectF borderWidth = getDirectionAwareBorderInsets(); final RectF borderWidth = getDirectionAwareBorderInsets();
@ -623,6 +660,20 @@ public class ReactViewBackgroundDrawable extends Drawable {
}, },
Path.Direction.CW); Path.Direction.CW);
mCenterDrawPath.addRoundRect(
mTempRectForCenterDrawPath,
new float[] {
innerTopLeftRadiusX + extraRadiusForOutline,
innerTopLeftRadiusY + extraRadiusForOutline,
innerTopRightRadiusX + extraRadiusForOutline,
innerTopRightRadiusY + extraRadiusForOutline,
innerBottomRightRadiusX + extraRadiusForOutline,
innerBottomRightRadiusY + extraRadiusForOutline,
innerBottomLeftRadiusX + extraRadiusForOutline,
innerBottomLeftRadiusY + extraRadiusForOutline
},
Path.Direction.CW);
/** /**
* Rounded Multi-Colored Border Algorithm: * Rounded Multi-Colored Border Algorithm:
* *