MAui中矢量绘图核心是用 XAML 或 C# 描述几何形状而非画布绘制,Shape 类(Rectangle、Ellipse、Path 等)通过 Fill、Stroke 等属性渲染,Path 结合 Geometry(RectangleGeometry、PathGeometry 等)支持贝塞尔曲线与布尔运算,可复用、变换、动态更新,但默认不响应触摸。

MAUI 中用 Shapes 和 Paths 绘制矢量图形,核心是使用 XAML 声明式语法或 C# 代码创建几何图形,再通过 Shape 类(如 Rectangle、Ellipse、Path)渲染。关键不在“画布”,而在“描述形状”——用几何数据定义轮廓,系统自动缩放、抗锯齿、适配高 DPI。
基础 Shapes:矩形、椭圆、线条直接用
MAUI 内置的 Shape 子类 开箱即用,支持填充(Fill)、描边(Stroke)、粗细(StrokeThickness)、圆角(CornerRadius)等属性。
-
Rectangle:设Width/Height,用CornerRadius实现圆角矩形 -
Ellipse:宽高相等就是正圆;不设宽高时会按父容器拉伸 -
Line:用X1/Y1到X2/Y2定义端点,注意坐标原点在左上角 -
Polyline和Polygon:传入逗号分隔的点序列(如"10,10 50,10 50,50"),后者自动闭合
Path:用 Geometry 描述任意矢量路径
Path 是最灵活的绘图元素,它本身不定义形状,而是通过 Data 属性绑定一个 Geometry 对象。常用 Geometry 类型有:
-
RectangleGeometry:指定Rect区域,适合裁剪或简单矩形路径 -
EllipseGeometry:指定中心、半径,比Ellipse更轻量(无 UI 层属性) -
PathGeometry:真正实现贝塞尔曲线、弧线、复杂轮廓——用Figures+Segments组合
例如绘制一个带圆角的 M 字母轮廓,可写成:
<Path Fill="Blue"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,10"> <PathFigure.Segments> <LineSegment Point="10,80" /> <BezierSegment Point1="20,40" Point2="30,40" Point3="40,80" /> <LineSegment Point="40,10" /> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>
Geometry 的复用与组合
同一个 Geometry 实例可被多个 Path 共享,节省内存;也可用 Combinedgeometry 做布尔运算(并集、交集、差集):
- 把两个
EllipseGeometry用GeometryCombineMode.union合成一个豆形 - 用
GeometryCombineMode.Exclude实现镂空效果(如圆环 = 大圆 − 小圆) - 所有
Geometry都支持transform(如RotateTransform),无需 重绘 路径数据
动态绘制与响应式适配技巧
图形不是静态贴图,而是实时计算的矢量对象:
- 绑定
WidthRequest/HeightRequest或用HorizontalOptions="Fill"让Path自适应容器大小 - 在后台 C# 中修改
Path.Data属性可实时更新图形(注意 线程:必须在 UI 线程操作) - 用
ScaleTransform替代硬 编码 尺寸,更易做动画或缩放控制 - 导出为 svg?MAUI 不内置导出,但可通过遍历
PathGeometry数据手动生成 SVG path 字符串
基本上就这些。Shapes 负责常用图形,Path + Geometry 负责定制化矢量表达,两者配合就能覆盖图标、图表、UI 装饰、简易动画等大部分矢量绘图需求。不复杂但容易忽略的是:所有 Shape 默认不响应触摸,如需点击,得套一层 TapGestureRecognizer 或改用 ContentView 封装。