[BottomAppBar] Correct cut-out arc angle. (#4997)

The cut-out for the FAB was using incorrect angles resulting in
sub-pixel alignment of the Paths. This could be contributing to our
flaky screenshot tests which are off by a single digit (in the RGB
codes) and a few pixels. Even better, the bottom app bar is now level
across its entire width rather than dipping slightly toward the FAB.

|Alignment|Before|After|
|--|--|--|
|Leading|![bab-lead-before](https://user-images.githubusercontent.com/1753199/45070416-29a88a00-b09f-11e8-9cb5-822dff02cf8b.png)|![bab-lead-after](https://user-images.githubusercontent.com/1753199/45070420-2f05d480-b09f-11e8-8d1e-c1c712936ba3.png)|
|Center|![bab-center-before](https://user-images.githubusercontent.com/1753199/45070424-34631f00-b09f-11e8-960d-d6fa0738e34e.png)|![bab-center-after](https://user-images.githubusercontent.com/1753199/45070427-3a590000-b09f-11e8-94b5-1740fd38c1d7.png)|
|Trailing|![bab-trail-before](https://user-images.githubusercontent.com/1753199/45070434-45139500-b09f-11e8-97f1-e5e6122be18f.png)|![bab-trail-after](https://user-images.githubusercontent.com/1753199/45070436-480e8580-b09f-11e8-8f92-a9abafa90c5a.png)|

Part of #4929

components/BottomAppBar/src/private/MDCBottomAppBarAttributes.h

@@ -27,12 +27,6 @@ static const CGFloat kMDCBottomAppBarFloatingButtonPositionX = 64.f;
 // The vertical position of the center of the floating button.
 static const CGFloat kMDCBottomAppBarFloatingButtonPositionY = 10.f;
 
-// The starting angle of the path cut for the floating button.
-static const CGFloat kMDCBottomAppBarFloatingButtonStartAngle = 161.f;
-
-// Then ending angle of the path cut for the floating button.
-static const CGFloat kMDCBottomAppBarFloatingButtonEndAngle = 19.f;
-
 // The radius of the path cut for the floating button.
 static const CGFloat kMDCBottomAppBarFloatingButtonRadius = 32.f;
 

components/BottomAppBar/src/private/MDCBottomAppBarLayer.m

@@ -41,28 +41,39 @@ - (CGPathRef)pathWithCutFromRect:(CGRect)rect
                  layoutDirection:(UIUserInterfaceLayoutDirection)layoutDirection {
   UIBezierPath *bottomBarPath = [UIBezierPath bezierPath];
 
+  static CGFloat kStartAngle;
+  static CGFloat kEndAngle;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    // Since we know the hypotenuse (radius) and opposite side (height above the line) we can
+    // compute the angle.
+    // sin( θ ) = opposite / hypotenuse
+    // θ = arcsin( opposite / hypotenuse )
+    // More reading: https://www.mathsisfun.com/algebra/trig-finding-angle-right-triangle.html
+    kEndAngle = (CGFloat)asin(kMDCBottomAppBarFloatingButtonPositionY /
+                              kMDCBottomAppBarFloatingButtonRadius);
+    kStartAngle = (CGFloat)(M_PI - kEndAngle);
+  });
+
   CGFloat width = CGRectGetWidth(rect);
   CGFloat height = CGRectGetHeight(rect);
   CGFloat midX = CGRectGetMidX(rect);
 
-  CGFloat startAngle = MDCDegreesToRadians(kMDCBottomAppBarFloatingButtonStartAngle);
-  CGFloat endAngle = MDCDegreesToRadians(kMDCBottomAppBarFloatingButtonEndAngle);
-
   // Paths generated below differ based on the placement of the floating button.
   switch (floatingButtonPosition) {
     case MDCBottomAppBarFloatingButtonPositionLeading: {
       if (layoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
         [self pathWithCutRight:bottomBarPath
                          width:width
                         height:height
-                    startAngle:startAngle
-                      endAngle:endAngle];
+                    startAngle:kStartAngle
+                      endAngle:kEndAngle];
       } else {
         [self pathWithCutLeft:bottomBarPath
                         width:width
                        height:height
-                   startAngle:startAngle
-                     endAngle:endAngle];
+                   startAngle:kStartAngle
+                     endAngle:kEndAngle];
       }
       break;
     }
@@ -73,8 +84,8 @@ - (CGPathRef)pathWithCutFromRect:(CGRect)rect
                                        kMDCBottomAppBarFloatingButtonPositionY);
       [bottomBarPath addArcWithCenter:centerPath
                                radius:kMDCBottomAppBarFloatingButtonRadius
-                           startAngle:startAngle
-                             endAngle:endAngle
+                           startAngle:kStartAngle
+                             endAngle:kEndAngle
                             clockwise:NO];
       [bottomBarPath addLineToPoint:CGPointMake(width, kMDCBottomAppBarYOffset)];
       [bottomBarPath addLineToPoint:CGPointMake(width, height * 2)];
@@ -85,16 +96,16 @@ - (CGPathRef)pathWithCutFromRect:(CGRect)rect
     case MDCBottomAppBarFloatingButtonPositionTrailing: {
       if (layoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
         [self pathWithCutLeft:bottomBarPath
-                         width:width
-                        height:height
-                    startAngle:startAngle
-                      endAngle:endAngle];
+                        width:width
+                       height:height
+                   startAngle:kStartAngle
+                     endAngle:kEndAngle];
       } else {
         [self pathWithCutRight:bottomBarPath
                          width:width
                         height:height
-                    startAngle:startAngle
-                      endAngle:endAngle];
+                    startAngle:kStartAngle
+                      endAngle:kEndAngle];
       }
       break;
     }