WPF之小米Logo超圆角的实现
某些新闻:小米logo换新,程序员一行代码(border-radius:19px)实现,目前此行代码价值200万
某程序员内心:所以还是因为我代码写太少了,所以这200万才没有我的份吗?
这事儿也成功的引起了本羊的注意,花点时间,咱也用WPF来实现一下,到底这超圆角有多好看?
先上效果图:
经过一番了解,其实本质也就一条数学函数:|x|^n+|y|^n=1,上代码:
1 public class UIElementHelper 2 { 3 public static double GetSuperCornerRadius(FrameworkElement obj) 4 { 5 return (double)obj.GetValue(SuperCornerRadiusProperty); 6 } 7 8 public static void SetSuperCornerRadius(FrameworkElement obj, double value) 9 { 10 obj.SetValue(SuperCornerRadiusProperty, value); 11 } 12 13 public static readonly DependencyProperty SuperCornerRadiusProperty = 14 DependencyProperty.RegisterAttached("SuperCornerRadius", typeof(double), typeof(UIElementHelper), new PropertyMetadata(0.0, new PropertyChangedCallback((s, e) => 15 { 16 var n = (double)e.NewValue; 17 var el = s as FrameworkElement; 18 if (n == 0) 19 { 20 el.Clip = null; 21 } 22 else 23 { 24 UpdateClip(el); 25 if (!el.IsLoaded) 26 { 27 el.SizeChanged += OnSizeChanged; 28 } 29 } 30 }))); 31 32 private static void OnSizeChanged(object sender, SizeChangedEventArgs e) 33 { 34 UpdateClip(sender as FrameworkElement, false); 35 } 36 37 private static void UpdateClip(FrameworkElement el, bool updatePoints = true) 38 { 39 if (!updatePoints && el.Clip is StreamGeometry clip && !clip.IsFrozen) 40 { 41 // 42 } 43 else 44 { 45 clip = new StreamGeometry(); 46 var points = GetSuperCornerRadiusPoints(GetSuperCornerRadius(el)); 47 using(var context = clip.Open()) 48 { 49 context.BeginFigure(points[0], true, true); 50 context.PolyLineTo(points, false, false);//根据坐标点画线 51 } 52 points.Clear(); 53 el.Clip = clip;//元素的剪切路径 54 } 55 var group = new TransformGroup(); 56 group.Children.Add(new TranslateTransform(1, 1));//WPF以左上角为坐标原点,所以这里进行位移 57 var w = el.RenderSize.Width / 2; 58 group.Children.Add(new ScaleTransform(w, w));//放大 59 clip.Transform = group; 60 } 61 62 /// <summary> 63 /// 计算超圆角路径的坐标点 64 /// </summary> 65 /// <param name="n"></param> 66 /// <returns></returns> 67 public static List<Point> GetSuperCornerRadiusPoints(double n = 3) 68 { 69 var points = new List<Point>(); 70 //求出Y>0时坐标 71 for (double x = -1; x <= 1; x += 0.001) 72 { 73 var y = Math.Pow(1 - Math.Pow(Math.Abs(x), n), 1 / n);//公式:|x|^n+|y|^n=1 74 points.Add(new Point(x, Math.Round(y, 3)));//3位小数,精度应该足够了 75 } 76 //Y<0的坐标 77 var count = points.Count; 78 for (int i = 1; i < count + 1; i++) 79 { 80 var p = points[count - i]; 81 points.Add(new Point(p.X, p.Y * -1)); 82 } 83 return points; 84 } 85 86 87 }
工程文件,感兴趣的下载玩玩。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
2013-04-26 关于VS中的一些中文翻译