MAUI GraphicsView怎么用 MAUI自定义绘图教程

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

MAUI 中用 GraphicsView 实现自定义绘图,核心是提供一个可绘制的“画布”,再通过实现 IDrawable 接口来控制怎么画。它不依赖 SkiaSharp 的底层事件(如 PaintSurface),而是更轻量、跨平台统一的绘图模型,适合静态或简单动态图形。

GraphicsView 基本用法

在 XAML 或 C# 中添加 GraphicsView 控件,并绑定一个实现了 IDrawable 的对象:

XAML 写法:
<graphicsview drawable="{Binding MyDrawable}"></graphicsview>
C# 写法:
var view = new GraphicsView { Drawable = new MyCustomDrawable() };
Drawable 属性必须是非 null 的 IDrawable 实例,否则不渲染

写一个最简 IDrawable

新建一个类,实现 IDrawable,重写 Draw 方法:

方法签名:
public void Draw(ICanvas canvas, RectF dirtyRect)
ICanvas
提供所有绘图方法:画矩形、椭圆、路径、文字、设置颜色/粗细等
dirtyRect
是当前需要重绘的区域(通常就是控件尺寸),可用作边界判断或性能优化
示例:画一个蓝色圆角矩形背景 + 白色文字 C# 示例片段:
public class SimpleDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        // 填充背景
        canvas.FillColor = Colors.Blue;
        canvas.FillRoundedRectangle(dirtyRect.X, dirtyRect.Y, 
                                    dirtyRect.Width, dirtyRect.Height, 12);
<pre class='brush:php;toolbar:false;'>    // 绘制文字
    canvas.StrokeColor = Colors.White;
    canvas.FontSize = 16;
    canvas.DrawString("Hello", 
                      dirtyRect.Center.X, dirtyRect.Center.Y, 
                      HorizontalAlignment.Center, VerticalAlignment.Center);
}

}

常用绘图操作对照表

ICanvas 支持的关键绘图方法(无需额外引用 SkiaSharp):

DrawLine(x1, y1, x2, y2)
—— 画直线
DrawRectangle(x, y, width, height)
—— 画空心矩形
FillRectangle(...)
—— 填充矩形
FillRoundedRectangle(x, y, w, h, radius)
—— 填充圆角矩形
DrawEllipse(...)
/
FillEllipse(...)
—— 椭圆相关
DrawPath(path)
—— 绘制 PathF 路径(支持贝塞尔、弧线等复杂图形)
DrawString(text, x, y, ...)
—— 文字绘制(支持对齐方式)

进阶技巧:响应尺寸变化与重绘

GraphicsView 默认不会自动重绘,除非 Drawable 对象被重新赋值 或触发绑定更新:

若需动态刷新(比如动画、触摸反馈),可创建可绑定属性或使用
INotifyPropertyChanged
推荐做法:把绘图逻辑封装在 IDrawable 实现类中,内部用 public 属性控制状态(如 IsPressed、Progress),然后在 Draw 方法里读取并绘制不同样式 避免在 Draw 中做耗时计算;复杂路径建议预生成 PathF 并缓存

基本上就这些。不需要 SkiaSharp 初始化,不涉及平台特定事件,上手快、结构清晰,适合按钮、指示器、图表片段等轻量自定义 UI 元素。

相关推荐