Avalonia 图形绘制完整指南:不写 C# 画出一台雷达扫描面板【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/AvaloniaAvalonia 图形绘制最常在两处翻车:描边的圆环一填色就变成实心盘,弧线画到一半鼓包方向反了。这篇指南只讲一件事:用Canvas和 4 个基础图形,纯 XAML 搭出一台 220 像素的雷达扫描面板。你不用写一行 C#,只要会读坐标。动笔前先懂两件事:坐标系与贴边定位原点在哪儿。Canvas(一块不做自动排列的绘图面板)的左上角是原点(0,0),x 向右增长,y 向下增长。就像给白板上的便利贴编号:先从左边缘数第几列,再从上边缘数第几行,位置就唯一了。单位是DIP(设备无关像素,同一份 XAML 在不同机器上渲染尺寸一致),50.5这样的小数同样合法。原点在左上角,x 向右 y 向下,数值支持小数。怎么钉住元素。Canvas完全不管子元素排布,只用Canvas.Left、Canvas.Top、Canvas.Right、Canvas.Bottom四个附加属性把每个子元素钉在指定坐标上。看 src/Avalonia.Controls/Canvas.cs 的布局代码:先取 Left,取不到才按 Right 反推;Top 和 Bottom 同理;都不写,子元素落在(0,0)。另有个细节:Canvas 测量时返回0,0,不占父容器空间,可以叠在任何面板上当纯绘图层。所有图形(Line、Ellipse、Path等)集中在 src/Avalonia.Controls/Shapes/ 目录,XAML 默认 xmlns 已包含该命名空间,无需额外声明。Canvas 只做钉坐标,Left 与 Right 冲突时 Left 生效,Top 与 Bottom 冲突时 Top 生效。高频属性速查表:作用与新手易踩的坑只列本文会用到的高频项:名称作用新手易踩的坑Canvas.Left/Canvas.Top把元素左上角钉在指定坐标同写 Left 和 Right 时只有 Left 生效Ellipse配Width/Height画环或圆盘,两者相等即正圆只写Fill会让环变实心盘Line连接两点成直线,画准星和刻度描边默认仅 1 像素宽,深色底上看不见Path用Data一串命令画出任意轮廓弧线命令A少写一个参数,扇形就丢失Fill/StrokeFill填内部,Stroke画边框两者常混用,画环该用StrokeCanvas.ZIndex数值大的渲染在上层别指望文件里的声明顺序决定层叠最小示例,7 行看懂定位:Canvas Width220 Height220 Background#101828 Ellipse Canvas.Left20 Canvas.Top20 Width180 Height180 Stroke#1E3A5F StrokeThickness2/ Line StartPoint20,110 EndPoint200,110 Stroke#2E5C8A StrokeThickness1/ Ellipse Canvas.Left104 Canvas.Top104 Width12 Height12 Fill#F2F5F9/ /Canvas实战:220 像素搭一个雷达扫描面板拆需求:面板共 8 个元素——3 个同心圆、2 条十字准星线、1 个扫描扇形、1 个中心点、1 行状态文字。画板取220x220,中心在(110,110)。逐层实现。第 1 层:三层同心圆。为什么先画它:雷达底盘只用Stroke不碰Fill,才不会挡住后面的扇形。三层直径取 180、120、60 像素,圆心都是画板中心,Canvas.Left每次加 30 即可对齐。Ellipse Canvas.Left20 Canvas.Top20 Width180 Height180 Stroke#1E3A5F StrokeThickness2/ Ellipse Canvas.Left50 Canvas.Top50 Width120 Height120 Stroke#1E3A5F StrokeThickness1/ Ellipse Canvas.Left80 Canvas.Top80 Width60 Height60 Stroke#1E3A5F StrokeThickness1/第 2 层:十字准星。为什么只有 2 条Line:水平、垂直各一条,两端都取 20 到 200 像素,恰好贴着外圆边缘内收。Line StartPoint20,110 EndPoint200,110 Stroke#2E5C8A StrokeThickness1/ Line StartPoint110,20 EndPoint110,200 Stroke#2E5C8A StrokeThickness1/第 3 层:60° 扫描扇形。为什么它是重点:扇形是一个Path,Data命令依次为M(移到中心)、L(直线到上端点)、A(弧回下端点)、Z(闭合)。弧线命令共 7 个参数:半径X 半径Y 旋转 大弧标志 扫描方向 x y。示例里是A 80 80 0 0 1 179,150:半径 80,大弧标志 0 取短弧,扫描方向 1 表示沿顺时针外侧走。两个端点(179,70)、(179,150)都落在 80 像素半径的圆上,鼓包方向就对了。!-- 数据:中心 → 上端点 → 80 半径弧 → 闭合 -- Path DataM 110,110 L 179,70 A 80 80 0 0 1 179,150 Z Fill#35D0A0 Canvas.ZIndex1/第 4 层:中心点与状态文字。为什么最后画:12 像素的Ellipse盖住线条交汇点,Canvas.ZIndex2压在最上层;TextBlock放底部,和图形互不干扰。Ellipse Canvas.Left104 Canvas.Top104 Width12 Height12 Fill#F2F5F9 Canvas.ZIndex2/ TextBlock Canvas.Left70 Canvas.Top202 TextSWEEP 60° FontSize12 Foreground#8B98A9/完整代码,粘进任意 Avalonia 窗口即可运行:Canvas Width220 Height220 Background#101828 !-- 三层同心圆:只描边不填充 -- Ellipse Canvas.Left20 Canvas.Top20 Width180 Height180 Stroke#1E3A5F StrokeThickness2/ Ellipse Canvas.Left50 Canvas.Top50 Width120 Height120 Stroke#1E3A5F StrokeThickness1/ Ellipse Canvas.Left80 Canvas.Top80 Width60 Height60 Stroke#1E3A5F StrokeThickness1/ !-- 十字准星 -- Line StartPoint20,110 EndPoint200,110 Stroke#2E5C8A StrokeThickness1/ Line StartPoint110,20 EndPoint110,200 Stroke#2E5C8A StrokeThickness1/ !-- 60° 扫描扇形:A 弧命令连接两侧端点 -- Path DataM 110,110 L 179,70 A 80 80 0 0 1 179,150 Z Fill#35D0A0 Canvas.ZIndex1/ !-- 中心点与状态文字 -- Ellipse Canvas.Left104 Canvas.Top104 Width12 Height12 Fill#F2F5F9 Canvas.ZIndex2/ TextBlock Canvas.Left70 Canvas.Top202 TextSWEEP 60° FontSize12 Foreground#8B98A9/ /Canvas新手最容易错的 4 个地方❌Ellipse Width180 Height180 Fill#1E3A5F/→ ✅ 去掉Fill,改写Stroke#1E3A5F StrokeThickness2。原因:Fill会把整个内部涂满,环一步变实心盘。❌DataM 110,110 L 179,70 A 80 80 0 0 0 179,150 Z→ ✅ 把A命令第 5 个参数改成 1。原因:扫描方向为 0 时弧走到另一侧,扇形鼓包立刻反掉。❌Canvas.Left50 Canvas.Right50→ ✅ 只保留一个。原因:源码先取 Left,取到就不再算 Right,你的右对齐完全不生效。❌Line StartPoint20,110 EndPoint200,110 Stroke#2E5C8A/→ ✅ 追加StrokeThickness2。原因:Line的描边宽度默认只有 1,深色底上几乎看不见。进阶路线:从静态面板到会动的雷达让扇形转起来:给扇形挂RotateTransform(绕中心点旋转的变换),再用DoubleAnimation把 Angle 从 0 推到 360;属性定义在 src/Avalonia.Base/Media/RotateTransform.cs。虚线环与渐变描边:Shape基类的StrokeDashArray(虚线长度模式)能把外圈变虚线刻度,Stroke换成渐变刷则整圈变色,均在 src/Avalonia.Controls/Shapes/Shape.cs。复杂轮廓:路径命令 M、L、C、A、Z 全部由 src/Avalonia.Base/Media/PathMarkupParser.cs 解析支持,下面这种叶形轮廓同样能用这 5 个命令勾出来。原点左上往右下,描边成环填充成块,A 弧方向别写丢,雷达面板自己搭。【免费下载链接】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），仅供参考