Avalonia 图形绘制完整指南纯 XAML 分 4 层拼出跨平台速度仪表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia本文针对 Avalonia 图形绘制只用 XAML 里的 Canvas、Line、Rectangle、Ellipse、Path拼出一个带刻度、指针和读数的速度仪表盘。代码在 Windows、macOS、Linux 上渲染结果一致全程靠声明式标记完成不碰任何逻辑文件。Avalonia 坐标系怎么读一对坐标就定住一个点写任何图形之前先把原点和数值增长方向装进脑子后面所有坐标都靠它解释概念说明例子原点位置画板左上角是(0,0)和数学课本的左下角相反左上角元素坐标为0,0轴方向x 向右增大y 向下增大屏幕习惯150,150 从原点向右 150、向下 150单位DIP设备无关像素按屏幕密度自动缩放的逻辑像素可以写小数StrokeThickness1.5三个数字锚点帮你校准直觉Canvas.Top50表示元素顶边离画板上边缘 50StartPoint25,150表示左移 25、下移 150 处的一个点Width12.5是合法写法小数直接用。Canvas 定位属性怎么定它只钉坐标不管排列Canvas 在 src/Avalonia.Controls/Canvas.cs 中定义是个自由放置容器它不会把子元素排成任何顺序只把你指定的坐标原样执行。它的测量尺寸返回0,0不占用父容器的布局空间所以可以叠在任意面板之上专门当绘图层。子元素靠四个附加属性钉住常见疑问整理如下想钉死位置用Canvas.LeftCanvas.Top值就是左、上边缘的坐标。想让元素贴着右/下边缘用Canvas.Right/Canvas.Bottom值是到右/下边缘的距离画板变大时元素跟着滑动适合贴边内容。左右、上下都写了听谁的Left 和 Right 同时设置时 Left 生效Top 和 Bottom 同时设置时 Top 生效。什么都没写元素落在(0,0)左上角。!-- Left/Top 钉死坐标Right/Bottom 锚定边缘随画板尺寸滑动 -- Canvas Width400 Height300 BackgroundLightGray Ellipse Canvas.Left50 Canvas.Top50 Width80 Height80 FillRed/ Rectangle Canvas.Right50 Canvas.Bottom50 Width100 Height60 FillBlue/ /Canvas四种图形分场景用Line 连线、Rectangle 成面、Ellipse 画圆、Path 兜底直线、矩形、椭圆、路径这些图形控件都放在 src/Avalonia.Controls/Shapes/ 目录它们共享一套外观属性Fill是填充色、Stroke是轮廓色、StrokeThickness是轮廓粗细。按你要画的东西选控件要画的东西控件关键属性一行示例刻度、指针、任意直线段LineStartPoint、EndPointLine StartPoint50,50 EndPoint200,50 StrokeBlack StrokeThickness2/直角块或带圆角的矩形RectangleRadiusX/RadiusY圆角半径Rectangle Width100 Height60 FillGreen RadiusX10 RadiusY10/椭圆Width等于Height时就是正圆EllipseWidth、HeightEllipse Width80 Height80 FillYellow/任何自定义轮廓PathData命令字符串Path StrokeBlack DataM 50,300 L 150,350 Z/两个容易写错的点!-- 要带描边的圆Width 和 Height 相等即为正圆再补上 Stroke 两个属性 -- Ellipse Width60 Height60 FillRed StrokeBlack StrokeThickness2/ !-- 圆角矩形只改 RadiusX/RadiusY其他属性与直角矩形完全一样 -- Rectangle Width120 Height60 Fill#4EC9B0 RadiusX12 RadiusY12/Path 的 Data 命令记住 M、L、C、Z 四个字母Data的值是一串按顺序执行的命令笔尖从上一条命令的落点出发继续画。四个核心命令的含义命令含义笔尖动作示例M移动移到起点这一段不落笔M 50,100L直线从当前位置画直线到目标点L 150,100C三次贝塞尔曲线借助两对控制点画平滑曲线C 100,50 130,150 200,100Z闭合直线连回起点标记子路径结束Z!-- 一个填充三角形M 起笔、两条 L 画边、Z 闭合Z 会影响 Fill 的区域判定 -- Path FillLightBlue StrokeBlack DataM 50,300 L 100,350 L 150,320 Z/画轮廓时习惯以Z收尾闭合的子路径让填充区域明确后续想继续画第二个子路径时用新的M重新起笔即可。速度仪表盘逐层组装底座、刻度、指针、读数按 4 层组装一个 300×300 的仪表盘中心点是(150,150)。每加一层都能独立验证效果出错时也容易定位。第一层底座两个 Ellipse 叠出边框!-- 外圈灰色、内圈白色两圈之间的空隙自然形成环形边框 -- Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/第二层刻度8 条 15 像素短线刻度沿 0°/45°/90°……315° 均匀摆开每条长 15 像素端点按中心(150,150)向外推两段半径算出!-- 上 / 右上 / 右 / 右下 / 下 / 左下 / 左 / 左上共 8 条 -- Line StartPoint150,25 EndPoint150,40 StrokeBlack StrokeThickness2/ Line StartPoint239,61 EndPoint228,72 StrokeBlack StrokeThickness2/ Line StartPoint275,150 EndPoint260,150 StrokeBlack StrokeThickness2/ Line StartPoint239,239 EndPoint228,228 StrokeBlack StrokeThickness2/ Line StartPoint150,275 EndPoint150,260 StrokeBlack StrokeThickness2/ Line StartPoint61,239 EndPoint72,228 StrokeBlack StrokeThickness2/ Line StartPoint25,150 EndPoint40,150 StrokeBlack StrokeThickness2/ Line StartPoint61,61 EndPoint72,72 StrokeBlack StrokeThickness2/第三层指针一根从中心伸出的红 Line!-- Canvas.ZIndex 数值大的渲染在上层保证指针压在刻度之上 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/第四层读数中心小圆点加一行 TextBlock!-- 中心小圆点盖住所有线条的汇聚处ZIndex 最高 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ !-- 读数文字放表盘下方与图形互不干扰 -- TextBlock Canvas.Left120 Canvas.Top285 Text60 km/h FontSize14/常见坑与渲染调优 下面几条按先排错、后提速的顺序列出叠放顺序反直觉ZIndex定义在Visual见 src/Avalonia.Base/Visual.cs上所有图形都能用数值大的渲染在上层。图层关系一旦可能变化就别依赖声明顺序直接写明 ZIndex。元素不随画板移动需要贴右/下边缘的内容写Canvas.Right/Canvas.Bottom别写死Left/Top。小元素太多拖慢渲染大量重复的刻度、圆点先合并成单个Path一条Data里装多个子路径每段以M起笔、Z收尾绘制对象数立刻降下来。复杂轮廓别用字符串硬拼动态或复杂的轮廓改用StreamGeometry增量构建避免反复拼接Data字符串。特效按需加模糊、透明度这类效果只加在需要的元素上不要对整个画板做全局滤镜。想动态调整时属性接上绑定即可由控件实时驱动例如配一个Slider!-- 拖动滑块圆跟着变大小Width 和 Height 绑同一个值保证始终是正圆 -- Ellipse Width{Binding ElementNameslider, PathValue} Height{Binding ElementNameslider, PathValue} FillOrange/完整代码与扩展方向下面这份代码可直接粘贴进任意 Avalonia 窗口运行四层结构完整保留Canvas Width300 Height300 !-- 第一层底座 -- Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ !-- 第二层8 条刻度 -- Line StartPoint150,25 EndPoint150,40 StrokeBlack StrokeThickness2/ Line StartPoint239,61 EndPoint228,72 StrokeBlack StrokeThickness2/ Line StartPoint275,150 EndPoint260,150 StrokeBlack StrokeThickness2/ Line StartPoint239,239 EndPoint228,228 StrokeBlack StrokeThickness2/ Line StartPoint150,275 EndPoint150,260 StrokeBlack StrokeThickness2/ Line StartPoint61,239 EndPoint72,228 StrokeBlack StrokeThickness2/ Line StartPoint25,150 EndPoint40,150 StrokeBlack StrokeThickness2/ Line StartPoint61,61 EndPoint72,72 StrokeBlack StrokeThickness2/ !-- 第三层指针 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/ !-- 第四层读数 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ TextBlock Canvas.Left120 Canvas.Top285 Text60 km/h FontSize14/ /Canvas想继续往下走扩展路径有三条给指针Line挂一个RotateTransform让旋转中心落在(150,150)指针就能围绕表盘中心摆动对RotateTransform.AngleProperty跑一个DoubleAnimation数值一变指针就跟上不需要任何额外代码这套 XAML 在所有支持的平台表现一致跨平台行为不需要单独验证。【免费下载链接】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），仅供参考