WPF之小米Logo超圓角的實現

某些新聞：小米logo換新，程式設計師一行程式碼（border-radius:19px）實現，目前此行程式碼價值200萬

某程式設計師內心：所以還是因為我程式碼寫太少了，所以這200萬才沒有我的份嗎？

這事兒也成功的引起了本羊的注意，花點時間，我們也用WPF來實現一下，到底這超圓角有多好看？

先上效果圖：

 

經過一番瞭解，其實本質也就一條數學函式：|x|^n+|y|^n=1，上程式碼：

 public class UIElementHelper
    {
        public static double GetSuperCornerRadius(FrameworkElement obj)
        {
            return (double)obj.GetValue(SuperCornerRadiusProperty);
        }

        public static void SetSuperCornerRadius(FrameworkElement obj, double value)
        {
            obj.SetValue(SuperCornerRadiusProperty, value);
        }

        public static readonly DependencyProperty SuperCornerRadiusProperty =
            DependencyProperty.RegisterAttached("SuperCornerRadius", typeof(double), typeof(UIElementHelper), new PropertyMetadata(0.0, new PropertyChangedCallback((s, e) =>
            {
                var n = (double)e.NewValue;
                var el = s as FrameworkElement;
                if (n == 0)
                {
                    el.Clip = null;
                }
                else
                {
                    UpdateClip(el);
                    if (!el.IsLoaded)
                    {
                        el.SizeChanged += OnSizeChanged;
                    }
                }
            })));

        private static void OnSizeChanged(object sender, SizeChangedEventArgs e)
        {
            UpdateClip(sender as FrameworkElement, false);
        }

        private static void UpdateClip(FrameworkElement el, bool updatePoints = true)
        {
            if (!updatePoints && el.Clip is StreamGeometry clip && !clip.IsFrozen)
            {
                //
            }
            else
            {
                clip = new StreamGeometry();
                var points = GetSuperCornerRadiusPoints(GetSuperCornerRadius(el));
                using(var context = clip.Open())
                {
                    context.BeginFigure(points[0], true, true);
                    context.PolyBezierTo(points, true, true);//根據座標點畫貝塞爾曲線
                }
                points.Clear();
                el.Clip = clip;//元素的剪下路徑
            }
            var group = new TransformGroup();
            group.Children.Add(new TranslateTransform(1, 1));//WPF以左上角為座標原點，所以這裡進行位移
            var w = el.RenderSize.Width / 2;
            group.Children.Add(new ScaleTransform(w, w));//放大
            clip.Transform = group;
        }

        /// <summary>
        /// 計算超圓角路徑的座標點
        /// </summary>
        /// <param name="n"></param>
        /// <returns></returns>
        public static List<Point> GetSuperCornerRadiusPoints(double n = 3)
        {
            var points = new List<Point>();
            //求出Y>0時座標
            for (double x = -1; x <= 1; x += 0.001)
            {
                var y = Math.Pow(1 - Math.Pow(Math.Abs(x), n), 1 / n);//公式：|x|^n+|y|^n=1
                points.Add(new Point(x, Math.Round(y, 3)));//3位小數，精度應該足夠了
            }
            //Y<0的座標
            var count = points.Count;
            for (int i = 1; i < count + 1; i++)
            {
                var p = points[count - i];
                points.Add(new Point(p.X, p.Y * -1));
            }
            return points;
        }


    }

 

工程檔案，感興趣的下載玩玩。