Skip to content

Commit

Permalink
Fix anti aliasing rounded background
Browse files Browse the repository at this point in the history 
Reviewed By: shergin, achen1

Differential Revision: D7569885

fbshipit-source-id: 4bfb00485211417b475f14a92fd7b2e52a4b2ff6
  • Loading branch information
@himabindugadupudi @facebook-github-bot
himabindugadupudi authored and facebook-github-bot committed Apr 13, 2018
1 parent e636eb6 commit 7500b3e
Showing 1 changed file with 108 additions and 89 deletions.
197 changes: 108 additions & 89 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,113 +343,132 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
|| borderWidth.bottom > 0
|| borderWidth.left > 0
|| borderWidth.right > 0) {
mPaint.setStyle(Paint.Style.FILL);

// Draw border
canvas.clipPath(mOuterClipPathForBorderRadius, Region.Op.INTERSECT);
canvas.clipPath(mInnerClipPathForBorderRadius, Region.Op.DIFFERENCE);
//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(mInnerClipPathForBorderRadius, mPaint);
}
}
//In the case of uneven border widths/colors draw quadrilateral in each direction
else {
mPaint.setStyle(Paint.Style.FILL);

int colorLeft = getBorderColor(Spacing.LEFT);
int colorTop = getBorderColor(Spacing.TOP);
int colorRight = getBorderColor(Spacing.RIGHT);
int colorBottom = getBorderColor(Spacing.BOTTOM);
// Draw border
canvas.clipPath(mOuterClipPathForBorderRadius, Region.Op.INTERSECT);
canvas.clipPath(mInnerClipPathForBorderRadius, Region.Op.DIFFERENCE);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
int colorStart = getBorderColor(Spacing.START);
int colorEnd = getBorderColor(Spacing.END);

if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) {
if (!isBorderColorDefined(Spacing.START)) {
colorStart = colorLeft;
}
int colorLeft = getBorderColor(Spacing.LEFT);
int colorTop = getBorderColor(Spacing.TOP);
int colorRight = getBorderColor(Spacing.RIGHT);
int colorBottom = getBorderColor(Spacing.BOTTOM);

if (!isBorderColorDefined(Spacing.END)) {
colorEnd = colorRight;
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
int colorStart = getBorderColor(Spacing.START);
int colorEnd = getBorderColor(Spacing.END);

final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
final int directionAwareColorRight = isRTL ? colorStart : colorEnd;
if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) {
if (!isBorderColorDefined(Spacing.START)) {
colorStart = colorLeft;
}

colorLeft = directionAwareColorLeft;
colorRight = directionAwareColorRight;
} else {
final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
final int directionAwareColorRight = isRTL ? colorStart : colorEnd;
if (!isBorderColorDefined(Spacing.END)) {
colorEnd = colorRight;
}

final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
final boolean isDirectionAwareColorLeftDefined = isRTL ? isColorEndDefined : isColorStartDefined;
final boolean isDirectionAwareColorRightDefined = isRTL ? isColorStartDefined : isColorEndDefined;
final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
final int directionAwareColorRight = isRTL ? colorStart : colorEnd;

if (isDirectionAwareColorLeftDefined) {
colorLeft = directionAwareColorLeft;
}

if (isDirectionAwareColorRightDefined) {
colorRight = directionAwareColorRight;
} else {
final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
final int directionAwareColorRight = isRTL ? colorStart : colorEnd;

final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
final boolean isDirectionAwareColorLeftDefined =
isRTL ? isColorEndDefined : isColorStartDefined;
final boolean isDirectionAwareColorRightDefined =
isRTL ? isColorStartDefined : isColorEndDefined;

if (isDirectionAwareColorLeftDefined) {
colorLeft = directionAwareColorLeft;
}

if (isDirectionAwareColorRightDefined) {
colorRight = directionAwareColorRight;
}
}
}
}

final float left = mOuterClipTempRectForBorderRadius.left;
final float right = mOuterClipTempRectForBorderRadius.right;
final float top = mOuterClipTempRectForBorderRadius.top;
final float bottom = mOuterClipTempRectForBorderRadius.bottom;

