3 ms·

Same thing with the rounded corner of the iPhone X series. One time I was trying to make one of he UIView match the corner radius of the screen and it wasn’t ma

Same thing with the rounded corner of the iPhone X series. One time I was trying to make one of he UIView match the corner radius of the screen and it wasn’t matching until I learnt that the rounded corners of the screen/device is a 38.5 squircle (not sure if that’s the real term). Basically instead of having a sharp curve, it starts much earlier.

foxes 7y ago
If you compute the curvature it starts flat, does a few bump and then flattens again (this curvature is not a very smooth function however). An n-ellipse is not quite the right curve. Apple used a bunch of Bezier curves. I think their design could be made a little more aesthetic if you used some smoothed piecewise bump (like a Gaussian nearly). You can numerically solve for the curve given the curvature and then approximate it.
saagarjha 7y ago
That’s a slightly different curve, and I believe the corner radius for that is defined to be 39.
- busymom0 7y ago
  This is where I originally learnt about it. Seems like it's called a continuous corner, or “squircle”: https://kylebashour.com/posts/finding-the-real-iphone-x-corner-radius https://kylebashour.com/posts/finding-the-real-iphone-x-corn...
  - saagarjha 7y ago
    The corner radius is 39; you can find it by peeking inside iOS. CALayer has "continuous corners", which are very similar to but just slightly different than the app icon shape, which is a 16-part Bézier curve generated inside of the MobileIcons framework. This curve is as far as I can tell identical to the one that UIBezierPath.init(roundedRect:cornerRadius:) will give you when the corner radius is 22.5% of the side length. (Note that the app icon on the home screen, being of a constant size, is actually generated via an image mask rather than dynamic clipping.)