Avalonia Canvas 绘图实战用纯 XAML 画出一个跨平台速度表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia面向 .NET 新手的一节 Avalonia 图形绘制练习只写 XAML在 Canvas 上画 2D 图形最后得到一个可拖动的速度表盘。全程不写 C# 逻辑代码同一份文件在 Windows、macOS、Linux 上渲染结果一致。先把 Canvas 坐标系想清楚Canvas 画 2D 图形前先约定四件事后面所有数字都按这套规则算约定规则原点画板左上角是(0,0)x 轴向右增大150,150就是向右 150、向下 150y 轴向下增大和数学坐标系相反按屏幕习惯单位DIP设备无关像素支持小数Canvas 本身不做任何自动排列——它只认四个附加属性把每个子元素钉在指定坐标上子元素多宽由它自己的Width或内容决定Canvas 不管。附加属性锚定方向行为Canvas.Left左边缘元素左边距画板左边的像素数Canvas.Top上边缘元素顶边距画板上边的像素数Canvas.Right右边缘元素右边距画板右边宽度变化时位置跟着滑Canvas.Bottom下边缘适合贴底元素冲突规则只有一条Left 和 Right 都写时 Left 赢Top 和 Bottom 都写时 Top 赢全都不写元素落在(0,0)。另外 Canvas 测量自己时返回0,0不占父容器空间可以单独叠在任何面板上当纯绘图层。这些定义在 src/Avalonia.Controls/Canvas.cs 里读一遍源码十分钟能看完。该画哪种轮廓就选哪个图形控件选型不用背对着这张表走你想画用这个控件必须写的属性一条直线刻度、指针LineStartPoint、EndPoint直角矩形RectangleWidth、Height圆角矩形Rectangle同上再加RadiusX、RadiusY圆或椭圆EllipseWidth、Height两者相等即正圆一条折线Polyline/PolygonPoints任意轮廓、曲线PathData命令字符串这五个控件外加Arc、Sector都在 src/Avalonia.Controls/Shapes/ 目录下。它们共享同一套外观属性Fill管内色Stroke管边框色StrokeThickness管边框粗细。Line默认边框粗细是 1想画粗线记得显式写。Path的Data是几何迷你语言的字符串记住四个命令就够画大多数轮廓命令含义例子M画笔移到起点不画线M 50,100L从当前位置画直线到指定点L 150,100C三次贝塞尔曲线两个控制点 终点C 100,50 130,150 200,100Z直线连回起点并闭合闭合影响FillZ动手把表盘画出来目标300×300 的表盘中心(150,150)灰色外圈、白色盘面、8 条刻度、一根红指针下面跟一个滑块和实时读数。第一步表盘底与边框。不画圆环而是叠两个Ellipse灰色大圆直径 260白色小圆直径 244两层之间自然露出 8 像素灰边省掉了画环形的任何额外工作。!-- 外圈灰底距画板每边 20 -- Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ !-- 白色盘面再内缩 8px两圈之间形成环形边框 -- Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/第二步指针和中心轴。指针是从中心(150,150)指向右上 45° 的一根红线终点取半径 105 处的(224,76)。注意这里指针写在刻度之前——默认后写在上指针会被后面的刻度盖住所以显式给它ZIndex1抬回来。中心再压一个 16×16 小红点盖住线条汇聚处看起来像转轴。!-- 指针中心到 45° 方向ZIndex1 保证压过后面写的刻度 -- Line StartPoint150,150 EndPoint224,76 StrokeRed StrokeThickness5 ZIndex1/ !-- 中心轴盖住线条汇聚点 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed ZIndex2/第三步刻度、读数、滑块。8 条刻度沿 0°/45°/90°… 摆开每条从半径 120 画到半径 105长 1545° 方向的坐标用150 ± r×0.707心算即可。读数不放属性里而是绑定给滑块滑块取值 0–200初始 60StringFormat把数字格式化成带单位的文本。把Value60改成 120启动时读数就是 120 km/h。完整案例新建 Avalonia 项目后把MainWindow.axaml里Window标签内的内容整体换成下面这段即可运行StackPanel Margin20 Spacing12 HorizontalAlignmentCenter !-- ① 表盘Canvas 只负责定位不做排列 -- Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ !-- ② 指针写在刻度前靠 ZIndex 抬到最上层 -- Line StartPoint150,150 EndPoint224,76 StrokeRed StrokeThickness5 ZIndex1/ Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed ZIndex2/ !-- ③ 8 条刻度每 45° 一条半径 120 → 105 -- Line StartPoint150,30 EndPoint150,45 StrokeBlack StrokeThickness2/ Line StartPoint235,65 EndPoint224,76 StrokeBlack StrokeThickness2/ Line StartPoint270,150 EndPoint255,150 StrokeBlack StrokeThickness2/ Line StartPoint235,235 EndPoint224,224 StrokeBlack StrokeThickness2/ Line StartPoint150,270 EndPoint150,255 StrokeBlack StrokeThickness2/ Line StartPoint65,235 EndPoint76,224 StrokeBlack StrokeThickness2/ Line StartPoint30,150 EndPoint45,150 StrokeBlack StrokeThickness2/ Line StartPoint65,65 EndPoint76,76 StrokeBlack StrokeThickness2/ /Canvas !-- ④ 读数绑定滑块拖动实时刷新 -- TextBlock Text{Binding ElementNamespeedSlider, PathValue, StringFormat{}{0:0} km/h} FontSize18 HorizontalAlignmentCenter/ !-- ⑤ 滑块0–200初始 60 -- Slider x:NamespeedSlider Width260 Minimum0 Maximum200 Value60 HorizontalAlignmentCenter/ /StackPanel跑起来拖动滑块读数跟着跳——图形、文字、控件各管各的绑定只牵线。画完第一张后最常问的 4 个问题指针被后面的元素挡住了怎么办XAML 里后写的默认在上。想打破这个顺序就写ZIndex它定义在Visual上见 src/Avalonia.Base/Visual.cs所有图形和控件都能用数值越大越靠上。把指针的1改成-1再运行能亲眼看到它被刻度盖住。怎么让图形跟着滑块动三个要素ElementName找到源控件、PathValue取哪个属性、StringFormat控制显示格式。案例里读数绑的是Text换成绑Ellipse的Width和Height就能让圆跟着滑块变大变小Width{Binding ElementNamespeedSlider, PathValue, FallbackValue80}。小图形一多就卡怎么提速合并。上百条短刻度别用上百个Line一个Path就能装下全部子路径!-- 一条 Data 装多条子路径渲染时只当一个图形处理 -- Path StrokeBlack StrokeThickness2 DataM 150,30 L 150,45 M 270,150 L 255,150 M 30,150 L 45,150/绘制对象数量降下来了重复的小元素尤其受益。ZIndex明明设了层序却像没变ZIndex只在同一父容器内的兄弟元素之间重新排序。两个元素分属不同容器时彼此完全不受影响——把其中一个挪进另一个的父级下或者调整嵌套结构层序才会按预期变化。带走三句话再往哪走带走三句话原点在左上角x 向右、y 向下单位 DIPCanvas.Left/Top钉位置Left/Top 冲突时赢。直线用Line、矩形用Rectangle圆角加RadiusX/RadiusY、圆用Ellipse、其余一切交给Path。默认后写的在上要打破顺序就ZIndex且只在同父级兄弟间生效。继续往哪走让指针真的转起来给Line挂一个RotateTransform用RotateTransform.AngleProperty做DoubleAnimation再加一个十几行的IValueConverter把滑块值映射成角度表盘就从静态图变成活的仪表。复杂轮廓命令字符串拼不动时改用StreamGeometry在代码里逐段构造路径XAML 只负责展示。动画细节补间、关键帧、缓动函数都在 src/Avalonia.Base/ 的 Animation 目录里照着声明式写法加到表盘上即可。同一套 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），仅供参考 Avalonia Canvas 绘图实战：用纯 XAML 画出一个跨平台速度表盘
Avalonia Canvas 绘图实战用纯 XAML 画出一个跨平台速度表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia面向 .NET 新手的一节 Avalonia 图形绘制练习只写 XAML在 Canvas 上画 2D 图形最后得到一个可拖动的速度表盘。全程不写 C# 逻辑代码同一份文件在 Windows、macOS、Linux 上渲染结果一致。先把 Canvas 坐标系想清楚Canvas 画 2D 图形前先约定四件事后面所有数字都按这套规则算约定规则原点画板左上角是(0,0)x 轴向右增大150,150就是向右 150、向下 150y 轴向下增大和数学坐标系相反按屏幕习惯单位DIP设备无关像素支持小数Canvas 本身不做任何自动排列——它只认四个附加属性把每个子元素钉在指定坐标上子元素多宽由它自己的Width或内容决定Canvas 不管。附加属性锚定方向行为Canvas.Left左边缘元素左边距画板左边的像素数Canvas.Top上边缘元素顶边距画板上边的像素数Canvas.Right右边缘元素右边距画板右边宽度变化时位置跟着滑Canvas.Bottom下边缘适合贴底元素冲突规则只有一条Left 和 Right 都写时 Left 赢Top 和 Bottom 都写时 Top 赢全都不写元素落在(0,0)。另外 Canvas 测量自己时返回0,0不占父容器空间可以单独叠在任何面板上当纯绘图层。这些定义在 src/Avalonia.Controls/Canvas.cs 里读一遍源码十分钟能看完。该画哪种轮廓就选哪个图形控件选型不用背对着这张表走你想画用这个控件必须写的属性一条直线刻度、指针LineStartPoint、EndPoint直角矩形RectangleWidth、Height圆角矩形Rectangle同上再加RadiusX、RadiusY圆或椭圆EllipseWidth、Height两者相等即正圆一条折线Polyline/PolygonPoints任意轮廓、曲线PathData命令字符串这五个控件外加Arc、Sector都在 src/Avalonia.Controls/Shapes/ 目录下。它们共享同一套外观属性Fill管内色Stroke管边框色StrokeThickness管边框粗细。Line默认边框粗细是 1想画粗线记得显式写。Path的Data是几何迷你语言的字符串记住四个命令就够画大多数轮廓命令含义例子M画笔移到起点不画线M 50,100L从当前位置画直线到指定点L 150,100C三次贝塞尔曲线两个控制点 终点C 100,50 130,150 200,100Z直线连回起点并闭合闭合影响FillZ动手把表盘画出来目标300×300 的表盘中心(150,150)灰色外圈、白色盘面、8 条刻度、一根红指针下面跟一个滑块和实时读数。第一步表盘底与边框。不画圆环而是叠两个Ellipse灰色大圆直径 260白色小圆直径 244两层之间自然露出 8 像素灰边省掉了画环形的任何额外工作。!-- 外圈灰底距画板每边 20 -- Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ !-- 白色盘面再内缩 8px两圈之间形成环形边框 -- Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/第二步指针和中心轴。指针是从中心(150,150)指向右上 45° 的一根红线终点取半径 105 处的(224,76)。注意这里指针写在刻度之前——默认后写在上指针会被后面的刻度盖住所以显式给它ZIndex1抬回来。中心再压一个 16×16 小红点盖住线条汇聚处看起来像转轴。!-- 指针中心到 45° 方向ZIndex1 保证压过后面写的刻度 -- Line StartPoint150,150 EndPoint224,76 StrokeRed StrokeThickness5 ZIndex1/ !-- 中心轴盖住线条汇聚点 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed ZIndex2/第三步刻度、读数、滑块。8 条刻度沿 0°/45°/90°… 摆开每条从半径 120 画到半径 105长 1545° 方向的坐标用150 ± r×0.707心算即可。读数不放属性里而是绑定给滑块滑块取值 0–200初始 60StringFormat把数字格式化成带单位的文本。把Value60改成 120启动时读数就是 120 km/h。完整案例新建 Avalonia 项目后把MainWindow.axaml里Window标签内的内容整体换成下面这段即可运行StackPanel Margin20 Spacing12 HorizontalAlignmentCenter !-- ① 表盘Canvas 只负责定位不做排列 -- Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ !-- ② 指针写在刻度前靠 ZIndex 抬到最上层 -- Line StartPoint150,150 EndPoint224,76 StrokeRed StrokeThickness5 ZIndex1/ Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed ZIndex2/ !-- ③ 8 条刻度每 45° 一条半径 120 → 105 -- Line StartPoint150,30 EndPoint150,45 StrokeBlack StrokeThickness2/ Line StartPoint235,65 EndPoint224,76 StrokeBlack StrokeThickness2/ Line StartPoint270,150 EndPoint255,150 StrokeBlack StrokeThickness2/ Line StartPoint235,235 EndPoint224,224 StrokeBlack StrokeThickness2/ Line StartPoint150,270 EndPoint150,255 StrokeBlack StrokeThickness2/ Line StartPoint65,235 EndPoint76,224 StrokeBlack StrokeThickness2/ Line StartPoint30,150 EndPoint45,150 StrokeBlack StrokeThickness2/ Line StartPoint65,65 EndPoint76,76 StrokeBlack StrokeThickness2/ /Canvas !-- ④ 读数绑定滑块拖动实时刷新 -- TextBlock Text{Binding ElementNamespeedSlider, PathValue, StringFormat{}{0:0} km/h} FontSize18 HorizontalAlignmentCenter/ !-- ⑤ 滑块0–200初始 60 -- Slider x:NamespeedSlider Width260 Minimum0 Maximum200 Value60 HorizontalAlignmentCenter/ /StackPanel跑起来拖动滑块读数跟着跳——图形、文字、控件各管各的绑定只牵线。画完第一张后最常问的 4 个问题指针被后面的元素挡住了怎么办XAML 里后写的默认在上。想打破这个顺序就写ZIndex它定义在Visual上见 src/Avalonia.Base/Visual.cs所有图形和控件都能用数值越大越靠上。把指针的1改成-1再运行能亲眼看到它被刻度盖住。怎么让图形跟着滑块动三个要素ElementName找到源控件、PathValue取哪个属性、StringFormat控制显示格式。案例里读数绑的是Text换成绑Ellipse的Width和Height就能让圆跟着滑块变大变小Width{Binding ElementNamespeedSlider, PathValue, FallbackValue80}。小图形一多就卡怎么提速合并。上百条短刻度别用上百个Line一个Path就能装下全部子路径!-- 一条 Data 装多条子路径渲染时只当一个图形处理 -- Path StrokeBlack StrokeThickness2 DataM 150,30 L 150,45 M 270,150 L 255,150 M 30,150 L 45,150/绘制对象数量降下来了重复的小元素尤其受益。ZIndex明明设了层序却像没变ZIndex只在同一父容器内的兄弟元素之间重新排序。两个元素分属不同容器时彼此完全不受影响——把其中一个挪进另一个的父级下或者调整嵌套结构层序才会按预期变化。带走三句话再往哪走带走三句话原点在左上角x 向右、y 向下单位 DIPCanvas.Left/Top钉位置Left/Top 冲突时赢。直线用Line、矩形用Rectangle圆角加RadiusX/RadiusY、圆用Ellipse、其余一切交给Path。默认后写的在上要打破顺序就ZIndex且只在同父级兄弟间生效。继续往哪走让指针真的转起来给Line挂一个RotateTransform用RotateTransform.AngleProperty做DoubleAnimation再加一个十几行的IValueConverter把滑块值映射成角度表盘就从静态图变成活的仪表。复杂轮廓命令字符串拼不动时改用StreamGeometry在代码里逐段构造路径XAML 只负责展示。动画细节补间、关键帧、缓动函数都在 src/Avalonia.Base/ 的 Animation 目录里照着声明式写法加到表盘上即可。同一套 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），仅供参考