if (borderWidth.left > 0) {
final float x1 = left;
final float y1 = top;
final float x2 = mInnerTopLeftCorner.x;
final float y2 = mInnerTopLeftCorner.y;
final float x3 = mInnerBottomLeftCorner.x;
final float y3 = mInnerBottomLeftCorner.y;
final float x4 = left;
final float y4 = bottom;

drawQuadrilateral(canvas, colorLeft, x1, y1, x2, y2, x3, y3, x4, y4);
}
final float left = mOuterClipTempRectForBorderRadius.left;
final float right = mOuterClipTempRectForBorderRadius.right;
final float top = mOuterClipTempRectForBorderRadius.top;
final float bottom = mOuterClipTempRectForBorderRadius.bottom;

if (borderWidth.top > 0) {
final float x1 = left;
final float y1 = top;
final float x2 = mInnerTopLeftCorner.x;
final float y2 = mInnerTopLeftCorner.y;
final float x3 = mInnerTopRightCorner.x;
final float y3 = mInnerTopRightCorner.y;
final float x4 = right;
final float y4 = top;

drawQuadrilateral(canvas, colorTop, x1, y1, x2, y2, x3, y3, x4, y4);
}
if (borderWidth.left > 0) {
final float x1 = left;
final float y1 = top;
final float x2 = mInnerTopLeftCorner.x;
final float y2 = mInnerTopLeftCorner.y;
final float x3 = mInnerBottomLeftCorner.x;
final float y3 = mInnerBottomLeftCorner.y;
final float x4 = left;
final float y4 = bottom;

if (borderWidth.right > 0) {
final float x1 = right;
final float y1 = top;
final float x2 = mInnerTopRightCorner.x;
final float y2 = mInnerTopRightCorner.y;
final float x3 = mInnerBottomRightCorner.x;
final float y3 = mInnerBottomRightCorner.y;
final float x4 = right;
final float y4 = bottom;

drawQuadrilateral(canvas, colorRight, x1, y1, x2, y2, x3, y3, x4, y4);
}
drawQuadrilateral(canvas, colorLeft, x1, y1, x2, y2, x3, y3, x4, y4);
}

if (borderWidth.top > 0) {
final float x1 = left;
final float y1 = top;
final float x2 = mInnerTopLeftCorner.x;
final float y2 = mInnerTopLeftCorner.y;
final float x3 = mInnerTopRightCorner.x;
final float y3 = mInnerTopRightCorner.y;
final float x4 = right;
final float y4 = top;

drawQuadrilateral(canvas, colorTop, x1, y1, x2, y2, x3, y3, x4, y4);
}

if (borderWidth.right > 0) {
final float x1 = right;
final float y1 = top;
final float x2 = mInnerTopRightCorner.x;
final float y2 = mInnerTopRightCorner.y;
final float x3 = mInnerBottomRightCorner.x;
final float y3 = mInnerBottomRightCorner.y;
final float x4 = right;
final float y4 = bottom;

if (borderWidth.bottom > 0) {
final float x1 = left;
final float y1 = bottom;
final float x2 = mInnerBottomLeftCorner.x;
final float y2 = mInnerBottomLeftCorner.y;
final float x3 = mInnerBottomRightCorner.x;
final float y3 = mInnerBottomRightCorner.y;
final float x4 = right;
final float y4 = bottom;

drawQuadrilateral(canvas, colorBottom, x1, y1, x2, y2, x3, y3, x4, y4);
drawQuadrilateral(canvas, colorRight, x1, y1, x2, y2, x3, y3, x4, y4);
}

if (borderWidth.bottom > 0) {
final float x1 = left;
final float y1 = bottom;
final float x2 = mInnerBottomLeftCorner.x;
final float y2 = mInnerBottomLeftCorner.y;
final float x3 = mInnerBottomRightCorner.x;
final float y3 = mInnerBottomRightCorner.y;
final float x4 = right;
final float y4 = bottom;

drawQuadrilateral(canvas, colorBottom, x1, y1, x2, y2, x3, y3, x4, y4);
}
}
}

canvas.restore();
}

Expand Down

0 comments on commit 7500b3e

Please sign in to comment.