MAUI怎么用 Shapes 和 Paths 绘制图形 MAUI矢量绘图

来源:这里教程网 时间:2026-02-21 17:33:50 作者:

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
封装。

相关推荐