Avalonia Canvas 绘制教程：15 分钟用纯 XAML 画出跨平台速度仪表盘

Avalonia Canvas 绘制教程15 分钟用纯 XAML 画出跨平台速度仪表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia这是 Avalonia 画板Canvas绘制的实战指南用一块画板加 4 个基础图形拼出带刻度、指针和读数的速度仪表盘。全程只写 XAML同一份代码在 Windows、macOS、Linux 上渲染一致。场景切入给你一个具体场景团队在做工业 HMI 设备的仪表屏产品希望首屏放一个实时速度表盘。你第一反应是找张 PNG 截图但很快遇到两个死穴——读数60 km/h是烧死在图片里的数据变了图不会变指针也只是一堆像素没法随数值摆动。图片路线走不通只能上矢量绘制每一条线、每一个圆都是独立控件属性一改画面就变。本文就用 Avalonia 的 Canvas从一块空白画板开始依次铺出表盘、刻度、指针和读数让你拿到一个能直接跑起来的仪表盘。前提速查新手最容易搞错的 4 个问题这节解决坐标系和定位规则的问题后面所有代码都建立在这些默认认知上。问原点在哪儿坐标轴朝哪答Canvas 左上角是(0,0)x 向右增大y 向下增大——和数学坐标系方向相反。问单位是什么能用小数吗答单位是 DIP设备无关像素不随屏幕分辨率变化的逻辑像素写150.5也合法。问子元素的大小谁定答Canvas 不做自动布局子元素宽度由它自己的Width或内容决定画板不管。问Left 和 Right 都设了怎么办答Left 生效Top 和 Bottom 冲突时 Top 生效全不设元素停在(0,0)。这节你拿到了坐标系、单位和定位冲突规则三个默认认知读代码时不再纠结为什么在这。核心组件速查Line / Rectangle / Ellipse / Path 一览表这节解决用哪个控件画什么的问题。所有形状源码集中在 src/Avalonia.Controls/Shapes/画板本体的实现在 src/Avalonia.Controls/Canvas.cs。用途关键属性一行示例直线刻度、指针StartPoint、EndPoint、Stroke、StrokeThicknessLine StartPoint0,0 EndPoint100,0 StrokeBlack StrokeThickness2/矩形底板、边框RadiusX控圆角Width、Height、Fill、RadiusXRectangle Width120 Height60 Fill#4EC9B0 RadiusX12/椭圆表盘、圆点宽高相等即正圆Width、Height、Fill、StrokeEllipse Width80 Height80 FillLightGray/路径任意自定义轮廓Data路径命令串Path StrokeBlack DataM 10,10 L 90,10 L 50,90 Z/Path的Data是命令串记住 4 个就够画大多数轮廓M移动画笔到起点不画线、L画直线到目标点、C三次贝塞尔曲线带两组控制点、Z直线连回起点并闭合。这节你拿到了一张图形 → 属性 → 一行代码对照表写 XAML 前可以先查表。 仪表盘分层搭建步骤画布层 → 图形层 → 交互层这节解决按什么顺序拼的问题分三层叠加每层都是最小可运行片段。画布层先铺表盘。300×300 的画板中心正好在(150,150)。两层Ellipse一深一白两圈之间自然形成环形边框。Canvas Width300 Height300 !-- 外层深灰椭圆表盘底 -- Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ !-- 内层白色椭圆压上去后露出环形边框 -- Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ /Canvas表盘有了接下来放刻度。图形层刻度 指针。8 条 15 像素的Line按 45° 间隔摆在表盘外圈再叠一根红指针。Canvas.ZIndex定义在 src/Avalonia.Base/Visual.cs 上数值大的渲染在上层。!-- 刻度15 像素长的短直线此处列 2 条其余同理按角度摆开 -- Line StartPoint150,25 EndPoint150,40 StrokeBlack StrokeThickness2/ Line StartPoint275,150 EndPoint260,150 StrokeBlack StrokeThickness2/ !-- 指针从中心指向边缘ZIndex1 保证压在刻度之上 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/静态的板子齐了最后补读数与交互。交互层读数 绑定。中心一个小红点盖住线条汇聚处下方TextBlock显示速度把Width接到Slider上拖动滑块图形就实时变。!-- 中心红点盖住线条交点ZIndex2 压到最上层 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ !-- 读数文字 -- TextBlock Canvas.Left120 Canvas.Top285 Text60 km/h FontSize14/ !-- 绑定示例拖动 Slider红点跟随缩放 -- Slider x:Nameslider Canvas.Left10 Canvas.Top270 Width80 Minimum20 Maximum120 Value60/ Ellipse Canvas.Left142 Canvas.Top142 FillRed Canvas.ZIndex2 Width{Binding ElementNameslider, PathValue} Height{Binding ElementNameslider, PathValue}/这节你拿到了一个能直接粘进窗口的完整仪表盘以及先底后线再交互的组装顺序。⚠️ Canvas 绘制避坑清单这节解决跑起来为什么不对的问题5 条现象都来自实际高频错误。所有子元素挤在左上角 (0,0)→ 原因Canvas 只认Canvas.Left/Canvas.Top这类附加属性你没设值 → 解法给每个子元素显式写上坐标别指望它自动排列。指针被刻度挡住、上下顺序乱→ 原因ZIndex默认为 0同层元素按 XAML 书写顺序叠放 → 解法给关键元素显式设Canvas.ZIndex锁住叠放层级。窗口一改大小图形被裁掉或错位→ 原因Canvas 测量时返回0,0不占父容器布局空间子元素也不参与自动布局 → 解法给 Canvas 本身设死Width/Height把绘图区尺寸钉住。Path 只看到描边、没有填充→ 原因Fill只对闭合子路径生效你的路径没连回去 → 解法Data末尾加Z闭合。大量小元素滚动时卡顿→ 原因每个元素都是独立绘制对象 → 解法把重复的小图形合并进单个Path的多条子路径减少绘制对象数。这节你拿到了一份看到现象能直接对号入座的排错清单。收尾速记清单与下一步这节帮你把全文压缩成可带走的东西。原点左上角x 向右 y 向下单位 DIP小数合法。Canvas.Left/Canvas.Top定位Left/Right 冲突时 Left 胜出。Line连线、Rectangle成面、Ellipse画圆、Path兜底一切轮廓。Canvas.ZIndex控叠放数值大的在上。Canvas 不管布局尺寸写死在自己身上。下一步方向给指针挂RotateTransform对RotateTransform.Angle属性做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），仅供参考