Avalonia Canvas 绘图实战：3 层 XAML 搭出你的跨平台仪表盘

Avalonia Canvas 绘图实战3 层 XAML 搭出你的跨平台仪表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/AvaloniaAvalonia Canvas 是 Avalonia 框架里的自由定位绘图层子元素钉在任意坐标、互不挤占。读完本文你能纯 XAML 交付一个带刻度、指针和读数的速度仪表盘Windows、macOS、Linux 渲染结果一致。本文不覆盖动画与 StreamGeometry 构建几何。 先校准 3 个默认认知入口在哪画板是Canvas源码在 src/Avalonia.Controls/Canvas.csLine、Rectangle、Ellipse、Path集中在 src/Avalonia.Controls/Shapes/。坐标怎么算左上角为原点(0,0)单位 DIP设备无关像素x 向右、y 向下支持小数。写150,150就是向右 150、向下 150。冲突谁生效Left与Right同设时 Left 赢Top与Bottom同设时 Top 赢都不设元素落在左上角(0,0)。 Avalonia Canvas 定位参数速查参数作用维度一句话说明边界/冲突行为Canvas.Left水平左边缘距画板左边缘的像素数与 Right 同设时生效的是 LeftCanvas.Top垂直上边缘距画板上边缘的像素数与 Bottom 同设时生效的是 TopCanvas.Right水平右边缘距画板右边缘的像素数元素变宽时位置向左滑Canvas.Bottom垂直下边缘距画板下边缘的像素数适合贴底元素四个参数默认值都是NaN等价于没设置。Left 赢在源码的排布逻辑里ArrangeChild先取 Left拿到有效值就不再读 Right。Canvas 自身MeasureOverride返回0,0不占父容器布局空间可以直接叠在任何面板上当绘图层。!-- Width/Height 显式给值Canvas 测量结果为 0不给尺寸就看不见 -- Canvas Width400 Height300 BackgroundLightGray !-- Left/Top 钉住起点 -- Ellipse Canvas.Left50 Canvas.Top50 Width80 Height80 FillRed/ !-- Right/Bottom 锚定右缘窗口缩放时仍贴住边角 -- Rectangle Canvas.Right50 Canvas.Bottom50 Width100 Height60 FillBlue/ /Canvas一行代码画出 4 种基础图形Avalonia 的四种图形控件各管一类轮廓一行 XAML 就能画出直线、圆角矩形、正圆和任意路径。组件典型用途关键参数完整一行示例Line刻度、指针、连线StartPoint、EndPoint、StrokeLine StartPoint50,50 EndPoint200,50 StrokeBlack StrokeThickness2/Rectangle直角或圆角矩形RadiusX、RadiusY、FillRectangle Width100 Height60 FillGreen RadiusX10 RadiusY10/Ellipse椭圆宽高相等即正圆Width、Height、FillEllipse Width80 Height80 FillYellow/Path任意自定义轮廓Data、Fill、StrokePath StrokeBlack FillLightBlue DataM 50,300 L 100,350 L 150,320 Z/Data是字符串型路径命令记住四个就够画大多数轮廓命令含义示例M移动画笔到起点不画线M 50,100L从当前位置画直线到指定点L 150,100C三次贝塞尔曲线带两对控制点C 100,50 130,150 200,100Z直线连回起点并闭合闭合才影响FillZ!-- 圆角半径 12比 4 更柔和比 24 更接近矩形 -- Rectangle Width120 Height60 Fill#4EC9B0 RadiusX12 RadiusY12/ !-- 宽高同为 60Ellipse 此时退化为正圆描边用来观察边缘 -- Ellipse Width60 Height60 FillRed StrokeBlack StrokeThickness2/仪表盘由内向外 3 层搭建画板取 300x300中心即(150,150)所有数字都从这两个基准点推出来。第 1 层基础层——铺表盘设计意图两层同心椭圆叠出环形边框外圈当边框、内圈当刻度的底。取值依据外圈 260x260 钉在(20,20)内圈 244x244 钉在(28,28)两圈差 8 像素正好留出环宽。Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ /Canvas第 2 层交互层——装指针设计意图指针从圆心伸向刻度它是仪表盘里唯一动的元素必须压在其他图形之上。取值依据起点即中心(150,150)终点(210,85)落在内圈上缘线长约 92 像素不越出白底 244 的半径范围。!-- ZIndex1与刻度线同处一个平面时保证指针盖在上层 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/第 3 层表现层——读数设计意图中心小红点盖住线条汇聚处的毛刺文字负责把数值读给你看。取值依据圆点 16x16 钉在(142,142)圆心正好是(150,150)文字放表盘正下方水平居中偏移 120。!-- 142 150 - 16/2让圆点圆心对齐指针起点 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ TextBlock Canvas.Left120 Canvas.Top285 Text60 km/h FontSize14/完整代码前提任意 Avalonia 项目里把整个Canvas放进窗口或MainView的 XAML 即可Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ 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⚡ 3 个高频踩坑点忘设 ZIndex不显式设ZIndex时后声明的元素盖住先声明的指针画到刻度前面就会被线条压住一半。给上层元素补Canvas.ZIndex1层级才不会随声明顺序翻车。图形不跟数据走Width这类值写死之后控件再变图形也不变。属性接绑定才会实时刷新例如Width{Binding ElementNameslider, PathValue}不接绑定界面永远是初始状态。小元素画太多几十条短Line各是一个独立绘制对象首帧和重绘都会明显变慢。把刻度合并进单个Path一条Data装多个子路径多个M...L段绘制对象数从几十降到 1。收尾3 句记忆锚点速记原点左上角、x 向右 y 向下、单位 DIPLeft/Top 定位Right/Bottom 贴边冲突 Left/Top 赢Line 连线、Rectangle 成面、Ellipse 画圆、Path 兜底下一步给指针挂RotateTransform再对RotateTransform.AngleProperty做DoubleAnimation指针就能随数值真实摆动挂完在 Windows、macOS、Linux 上跑同一份 XAML摆法完全一致。更多用法可查官方文档docs/。【免费下载链接】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），仅供参考