Avalonia 图形绘制实战用 4 个形状控件搭出温度仪表【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/AvaloniaAvalonia 是一个用 C# 和 XAML 构建桌面、移动与 WebAssembly 应用的 .NET 界面框架。本文只用它的图形绘制能力做一个温度仪表一块画板加四个基础形状控件整个过程不需要写一行 C#。理解 Canvas 的坐标定位规则Canvas是 Avalonia 里承担画板职责的容器它不给子元素做自动排布而是把每个元素钉死在指定坐标上。实现见 src/Avalonia.Controls/Canvas.cs。坐标系沿用屏幕习惯原点在左上角x 向右增长y 向下增长和数学里 y 向上的习惯相反单位是 DIP设备无关像素可以直接写小数。Canvas.Left150的意思就是元素左边缘离画板左边缘 150 个 DIP。子元素通过四个附加属性定位Canvas.Left/Canvas.Top分别指定左边缘、上边缘到画板左上角的距离Canvas.Right/Canvas.Bottom指定右边缘、下边缘到画板右下角方向边界的距离元素贴着那条边画板尺寸变化时位置会跟着滑左右或上下同时设置时LeftTop优先四个都不设元素就落在(0,0)它自身测量结果是 0×0不会挤占父容器的布局空间可以叠在任何面板上当纯绘图层。为不同图形选择 Line 到 Path几何形状控件集中在 src/Avalonia.Controls/Shapes/ 目录最常用的四个各有所长Line一条线段StartPoint和EndPoint各给一对坐标适合刻度、分隔线、指针Rectangle矩形RadiusX/RadiusY一设就变圆角Ellipse椭圆Width等于Height时是正圆Path任意自定义轮廓靠Data属性里的一串路径命令描述上面三个画不出的形状都归它。Data的命令逐条看M移动画笔不画线L向目标点画直线C画一段三次贝塞尔曲线需要跟两组控制点Z闭合并影响Fill的填充区域。下面这个例子用三条命令画出一个直角三角形Path Fill#4EC9B0 DataM 40,120 L 120,120 L 120,40 Z/曲线命令渲染出来的平滑弧面效果可以参考仓库里几何渲染测试的基线截图动手实现一个温度仪表画板取 320×320仪表中心就是(160,160)后面所有坐标都围绕它推导。铺底盘和刻度两个同心Ellipse叠出环形边框外层灰底 288×288 从(16,16)起画内层白色 264×264 从(28,28)起画两圈间距自然成为边框。刻度取 8 条 16 像素长的Line45° 方向上的坐标用160 ± 93估算半径约 132 乘以 0.707。Canvas Width320 Height320 Ellipse Canvas.Left16 Canvas.Top16 Width288 Height288 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width264 Height264 FillWhite/ Line StartPoint160,28 EndPoint160,44 StrokeBlack StrokeThickness2/ Line StartPoint253,67 EndPoint242,78 StrokeBlack StrokeThickness2/ Line StartPoint292,160 EndPoint276,160 StrokeBlack StrokeThickness2/ Line StartPoint253,253 EndPoint242,242 StrokeBlack StrokeThickness2/ Line StartPoint160,292 EndPoint160,276 StrokeBlack StrokeThickness2/ Line StartPoint67,253 EndPoint78,242 StrokeBlack StrokeThickness2/ Line StartPoint28,160 EndPoint44,160 StrokeBlack StrokeThickness2/ Line StartPoint67,67 EndPoint78,78 StrokeBlack StrokeThickness2/ /Canvas加指针和轴心红色Line从中心指向表盘上方边缘表示当前读数轴心处再压一个 20×20 的深灰圆点遮住线条交汇避免视觉上的毛刺感。Line StartPoint160,160 EndPoint160,60 StrokeRed StrokeThickness5 Canvas.ZIndex1/ Ellipse Canvas.Left150 Canvas.Top150 Width20 Height20 Fill#333333 Canvas.ZIndex2/摆出读数TextBlock放在表盘下缘和图形互不干扰各占各的坐标。TextBlock Canvas.Left120 Canvas.Top300 Text26 °C FontSize16/三段合起来就是一个可粘进任意 Avalonia 窗口运行的完整仪表。排查 ZIndex 与旋转动画的常见坑叠放顺序不对ZIndex定义在Visualsrc/Avalonia.Base/Visual.cs上所有视觉元素通用数值大的渲染在上层。指针盖住刻度、轴心盖住指针就是靠ZIndex1和ZIndex2实现的忘设时同层元素按书写顺序叠放。指针转起来飞掉想让指针摆动给它挂RotateTransformsrc/Avalonia.Base/Media/RotateTransform.cs关键是把CenterX/CenterY指到轴心(160,160)而不是元素左上角否则绕错支点旋转指针会画出一个大弧Line StartPoint160,160 EndPoint160,60 StrokeRed StrokeThickness5 Line.RenderTransform RotateTransform Angle45 CenterX160 CenterY160/ /Line.RenderTransform /Line读数想跟着控件动把Text换成绑定即可例如{Binding ElementNametempSlider, PathValue, StringFormat{}{0:0} °C}拖动Slider时文字实时刷新。元素太多渲染吃力大量重复的小刻度合并进一条Path的Data多个子路径用M分开写减少绘制对象复杂轮廓用StreamGeometry构建模糊、透明度这类特效按需用不要全局开。回顾要点与下一步方向坐标系原点在左上角x 向右、y 向下单位 DIP 且支持小数。四个附加属性中 Left/Top 与 Right/Bottom 冲突时前者胜出全不写则落在(0,0)。直线用Line成面用Rectangle/Ellipse其余轮廓交给Path的Data命令。旋转必须显式指定支点RotateTransform的CenterX/CenterY不填就会绕元素左上角转。接下来可以把Angle接上数值源对AngleProperty挂一个DoubleAnimation指针就会随温度真实摆动再给刻度环换一条Arc或Path弧线仪表的进度条效果也就齐了。同一套 XAML 在 Windows、macOS、Linux 上的行为完全一致。【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
